Units Of Measurement inside a Font

Ems, UPMs, and pixels, etc., how do we define units of measurement inside of a font?

tldr:

  • An em is the entire design square of the font. Think of a old school, traditional printing press: the em is the size of one movable type, the entire square.
  • Each font defines units per em, this is the baseline of reference for how everything is sized inside a font.
  • Pixels don’t exist, nothing is visual inside this until it’s actually rendered by a text renderer which scales everrything based on what’s encoded in the font.

The Em

The em is a unit that represents the design square the glyphs are drawn within. This does indeed go back to old school traditional printing presses, in which an em was literally the width of the metal “M” block. This still applies to modern day digital fonts, although it doesn’t correspond to the letter “M” anymore, instead it’s abstract representation of the “full body size of the type”. The em is the unit that represents (theoretically) the largest possible footprint of one glyph or letter in the font.

As an abstract unit in a digital font, the em serves as the font’s coordinate system.

UPM - Units per Em

Now, the em is a big unit, it’s huge. 1 em = the size of the container. So, it’s not a good unit to define e.g., the x-height based on that. What would we do, define everything as a fraction of an em, e.g., x-height is 0.8 and the ascender height is 0.9? Less than ideal.

So, we instead define units per em (UPM). This is number of units in that square em — not width or height, but both (square). In (traditional) postscript fonts, this is 1000. In truetype and onward like opentype, this is typically 2048. Each number in this range/unit is a “font unit”. If the em is the size of the ruler, font units are ticks on that ruler.

So basically we define UPM as a number e.g., 1000, and everything else is defined in numbers relative to that (e.g., x-height = 800).

How do text renderers render this?

Crucially, it’s worth pointing out: the em is not the glyph height. As mentioned, one em is the size of the container. Most glyphs do not fill the container.

As an example (UPM = 1000):

  • ascender ≈ 750
  • descender ≈ −250
  • cap height ≈ 700
  • x-height ≈ 500

The em simply guarantees:

ascender − descender ≤ em

Where does the em and UPM get defined in the font?

The em exists once per font. It is global. Every glyph’s outline is drawn inside that coordinate space. 0 is usually the baseline, positive Y goes up, negative Y goes down.

BUT, we don’t actually capture the em in the font file. Only the UPM. The em is implicit.

We define the UPM once per font, which is encoded explicitly as a single integer value in the font file’s head table as unitsPerEm.

So, a text renderer reads the units per em from the font file, then knows how big everything else in the font should be.

What it does:

  1. Read unitsPerEm
  2. Read glyph coordinates + metrics (in font units)
  3. Scale by:
scale = requested_size / unitsPerEm
  1. Convert to device pixels (with hinting, snapping, etc.)

All metrics (advance width, bearings, kerning) are interpreted through upm, and everything is meaningless without it.

end of storey Last modified: