Categories
Typography Web development

Understanding font size

What does it mean to specify font-size to be, say, 16px? Exactly what part of the font is 16px?

Let’s zoom in a bit by choosing a bigger font size to get a closer view on the font’s anatomy. Set line-height to 1, so the line height matches the font size, and choose a background color to make text lines visible.

CSS

Well, font size is roughly the vertical space available for each character (the height of the black box) but only a fraction of this space is normally used.

Times New Roman (200px high)

In the case of the example font, Times New Roman, I measured the cap height and the x-height to be 67% resp. 45% of the specified font size.

For these and other typographical terms, see the following image or the article on Wikipedia where this image comes from.

Other typefaces will likely have different heights. A type designer can do whatever he pleases, even use the space outside the box, as seen for example for the character j.