Bad Font Metrics Are Bad: Why Good Font Metrics Matter

CSS relies on accurate font metrics to generate correct layouts. Unfortunately, most fonts provide inaccurate font metrics. This page is a collection of where CSS uses, or would like to use, font metrics and why it sucks to have bad font metrics in your font.

List of Font Metrics Used by CSS

  • alphabetic baseline
  • ascent (insert OpenType label here)
  • descent (insert OpenType label here)
  • ex height (insert OpenType label here)
  • cap height (insert OpenType label here)

Font-relative Units

CSS has a variety of font-relative length units, which authors use to lay out content on their pages. Inaccurate font metrics mean layouts using these length units don't visually line up with the shapes of the letters they're meant to reference.

XXX Draw some examples of cap height and ex height stripes and things.

XXX Gaiji example using ic unit to maintain sizing relative to surrounding text.

Superscripts and Subscripts

Initial Letters and Drop Caps

Underlines and Overlines

ideas/bad-font-metrics.txt · Last modified: 2018/01/12 10:49 by fantasai
Recent changes RSS feed Valid XHTML 1.0 Valid CSS Driven by DokuWiki