Vertical Metrics

  • by Rainer Erich Scheichelbauer
  • Tutorial
  • – Modified on

For historic reasons, there are three sets of values that deal with your vertical metrics. They’re known as hhea, OS/2 and win (or usWin) metrics. Depending on which OS you’re on and which application you’re in, a different set is used for rendering the font on the screen.

Unfortunately, all of these values relate to each other in a pretty complicated way. Fortunately, Glyphs does its best to calculate them based on the vertical metrics you enter for each of your masters. This might lead to problems, however, if these values change between masters.

And in order to avoid vertical jumping between different fonts of your family, it is a good idea to synchronise all values across all masters. You will do this with Custom Parameters in File > Font Info > Masters (Cmd-I). Set the values in one master, then copy and paste the parameters into the Custom Parameters fields of all other masters.

But what do these values mean?

The hhea Values

The name hhea refers to the hhea TrueType table. I believe it’s an abbreviation for horizontal typesetting header. Macs and iOS devices use these values for rendering. hhea knows three vertical metrics values. (For convenience, I’ll use the Custom Parameter names that Glyphs uses.)

  1. hheaAscender: the height of the ascenders in units
  2. hheaDescender: the depth of the descenders in units (negative value)
  3. hheaLineGap: the recommended whitespace between lines

The OS/2 typo Values

These values are part of the OS/2 TrueType table. Anybody remember the operating system by the same name? Type pros commemorate it every day. Sometimes, they are also referred to as sTypo or simply typo values, though. To quote Yannis Haralambous (p.724), these values ‘are oddly similar to ascent, descent, and lineGap in the hhea table but that should not necessarily be so precise or so closely tied to the vagaries of the glyphs’ outlines. Windows supposedly uses these values to find the ideal parameters for layout; thus we have a certain degree of artistic freedom.’

  1. typoAscender: the height of the ascenders in units
  2. typoDescender: the depth of the descenders in units (negative value)
  3. typoLineGap: the recommended whitespace between lines

The big layout apps, XPress and InDesign, use the typoAscender and typoDescender values to determine the offset of the first baseline in a text box and the minimum size of a text box below which the display of type is suppressed.

There is one thing you need to watch out for, though: the UPM dogma. For whatever reason, the spec stipulates that difference between typoAscender and typoDescender should be as large as the font’s UPM (usually 1000). This is the first thing that’s going to make things complicated for us. We’ll come back to that later.

The usWin Values

Actually, the win (or usWin) values are also part of the OS/2 table.

  1. winAscent: the top extremum of the font rendering box
  2. winDescent: the bottom extremum of the font rendering box (positive value)

Attention: whatever extends above or below these values, will likely be cut off when rendered by the Windows text engine. Hence, the easiest way, it seems, is to make sure everything in the font fits into the win span. So, usually, the win span will encompass more than 1000 units (or whatever your UPM value is). Now, I suppose you can already guess what the problems are going to be.

In any event, with these Custom Parameters, you can override the automatic calculation and set the values manually. But beware: amongst font nerds, there are fierce disputes going on about what is the best strategy. Let me show you the most popular strategies for manually setting your vertical metrics.

Use Typo Metrics

There is one more thing. If you can safely ignore older (i.e., pre-2006) MS Office versions, you should add a Use Typo Metrics parameter to File > Font Info > Font:

Use Typo Metrics boolean If checked, applications that respect this setting (in particular, versions of Microsoft Office since 2006) will prefer typoAscender, typeDescender, and typoLineGap over winAscent and winDescent for determining the vertical positioning. Default is off. Corresponds to bit 7 (‘don’t use Win line metrics’) of the fsSelection field in the OS/2 table. According to the MakeOTF User Guide, this bit was introduced ‘so that reflow of documents will happen less often than if Microsoft just changed the behaviour for all fonts.’

All modern fonts should have this parameter. It tells Office apps to prefer the OS/2 values over the win metrics. So if you do not have a good excuse, add it to your font. Alas, one good excuse may be that, with this parameter, (older) Office software may apply clipping at the OS/2 values rather than at the win values. Duh. But that should be a problem of the past.

The Adobe Strategy

The hhea values are synchronized with the OS/2 values.

  1. hheaAscender = typoAscender
  2. hheaDescender = typoDescender
  3. hheaLineGap = winAscent + winDescentUPM
  4. typoLineGap = hheaLineGap
  5. Use Typo Metrics

With this strategy, the linegap tends towards the small end of the spectrum. So it may be a good idea to use this method if your font has a low x-height (below half UPM). Advantage: better synchronization of font display between Mac apps and layout apps (XPress, InDesign). Disadvantages: differences between Mac and Win display; accents on caps may be cut off in office apps.

The Microsoft Strategy

The hhea values are synchronized with win values, thus to the BBox maxima.

  1. hheaAscender = winAscent
  2. hheaDescender = −winDescent
  3. hheaLineGap = 0
  4. typoLineGap = winAscent + winDescentUPM
  5. Use Typo Metrics

For the rest, as already mentioned above, the span from typoAscender to typoDescender must add up to your UPM value (usually 1000). You could put the depth of the descender into typoDescender (e.g. −200), you put the rest (800) into typoAscender. In this strategy, the sum of the hhea and win ascender and descender will most likely be much more than 1000, or whatever your UPM is. Subtract your UPM value from that sum and put the result into typoLineGap.

With this strategy, the linegap tends towards the large end of the spectrum. So it may be a good idea to use this way if your font has a large x-height (above half UPM). Advantages: better synchronization of font display between Win and Mac apps; accents are not cut off in Mac apps because WinAscent tends to be higher than OS/2 TypoAscender. Disadvantage: differences between Mac apps and layout apps (XPress, InDesign).

