I came across a fairly old article on Web typography (by Eric Meyer) this morning that I found pretty interesting and thought I would share some of my feelings on the subject matter.
Up to this point I’ve been doing things completely different. To ensure consistency through the layout, I set a base font size of ‘x’ pixels on the body tag. Any element in the page that requires a different height gets sized accordingly:
body {
font: normal 13px/19px Arial, Helvetica, sans-serif;
}
h1 {
font-size: 20px; line-height: 23px;
}
This method works, but it is hardly convenient. Each time I need to change the font size (or add in a new rule that has a varying font size), I need to update the line-height to ‘match’.
Generally, using a line-height that is 3 pixels larger than the actual size of the font seems to be a good practice to follow.
Now, thanks to this tip by Eric Meyer, using a unitless line-height will really simplify things within the style sheet. So, instead of basing a fixed-sized line-height, as I did in the past (and as shown in the CSS snippet above), I can just do the following:
body {
font: normal 13px/1.46 Arial, Helvetica, sans-serif;
}
What does this mean (in case you were to lazy to read Eric’s article!)?
Simply put, I take the size of the font and multiply it by a value (in this case 1.46) to produce the desired line-height (19 pixels).
What about different-sized fonts that are used throughout the page? They will take care of themselves – no need to manually assign an ‘extra’ line-height value to them. The multiplier (1.46) that is defined on the body tag will take care of this for you.
A pretty cool tip – one that I wished I had known a long time ago!
One of the more interactive parts of the site is a small 