Comments on: Typography: Baseline Rhythm Deciphered

By: ImCat

ImCat — Sat, 22 Dec 2007 04:23:46 +0000

@anonymous, yes, you are wrong. In CSS ‘em ‘ = font-size for the element (or element’s parent, if elementy does not have font-size set).
So if font-size for body is 12px then em for body is also 12px and 1.5em makes 18px.

By: anonymous

anonymous — Wed, 14 Nov 2007 23:52:43 +0000

nice article.. Small correction, I could be wrong, I thought that

1em = 12pt = 16px.

This is in reference to your your comment in the CSS Where you said that 18px = 1.5em where it should be 18pt = 1.5em

By: Bert

Bert — Thu, 05 Jul 2007 14:18:49 +0000

Ok, I’m all for this, but one question:
How do you maintain the vertical rhythm when you use things like sub or superscript?

By: Kevin Yank

Kevin Yank — Thu, 03 May 2007 21:56:33 +0000

Specifying the font-size in pixels would only be necessary if you wanted your vertical rhythm to include graphical elements as well. I personally use this technique with font-sizes specified in ems, and it works fine.

By: Matthew Magain

Matthew Magain — Wed, 02 May 2007 23:04:48 +0000

Lisa: AFAIK setting font size in fixed units only prevents users on IE6 or earlier from resizing their text. See my link to Richard’s article on 24ways above for details on how this can be addressed.

By: Lisa Herrod

Lisa Herrod — Wed, 02 May 2007 22:04:40 +0000

Interesting post Matt, thanks ;)

Just one point I’d like to question, from a best practice, usability position, why are font sizes specified in pixels?

I see Geoffrey’s tool requires font sizes to be specified in pixels, and in the auto-generated CSS is produces code for the font in pixels and the line height in em’s.

By: Kevin Yank

Kevin Yank — Tue, 01 May 2007 01:22:45 +0000

There is one big difference between specifying a line-height with units (em, ex, %, pt, pc, in, cm, mm, or px) and using a unitless muliplier as Neil suggests. Traditionally, using a unitless multiplier was the preferred method, because descendant elements would inherit the multiplier, and not the calculated value. For example, if you set the line-height on a p element to 1.2 and its absolute font size was 10 pixels, it would have a leading of 12 pixels, but if that paragraph contained, say, a span element with a font size of 15 pixels, the leading around that span would increase to 18 pixels (1.2 × 15 pixels). While handy for allowing lines to expand to accommodate larger content, this behavior would interfere with the "vertical rhythm" discussed in this article, which is why it is not recommended when applying this design style. Instead, if you wish to set a vertical rhythm, you should specify the line-height using absolute or relative units. The em is popular, as it allows you to specify a value in terms of the font size. For example, if you set the line-height on a p element to 1.2em (note the unit this time!) and its absolute font size was 10 pixels, it would again have a leading of 12 pixels, but this time if the paragraph contained a span element with a font size of 15 pixels, the leading around that span would remain fixed at 12 pixels, as the absolute measurement is inherited from the paragraph, rather than the ratio. Of course, in this example you would get the large-font span overlapping the line above it because the line height would be too small for the font in the span, but your vertical rhythm would remain intact. Hope that clears the issue up.

By: Matthew Magain

Matthew Magain — Mon, 30 Apr 2007 21:36:33 +0000

Good point Neil. line-height can take either a unitless value to be multiplied by the font-size, or a fixed distance, with units.

For those with a print background, it can be more intuitive to think in specific distances, as traditionally this is how leading is expressed (e.g. Palatino 12/18 refers to a 12pt font size and leading of 18pt). But an absolute value is definitely fine too.

By: Neil

Neil — Mon, 30 Apr 2007 14:05:52 +0000

Why use units on the line-height at all? They’re not needed or necessary, imo.