MyFonts on CSS line-height and web font spacing
This series of articles (one, two, three) from MyFonts has some well-articulated information and advice about line spacing, and concludes by explaining the thinking behind some of MyFonts’ kit builder options.
Whenever a font-size is specified in some CSS units (absolute or relative), it is always the font’s em that is scaled to that specified size. It is the font’s designer who decides what the size of all the font’s glyphs will be in relation to the em.
That’s why some 16px fonts look bigger or smaller than other 16px fonts.
There is no ideal line height that works equally well for all fonts. Each typeface calls for a different default line height, depending on its design qualities — whether it’s condensed or wide, whether it has tight or loose letterspacing, whether its ascenders or descenders are long or short compared to the x-height etc.
That’s just default line spacing. Once a typeface is set in context, compositional considerations also apply. What size is the type? How wide is the measure? How long is the text? How is the text meant to be read? How should readers feel? Plus, we have responsiveness to think about. What size range is the type? How wide or narrow will the measure flex? What information do we have about readers’ devices and contexts, and how should our typography react?
Each of the first four methods (Best, 120%, Automatic, and Bounding Box) will make sure that all three sets of linespacing values “agree with each other”. This means that line heights will be the same between different browsers and operating systems (though the different methods may produce different line heights from each other). The fifth method (Native) will leave the foundry’s original linespacing values untouched.
It’s a bit confusing to have multiple choices for platform-consistent line spacing (if one of the options is “Best”, why not always choose that?), and I wonder how useful it will be to maintain foundry default line spacing values (what web designer would opt-out of platform consistency?). That said, I really like that MyFonts is giving users the ability to choose whichever seems more important:
- Generous vertical metrics values, so that glyphs are never clipped
- Tight vertical metrics values, to keep body size at a manageable level