Thought I’d write up two things I implemented in a recent redesign of my girlfriend’s personal site.
Fit images in liquid columns
Richard Rutter has done some interesting experiments on displaying images in liquid (variable-width) columns. One interesting technique he mentions for fitting images in such columns is to set the CSS
width of the image to
100% (to grow and shrink with the column) and the
max-width to the actual width of the image in pixels (to never grow it beyond its original size).
I’m using this method for images in the LiveJournal entries displayed on the site.
1 2 3 4
1 2 3 4 5 6 7 8 9 10 11 12
$$ function finds the images using a CSS selector. You’d likely need to change that selector here and in the CSS above.
Different font, different font size
The headers on the site are in Helvetica Neue Light (which I think comes with OS X). If a visitor does not have that font, the fallback is plain Helvetica or Arial.
A problem with this is that Helvetica and Arial are a lot wider at the same
font-size, making things look worse than intended.
CSS allows for
font-family fallbacks, but they will all share a
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
Then, I add a class to the body element if Helvetica Neue Light is not present:
1 2 3 4 5 6 7 8
Finally, I have CSS selectors to change headers if this class is present:
1 2 3 4 5 6 7