CSS, Font Metrics, & You A Shameless Appeal for Useful Numbers

What is CSS?

A basic Web page is composed of HTML and CSS.

HTML is just annotations around the text, describing its structure.

CSS is just annotations keyed off the HTML, describing its presentation.

Design for the Web is very different from design for Print.

You often don't have control over the content.

You almost never have control over the display size or orientation.

font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

You don't even have actual control over the font face or size (as the user might have set a minimum, or the font loading may be turned off due to bad network connectivity or metering).

Resizable CSSWG Redesign circa 2011 (Divya Manian & Elika Etemad)

But with CSS, we can make designs that take whatever environment and content we have as input, and lay it out to fit perfectly. (Try resizing the page above!)

Resizable Typography Experiment using “Intrinsic Design” (Jen Simmons)

We can use content-, container-, and/or typeface-based sizing constraints, allowing the underlying alignment decisions of the typographer to be expressed regardless of screen size.

However, doing this requires us to have some accurate font metrics.

Font Metrics & CSS Enabling the Browser to Align Things Nicely

CSS uses OpenType metrics for the ascent and descent.

For underline and strikethrough position and thickness.

For superscript and subscript position and size.

For correct drop caps we need baselines and cap heights.

As well as other metrics for other writing systems.

But sometimes fonts don't give us correct metrics.

Bad Metrics Are Bad How to Make Web Typography Suck

If the superscript metrics don't match the superscript glyphs, any synthesized missing glyphs look really awful.

Superscript alternate glyph (left), synthesized superscript glyphs (middle), and incorrect mixture of the two (right)

A good underline offset helps us avoid problems like placing the line right across the bottom edge of the descenders.

An incorrect cap height means our drop caps look bad.

Mismatched ascent and descent metrics across platforms means designers are very upset when their page only works correctly on one OS.

Font Metrics Used By CSS

How You Can Help

If you are a Graphic Designer…
… use up-to-date, quality fonts with good metrics.
If you are a Font Designer…
… ensure your fonts have accurate metrics.
If you are a Font Tool Maker…
… make it easy for your users to output accurate metrics.
If you are an OpenType Technologist…
… add missing metrics for non-Western writing systems.

Thanks! ~fantasai