CSS font-size Property Units

Notebook // March 2013

I'm sure you've noticed the many font-size units that are out there being used on the web. There seems to be an endless debate as to which unit is "the best," especially between pixels and ems. My take on it depends on what type of project you're working on and what goals and requirements you have. Let's dive in and take a look at the different font-size property units.

Property Units

To make things easy, the units are split into relative and absolute groupings.

Relative font sizes:

  • font-size: px – pixels
  • font-size: em – measures width of a font
  • font-size: % – percentage
  • font-size: ex – x-height of a font

Relative fonts can be resized by the browser and are recommended for screen use (computers, tablets, mobile, etc.).

Absolute font sizes:

  • font-size: in – inches
  • font-size: cm – centimeters
  • font-size: mm – millimeters
  • font-size: pt – point
  • font-size: pc – picas
  • font-size: xx-small, x-small, small, medium, large, x-large, xx-large

Absolute fonts render inconsistently across platforms and can't be resized by browsers or other devices. The only reason you may want to use any of these units is for printer friendly stylesheets. Other than that, it's not recommended to use these for screen use.

In addition to the font sizes above, CSS3 has introduced a few more:

  • font-size: rem – root em
  • font-size: vw – 1/100th of the window's width
  • font-size: vh – 1/100th of the widow's height

Recommend Uses

Here's what the W3C recommends for screen and print font sizes:

Screen

  • Recommended: em, px, %
  • Occasional use: ex
  • Not recommended: pt, cm, mm, in, pc

Print

  • Recommended: em, cm, mm, in, pt, pc, %
  • Occasional use: px, ex
  • Not recommended: N/A

Join the Conversation