Meaning of Font Size

By Xah Lee. Date: . Last updated: .

What Does Font Size Mean Exactly? Let's say you use CSS to specify

font-size:16px

Ok, it's 16 pixels. But what does it mean exactly? is it height of M? or width of M? Neither!

font size em height
Font size design box.

The CSS font size of a font is a imaginary design box around the font that includes space for ascender and descender plus a little padding. This imaginary design box has the misleading name “em height”.

“em height” is not the bounding box. (typography does not have the concept of “bounding box”.)

typography line terms
typography line terms

The actual height of letter M, differs depending on the font used.

Some character, such as Ü , may extend beyond this design box.

Actual Letter Height

Different font with same CSS size spec may have very different size, because the ratio of CAPS height to “font size” is not standardized.

For example, compare:

Bye Bye

Typically, serif font are smaller.

JS in Depth
XAH  BUY NOW

CSS

Basics

Color

Font

Text Decoration

Box Model

Box Decoration

Layout

Transform/Animation

Line Wrap

Misc