The Webfont Strategy

Here, you set the winAscent and winDescent values first, because what is clipped and what not is most important on Windows machines because of clipping. Then, in Windows browsers, the bounding box (and thus, the relative vertical placement of the glyphs) is derived from the OS/2 values. But on the Mac and iOS, browsers will prefer the hhea values for the exact same thing. But for maximum compatibility with layout apps, you also need to sync the hhea values with the OS/2 values. That means that the relative distribution of ascenders and descenders must be the same, but still fit into the UPM. So, this is what we get:

  1. hheaAscender = UPM × winAscent ÷ ( winAscent + winDescent ) round this value
  2. hheaDescender = hheaAscenderUPM
  3. hheaLineGap = winAscent + winDescentUPM
  4. typoAscender = hheaAscender
  5. typoDescender = hheaDescender
  6. typoLineGap = hheaLineGap
  7. Use Typo Metrics

This is a good compromise between the two other strategies. The differences in vertical placement are not zero, but reasonably minimised between apps, operating systems, and especially browsers.

Careful: This method assumes that you have fairly regular measurements, i.e., that all important parts of your font more or less fit into your UPM, give or take a few units. Consider adapting your UPM if you still see a lot of cropping.

If the calculations lead to large line gap values (anything larger than a fifth of the UPM), consider reducing the line gaps and increasing the hhea and typo ascenders by the same value. This may lead to a situation where the typo metrics do not add up to the UPM anymore, but experience shows that fonts work well when this dogma (see further reading below) is broken. Do not forget to do extensive testing.

The Webfont Strategy, more general

In other words, points 1 and 3 in the Webfont Strategy calculation (where you derive the OS/2 and hhea values from the win values) may be ignored. Rather, set the OS/2 and hhea ascenders and descenders to something sensible instead: make sure they encompass caps with accents and the descenders fully. (Take into account that there is a remote chance of clipping at these values.) Do not worry if the sum of ascender and descender is more than 1000. Then set both line gap values to a sensible padding for a line of text: if you imagine a word on a button or in a box on a web page, half of the line gap amount will be padded above, and half below the (OS/2 and hhea) ascender and descender positions.

As a consequence, the win values are now completely independent of the hhea and OS/2 values. Simply set them to the vertical extremes in your font family. So what we get is this:

  1. hheaAscender = maximum height of important accented caps (e.g. É, Å, Ñ, etc., or the letters reaching high above the baseline you care most about)
  2. hheaDescender = descender including overshoot (the lowest point in j, g, p, q, y, or the letters reaching below the baseline you care most about)
  3. hheaLineGap = sensible padding between lines (e.g., third of cap height or half the x-height, consider less if your ascender and descender values are pretty large)
  4. typoAscender = hheaAscender
  5. typoDescender = hheaDescender
  6. typoLineGap = hheaLineGap
  7. winAscent = vertical maximum in your font family
  8. winDescent = vertical minimum in your font family (positive value)
  9. Use Typo Metrics

TT Zones

If you are exporting TTFs and still experience cut-offs in apps like Microsoft Word, especially with double accents (like the ones in Vietnamese or Pinyin), then try this: First make sure your winAscent and winDescent are properly set, e.g., they encompass the highest and lowest glyphs you want to keep from being cut off. And now, you need TT zones at winAscent and winDescent. These additional zones cause the renderer to include everything up to their position.

If you are manually TrueType hinting, you can add the winAscent and winDescent zones with the TTF Zones parameter in File > Font Info > Masters (Cmd-I).

If, however, you are relying on ttfautohint, there is an even easier way. All you need to do is go to File > Font Info > Instances > Custom Parameters enable the Windows Compatibility option in the TTFAutohint options parameter. Repeat that for every TTF instance, and you are done:

Recommended Further Reading

In his Vertical Metrics How-to post, John Hudson gives his own recommendations for optimising Vertical Metrics with special consideration for Microsoft Word. (Hint: The fsSelection bit he is talking about is the Use Typo Metrics parameter I explained above.)

Graham Wideman conducted a detailed analysis of vertical metrics behavior in various environments.

In recent discussions, the ‘UPM dogma’ (the spec requirement that typoAscender and typoDescender add up to the UPM) has been under fire, especially for complex non-Latin scripts. One of the proponents of letting go of the UPM dogma is Victor Gaultney from SIL, who wrote both Best Practice: Design Metrics and Best Practice: Line Metrics.

And there are two ways of visualising the vertical metrics: Jan Janeček’s Vertical Metrics Tool, and a Reporter plug-in for Glyphs called Show Vertical Metrics. You can find it in Window > Plugin Manager.

Whoa. And now, for a coffee break. Or some ice cream. Or both.

Update 2013-05-25: Updated to new parameter naming scheme, fixed a few wordings.
Update 2015-07-17: Corrected a mistake (typoDescender must be negative), removed Typophile link and reference for version 1.3, added Webfont Strategy.
Update 2016-12-02: Added section about TT Zones.
Update 2017-04-25: Added note, corrected typo in Webfont Strategy, added Further Reading.
Update 2017-11-30: Added note about Use Typo Metrics parameter.
Update 2018-07-04: Added link to John Hudson’s Vertical Metrics tutorial.
Update 2018-10-11: Changed outdated Wideman link to Wayback Machine.
Update 2019-05-16: Added more general variant of Webfont Strategy, made Use Typo Metrics more prominent.