Font Sizes–Comparison EM vs PX vs PT vs Percent

Four different units by which you can measure the size of text...

- April 20, 2015

Rest of the Story:

In CSS, you're given four different units by which you can measure the size of text as it’s displayed in the web browser.  Which of these four units is best suited for the web?
What do we have…

“Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.

Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.

Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.

Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

Tip….it can be easy to set the font size via px’s or pt’s however you are not helping those users that want to scale the size up or down.  For this reason the em and percent users are preferred for web document text

Tip…try setting the body { font-size: 62.5%} and then use th em unit to size it from there.  As long as the body is set using the percent unit, you may choose to use either percent or ems on any other css rules and selectors and still retain the benefits of using percent as your base font size.

Tip..try not to use px to set font-size as they can become problems on mobile devices where the resolutions are very high density (200 to 300 pixels per inch) making the fonts very small.