Difference Between em, px, pt and % in Font Sizes

CSS has four different unit sizes you can use for your margins, borders, fonts, etc. These are pixels (px), points (pt), ems (em) and percentages (%). On this post we will see how they affect font sizes.

We can separate these units in two different groups, fixed and relative. Pixels (px) and points (pt) are fixed, whereas em and percents(%) are relative unit sizes. Relative unit sizes are really powerful when creating scalable layouts. Fixed size units are good to use when you always want the same element size no matter where you place it.

You can see here that 1em = 16px = 12pt = 100% if the body font-size is 100%. If you change the body font-size you can see the difference in the font sizes. Relative unit sized fonts change and fixed unit sized fonts remain the same.

There’s no better way to explain this than having visuals:

Font-size differences

View this page live here.

Here you can see that the relative font sizes are relative to the parent div. The first div is set to have font size of 50%. The relative unit sized fonts will automatically update their sizes based on that. Fixed unit sized fonts will remain the same size no matter what. You can see that regardless of the parent font size percentage (50%, 100% or 200%) the fixed sized unit fonts (px and pt) are always the same, whereas the relative unit sized fonts (em, %) are smaller or bigger.

Fun fact (em)

In traditional typography one em was equal to the width of the capital M in the typeface and size being used. This size will change depending on the typeface you use, that’s why it is a relative unit. On the web however, one em is equal to the height of the font. This allows the computer to safely use kerning to adjust the space between letters to improve readability.

Fun fact (pt)

Point values are only for print! A point is a unit of measurement used for real-life ink-on-paper typography. 72pts = one inch. One inch = one real-life inch like-on-a-ruler. Not an inch on a screen, which is totally arbitrary based on resolution. Point (pt) is not recommended to use in web pages since cross-browser results can be very different.

Fun fact (rem)

CSS3 introduces a few new units, including the rem unit, which stands for “root em”.  The rem unit is relative to the root—or the html—element.  It fixes the problem of sizing relative to the context encountered when using ems.

There are a lot more about font-sizes other than what I described above. For more on font sizes, I recommend this link http://css-tricks.com/css-font-size/

Posted on: March 16th, 2014 by Stephani

Leave a Reply