Units: Fonts

For some time I have been wondering about units in CSS. There are four, pixels, points, ems and rems. To complicate things there is a physical pixel and a reference pixel.

Short overview:

  1. pt
    • a point. It is better not to use it as it belongs to analog typography
  2. px
    • a pixel. This refers to a reference pixel on a certain device. Some front-end developers like it, some don’t.
  3. em
    • This unit refers to the width of letter ‘M’. Before rems this was the preferred way to use relative lengths. To calculate values browser uses inherited font-size value.
  4. rem
    • Relative em is the same as em except it uses root elements font-size.

When I read other people’s code/tutorials/posts there is a lot of times this line:

When I learned CSS the first time, a very long time ago, there wasn’t this line anywhere. As I can judge explanation this line is not explained in current learning sources[1][2][3].

The logic behind it: 10px = 62.5% * 16px. 16px is usually, at the moment, default settings for font-size in browsers. That line makes it easier to use em and rem because calculation humans are used to counting with tens. Sixteens are harder for most people.

In the end I will use mix of px and rem where I will consider it appropriate. em and pt are weird in my opinion and a bit unpredictable. Below is a small experiment with fonts:

JS Bin on jsbin.com