Font metrics and vertical space in CSS
We put a lot of effort into the quality of the fonts in the Typekit library. As part of that work, we’ve been researching the relationship between font math and CSS, and would like to share what we’ve found. If you’ve ever wondered why some fonts look smaller than others at the same typeset size, or why the vertical space between lines of text is such a guessing game, this post is for you.
Font files contain more than just glyphs, the designed characters and symbols that are the essence of a typeface. They also contain mathematic instructions for spacing those characters, such as the actual amount of room a glyph should consume relative to its CSS-specified size and the amount of horizontal space on either side of a glyph.
FF Meta Web Pro on an infinite canvas.
Some of the most interesting, critical font math for web designers is related to the visible and invisible vertical space at play when we typeset web text. When type was made out of wood, lead, or film, designers had to adhere to physical constraints when typesetting. Now, we typeset using CSS — setting font-size, line-height, margins and padding. Our letterforms live on an infinite canvas; they are mathematic points and curves, independent of resolution. Let us imagine a glyph on this infinite canvas, stretching in any direction as far as it pleases.
Font files provide structure for glyphs by establishing the invisible bounds that will govern them. A font’s em square and baseline determine its relative size and placement when typeset. Vertical metrics influence the height of ascenders and depth of descenders.
FF Meta Web Pro (left), Athelas Web (right)
Font math and CSS
Even when fonts’ em squares are sized to the specification of our CSS, the positioning of fonts’ baselines, the size of letterforms relative to their em squares, and fonts’ vertical metrics will vary from typeface to typeface. So the size and spacing of text we see in web browsers will also vary.
14px FF Meta Web Pro (above), 14px Athelas Web (below)
If letterform heights or depths exceed the values set by ascender/descender vertical metrics, glyphs can appear clipped. Not helping here is the fact that type designers must juggle three sets of vertical metrics values that (surprise!) are each used by a different array of web browsers. For example, while most web browsers use hhea metrics, Internet Explorer instead uses OS/2 metrics.
Example of a vertical descender metric that clips some characters in web browsers.
Vertical metrics can be confounding for web designers. These measurements seem not to influence type size or line height, as they overlap (rather than push against) vertically adjacent lines of text. However, when two typefaces are combined on the same line of text, vertical metrics can influence the vertical space consumed by that line. An explanation of how this works deserves its own post, so we’ll save that for later.
Two fonts’ combined math can affect spacing. More about this in a dedicated post.
These complexities can be a drag. There’s nothing like hacking on font math when you could otherwise be finished with a project. That’s why we’re studying this stuff here at Typekit — to give web designers more control and a deeper understanding of font math and CSS, and to make things easier in cases where we want the math to “just work.”
We also want to help our foundry partners better understand how CSS works with their typefaces, so we’ve developed a suite of Partner Tools that help double check for missing glyphs, inconsistent metrics, and metrics values that might clip glyphs. With this information, type designers can review and adjust their fonts for better translation in CSS.
Font review tools for Typekit partners.
Control and peace of mind
Type designers need to know how font math translates to CSS typesetting, and Typekit users should never have to worry that type will be spaced unpredictably in any browser. We’re looking forward to growing Typekit and continuing to share what we learn.