Meaning of Font Size and Em Height

By Xah Lee. Date: . Last updated: .
font size em height
The blue box is the font size, also known as em height. The actual height of letter M, is different depending on font. 〔font_size_em_height.svg 〕

What Does Font Size Mean Exactly?

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

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

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

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

Different font with same size may actually be quite different in perceived size or bounding box size, because there's no standard ratio of x-height of a font to its em height.

typography line terms
typography line terms

Font Topic

  1. Meaning of Font Size and Em Height
  2. CSS: What font-size is xx-large, x-large, small?
  3. CSS: Font Weight, Bold
  4. Standard Web Fonts
  5. Google Webfont Tutorial
  6. CSS: Text Decoration: Underline, Overline, Line-Through
  7. CSS: Text Shadow
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 Basics
  4. JS in Depth
  5. JS Reference
  6. DOM
  7. SVG
  8. JS Misc
  9. Web Dev Blog