The em square.

Let’s clear a couple of things up first:

  • The em is not something invented by W3C for CSS.
  • The em is not a square the size of the letter M. If you don’t believe that then just create a web page with an outlined box of width and height 1 em, and put a ’M‘ in it.

The em is a fundamental property of TrueType fonts so what better place to start than the TrueType Reference Manual.

Font glyphs are designed in relation to a square grid. Each small square in the grid is called a Font Unit, or FUnit for short. For most fonts the grid is ‘standardized’ at 2048 × 2048 FUnits to form the em-square. The em square shrinks or expands with changes in font size but it’s the small squares in the em square that change size while keeping the actual number of small squares unchanged. The real nugget of information is that both the vertical and horizontal size of the em square equate to the font size. One em is the font size of a TrueType font irrespective of whether it’s specified in points or pixels.

The TrueType Manual doesn’t put it as explicitly as that but gives an implicit definition via an equation used for calculating font size in pixels. This equation (Eqn. 1) is in the Manual section “Converting FUnits to pixels” and I’m using it because we can get two things from it:

  • Definition of the em
  • How font size in points, or inches, is transformed to font size in pixels. If you don’t like a lot of equations then jump to the short version
Eqn.1
pixels = pointSize × resolution/(72 points per inch × units_per_em)

In Eqn. 1

"pixels" is font size in pixels.

"pointSize" is font size in points.

"resolution" is screen dpi.

"72 points per inch" because a point is 1/72 of an inch.

"units_per_em" is the ratio of the vertical size of a glyph in FUnits to the number of vertical FUnits in the em square. There are (usually) 2048 vertical FUnits in the em square.

Now the meaning of this doesn’t exactly leap out the page so I’ll rearrange the equation, and define the terms in the sidebar.

Eqn.2
                      font size in points   glyph size in FUnits
pixels = screen dpi × ------------------- × --------------------
                      72 points per inch         2048 FUnits

The last two terms in Equation 2 say that the font size in inches is multiplied by the units_per_em ratio. The units_per_em_ratio is the ratio of the vertical size of a glyph to the vertical size of the em square. If the glyph size is the same size as the em square, i.e. 2048 FUnits, then the units_per_em ratio is unity and the font size would be multiplied by unity. Multiplying the font size by unity just gives, of course, the font size so the vertical size of the em square corresponds to the font size.

Let’s rearrange Equation 2, but this time with a units_per_em ratio of unity.

Eqn.3
                      font size in points
font size in pixels = ------------------- × screen dpi
                      72 points per inch

This tells us that we get font size in pixels by multiplying font size in inches by the screen dpi. It’s as simple as that.

I’ve shown here how font size in inches is translated into font size in pixels, but screen dpi is not specific to font inches.

Screen dpi is used to translate inches into screen pixels irrespective of whether we are dealing with font inches or just length measurements

I discuss screen length measurements in Screen Inches.