Illustration of blue tailor's meter

CSS measurements: the normal, the strange, the obscure. Part 1

Published on 2017-08-08 09:00

A lot of digital pages were destroyed with digital ink by developers writing about the measurements in CSS. So let's waste some more because I can and it is probably time to refresh my memory. Did you know that kHz and Hz are valid units?

The Normal

Let's start with those that are pretty standard. Pixel, px, according to the standard is an absolute unit which is exactly 1/96th of 1 inch. Unfortunately a pixel is not a pixel is not a pixel because devices have physical and logical pixels and those can and do differ. But you can be more or less sure that on two displays with the same resolution it'll look the same but it can be smaller or bigger depending on the display's pixel density.

Points and picas, pt and pc, are legacy units from print typography and are defined as 1/72th and 1/6th of 1 inch. Because I don't use them regularly in my work I wouldn't recommend to use them for screen purposes. But I can recommend them for stylesheets for print.

Inch, centimeter and millimeter, in, cm, mm, are physical measurements. Because displays have different pixel densities I wouldn't use them there but I have successfully used millimeters for printed documents. You have to keep in mind that European and American A4 are two different formats.

Percentage, %, is a relative unit and it is based on parent element. For example if child element has width set to 20% it'll occupy 20% of the width of its parent element. It still has its purposes even in times of grids and fractions. It can be used for widths, heights and even font sizes. But only future and us, developers, will decide how common this unit will be.

The strange

em and rem are based on a font size of a different element than itself. em is based on parent element but rem or root em is based on the root element. So for example if root element's font-size is 10px and we want font size for current element to be 20px then the calculation is:
font-size = current element / root element = 20px / 10px = 2rem
Next in the strange category are newer[1. I have met them in last couple of years] units. And they are my favorites so far, viewport units: vw and vh work like percentages but instead of parent element they are based on viewport.

[codepen_embed height="265" theme_id="0" slug_hash="QMpEwj" default_tab="css,result" user="xgebi"]See the Pen <a href=''>Viewport height</a> by Sarah (<a href=''>@xgebi</a>) on <a href=''>CodePen</a>.[/codepen_embed]

The div in the example above fills the whole screen with color coral because it automatically fills full width due to its display set to block by default and height is set to 100 percentage points of viewport's height. This differentiates it from normal percentages which fill certain percentage of parent element.

Fractions or fr is a fairly new unit[2. At least I learned about it with CSS Grids]. They are easy to use, in template for a grid row you can use it either with other fractions or with combination with other units:

grid-template-columns: 1fr 2fr 1fr;
grid-template-columns: 100px 1fr;
grid-template-columns: 100px 1fr 10%;
The browser will calculate how big the fraction is supposed to be.

In part 2 I'll write about degrees, frequency, time and couple other units.