Life @ High Road Communications

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!