Font Size With Em or Percentages

With so many screen sizes available, it is important for text to resize proportionally. The use of relative font sizes will give users a consistent experience regardless of device.

Pixel is a static measurement. Percent and EM are relative measurements with the actual size being dependent on the parent; usually the html or body element. Once the default size has been defined all other text (p, h1, blockquote, etc.) is relational.

The FACTS

  • em is a font measurement used on the web with styles
  • em is the height of the font
    (not to be confused with the width of the letter “M” used in printing presses)
  • em sizes are relative to the parent.
  • Less code, font sizes are relative
  • Eliminate pinching and zooming on mobile devices

How To Use em Font Size

For most browsers, the default font size is 16px. Based on the default, 1em equals 16 pixels.

h1 {
font-size: 2em; (32 pixels)
}

blockquote {
font-size: .75em; (12 pixels)
}

With the parent relationship, making a change to the html font-size will change all sizes. For example:

html {
font-size: 1.375em;
}
The default is now 22 pixels and the h1 would be relatively larger.

pixel to em
10px – 0.63em
11px – 0.689em
12px – 0.750em
13px – 0.814em
14px – 0.875em
15px – 0.938em
16px – 1em
17px – 1.064em
18px – 1.125em
19px – 188em
20px – 1.250em
21px – 1.313em
22px – 1.375em
23px – 1.438em
24px – 1.500em
25px – 1.563em
26px – 0.625em
27px – 1.688em
28px – 1.750em
29px – 1.813em
30px – 1.75em
32px – 2em
48px – 3em
More: Pixels to Em

It is common to see the default font size set in the body or the html element. Keep in mind the inheritance and remember a child object gets characteristics from the parent.

What About REM?

REM (“root em”) is the font size of the root element. Treat it as a reset option and use it minimally since child objects should inherit from parents.

Design For the User

Many web users will set a default font size that is comfortable to read. Designers should respect the choice and use relative font sizes to effectively show hierarchy and the flow of information.

Letter B artwork by Bell.