Meaning of Font Size

By Xah Lee. Date: . Last updated: .

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.

What Does Font Size Mean Exactly?

The CSS font size of a font is the “em height”.

em height” is the height of a imaginary design box around the font that includes space for ascender and descender plus a little padding.

“em height” is not the bounding box. (“bounding box” is not a concept in typography.)

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.

Perceived Font Size

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

For example, compare:

font-size: 50px; font-family: sans-serif;

font-size: 50px; font-family: serif;

CSS Font

  1. font-family
  2. Standard Web Fonts
  3. Google Webfont
  4. font-size
  5. Meaning of Font Size
  6. Font Weight
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog