Advertisement


Optimum line height in relation to font size


Question

Is there an agreement on what the optimum mathematical proportion of line height and the size of a text is? And if there is, is it the same for print and web?

2014/12/15
1
25
12/15/2014 4:21:00 PM

Accepted Answer

Short answer: "No."

Long answer: There are four factors involved in deciding the leading (nowadays meaning the distance from one baseline to the next, also called line height): the x-height of the characters, the measure (length of the line), the weight of the strokes of the characters themselves and the size of the type. In this answer, for simplicity, I'm going to use "leading" and "line height" interchangeably.

Of these, the one that dominates is the measure, followed by x-height and point size.

The wider the measure, in general, the more open the line height must be to maintain readability. If your measure is longer than about 70 characters of your chosen typeface and point size, you'll need to increase the line height so the reader doesn't skip or accidentally repeat a line while reading.

The size of the characters is never the same as the point size, which in the days of metal type was taken to be the total measurement from the bottom of the lowest descender (e.g., the tail of the lowercase "y") to the top of the highest ascender (such as the vertical stroke of the lowercase "h"). The height of the lowercase "x," from which "x-height" derives, might be tall (Arial) or very short (Bernhard Modern) in relation to the point size. Type set so that the line height is the same as the point size is "set solid" -- no extra lead between the lines. Arial or Helvetica look horrible set solid. Bernhard Modern doesn't.

To maintain readability, typefaces with a large x-height in relation to the cap and ascender height (e.g., Century Schoolbook or Helvetica) need more line height, relative to point size, than Garamond or Futura, which have smaller x-heights.

Sans serifs tend to have much thicker strokes, relative to their size, than serif typefaces. Setting them too tightly (small line height) makes paragraphs and pages look very heavy and dark, and can make them very hard to read. Opening up the leading, and sometimes the character spacing, improves the look of the text considerably. An serif face with a relatively small x-height, like Garamond, can be set with much less line height.

All of these considerations are modified by how the designer wants the page to look. Some subjects are enhanced by a more airy look to the page (e.g., romantic poetry, unicorn stories), calling for a delicate typeface and open leading. Others need more authority (textbooks, say) and benefit from a darker "type color."

Now let me dispense with the Golden Ratio (phi) idea. It would be wrong in almost all cases. Mathematics has nothing to do with it. Appearance does.

Contrary to what you might think, large text such as headlines requires tighter leading than paragraph text. Headlines are often set with "negative leading" -- the line height is less than the point size. This is especially true for headlines in all caps, which always require reduced leading. (Because of ascenders and descenders, it is common for multi-line headlines to have different leading on each line in order to make the line spacing look even.) Conversely, small sizes, such as for captions or footnotes, need more leading or they become hard to read. Type looks "looser" as it gets larger and "tighter" as it gets smaller, which requires adjustments to letterspacing below 8 pt and above about 24 pt for most typefaces.

You would go seriously astray if you tried to use phi (or any fixed ratio) to calculate line height, because you would be right only by accident.

For the web, use typefaces designed for low-resolution devices for at least the next few years, until moderate-resolution screens (250 - 400 ppi) become commonplace. Not all "web fonts" from providers such as Google, Extensis or Typekit are usable at text sizes on most displays. Web text tends to read better when spaced a little more openly than on a printed page, because of the coarse dot grid and OS manipulations that blur strokes and distort character shapes.

2012/08/27
20
8/27/2012 5:57:00 AM