Updating vertical metrics for cross-platform consistency

We are constantly learning more about how different browsers and operating systems interpret fonts’ vertical metrics. Recently, and with help from experienced type designers and a great deal of research, our understanding of metrics inconsistencies has grown substantially. As a result, we are working with our foundry partners to update fonts for cross-browser consistency.

You may remember from a recent post about font metrics and vertical space in CSS that there are different sets of vertical metrics values. If the values in one set differ from another, text can be spaced unexpectedly in a layout. Without cross-platform consistency, you can see that the text below sits a bit too low in Windows (red), and a bit too high on Macs (blue).

Proxima Nova Condensed, before and after vertical metrics consistency update.

Proxima Nova Condensed before and after having its vertical metrics updated.

We have updated Proxima Nova (including Condensed and Extra Condensed) so that the vertical metrics are consistent across browsers. Now, designers who use these fonts can be assured that page layouts will more closely match across platforms. Because this may cause slight positioning changes in some designs, we’re not rolling out these changes automatically; instead, you’ll need to republish your kits to see them.

We’re thinking of some slick ways to let Typekit users know about changes to the specific fonts in their kits. Until then, republishing your kits is all it takes to get the latest and greatest versions of these typefaces.

11 Responses

  1. I think you should consider versioning your fonts. A change like this would completely break my design because I would have created different CSS rules for Mac and Windows to fix the spacing difference.

    1. Tim Brown says:

      Thijs, you’re absolutely right. We’ve been thinking a lot about versioning.

  2. Rydgel says:

    I changed my font to proxima, but the refresh doesn’t. Maybe the servers are so much busy..

  3. Ray Brown says:

    You guys are *constantly* hitting the nail on the head. Keep up the great work, friends.

  4. Richard Fink says:

    So, does that mean the vertical metrics in the fonts have been changed to a single set of cross-browser settings?
    Or are you serving fonts with different metrics to different browsers?
    This isn’t clear.

    1. Tim Brown says:

      The former. Sorry that wasn’t clear here, Rich. It’s clear to our foundry partners as they review their fonts. We recommend specific measurements and explain which ones are used by which browsers.

  5. Rich Carey says:

    +1 for versioning. How can I opt out of this change?

    Is the example above on the right actually showing the fonts as rendered on both platforms (which I think impossible), or is this just a diagram meant to show how the alignments used to differ and now don’t? Which platform/browser was used to render the type on the right?

    1. Tim Brown says:

      Thanks Rich. You can’t opt out, but this is why we’re looking into versioning. We want users to have total control over how and when upgrades happen.

      The example above is meant to show how the alignment used to differ and no longer does, but these are indeed screenshots of the typeface as rendered. They show our specimen of the font (Proxima Nova Condensed) as rendered in Safari 5 on Mac OS 10.6 and Safari 5 on Windows XP with ClearType enabled.

  6. Richard Fink says:

    Thanks for clarifying, Tim.
    You know how I roll: any chance you’ll be publishing info on the causes and the fixes for this problem for the community at large?

    1. Tim Brown says:

      Happy to share this info, although it’s not super interesting for most people. We’re constantly learning, but here’s what we know right now: Windows browsers use Win metrics, Mac browsers use hhea metrics, and Firefox on Linux uses Typo metrics unless the hhea values are greater. Win and hhea metrics must match, including an hhea linegap of zero. Typo linegap has to be zero too, or lines of text are spaced unpredictably across browsers.

      The specific values to which metrics should be changed are unique to each font file. Our internal tools for foundry partners make recommendations based on the conditions I just mentioned, and also based on the maximum ascent/descent of glyphs in the font file.

  7. Richard Fink says:


    You’re too young to remember the comedian Tim Conway on the TV show McHale’s Navy who, whenever stuff got technical, would interject: “Gee, I love that kind of talk.” (Gotta be clips or reruns on Youtube or Nick at Nite or somewhere.)
    Anyway, thanks, very useful. Love that kind of talk.

    Off to figure out the mind-bending repercussions of yet another documentMode in IE9…

Comments are closed.

Tim Brown

Head of Typography for Adobe Typekit & Adobe Type. Practicing typography and web design every day. I write, speak, and make tools to share what I learn. I try to be helpful. I love my wife, kids, family, friends, teachers, and dogs. I'm a volunteer firefighter.

Optical Sizes on the Web

Christopher Slye · September 8, 2010 · Using Type

Choosing Type for Screen

Paul D. Hunt · September 15, 2010 · Using Type