Skip to Main Content

Units and measurements

We use standardized units and measurements to create a vertical rhythm for stacked elements such as fonts, padding, margins and line height.

Unit standards

In stylesheets the standard unit of measurements should be:

  • EMs (EMs measure dimensions relative to type size) or percentage.
  • REM with PX fallback (REM is an evolution of EM). REM is the size of type as computed relative to the type size of the top level HTML element, rather than a parent element.

The default font size for browsers is normally 16px, which is set on theelement. As a standard, increments of 0.25em (or 4px equivalent) are added or removed from the base 1em. This provides a linear scale for both designers and developers to work with.

Default considered as a 96dpi viewport with :root {font-size:16px}
Point Pixel Em / rem Percent Roboto Font
6pt 8px 0.5em 50% Sample
6.75pt 9px 0.5625em 56.25% Sample
7pt 9.333px 0.5833em 58.333% Sample
7.5pt 10px 0.625em 62.5% Sample
8pt 10.667px 0.6667em 66.667% Sample
8.25pt 11px 0.6875em 68.75% Sample
9pt 12px 0.75em 75% Sample
9.75pt 13px 0.8125em 81.25% Sample
10pt 13.333px 0.8333em 83.333% Sample
10.5pt 14px 0.875em 87.5% Sample
11pt 14.667px 0.9167em 91.667% Sample
11.25pt 15px 0.9375em 93.75% Sample
12pt 16px 1em 100% Sample
12.75pt 17px 1.0625em 106.25% Sample
13pt 17.333px 1.0833em 108.333% Sample
13.5pt 18px 1.125em 112.5% Sample
14pt 18.667px 1.1667em 116.667% Sample
14.25pt 19px 1.1875em 118.75% Sample
15pt 20px 1.25em 125% Sample
15.75pt 21px 1.3125em 131.25% Sample
16pt 21.333px 1.3333em 133.333% Sample
16.5pt 22px 1.375em 137.5% Sample
17pt 22.667px 1.4167em 141.667% Sample
17.25pt 23px 1.4375em 143.75% Sample
18pt 24px 1.5em 150% Sample
18.75pt 25px 1.5625em 156.25% Sample
19pt 25.333px 1.5833em 158.333% Sample
19.5pt 26px 1.625em 162.5% Sample
20pt 26.667px 1.6667em 166.667% Sample
20.25pt 27px 1.6875em 168.75% Sample
21pt 28px 1.75em 175% Sample
21.75pt 29px 1.8125em 181.25% Sample
22pt 29.333px 1.8333em 183.333% Sample
22.5pt 30px 1.875em 187.5% Sample
23pt 30.667px 1.9167em 191.667% Sample
23.25pt 31px 1.9375em 193.75% Sample
24pt 32px 2em 200% Sample
24.75pt 33px 2.0625em 206.25% Sample
25pt 33.333px 2.0833em 208.333% Sample
25.5pt 34px 2.125em 212.5% Sample
26pt 34.667px 2.1667em 216.667% Sample
26.25pt 35px 2.1875em 218.75% Sample
27pt 36px 2.25em 225% Sample
27.75pt 37px 2.3125em 231.25% Sample
28pt 37.333px 2.3333em 233.333% Sample
28.5pt 38px 2.375em 237.5% Sample
29pt 38.667px 2.4167em 241.667% Sample
29.25pt 39px 2.4375em 243.75% Sample
30pt 40px 2.5em 250% Sample
30.75pt 41px 2.5625em 256.25% Sample
31pt 41.333px 2.5833em 258.333% Sample
31.5pt 42px 2.625em 262.5% Sample
32pt 42.667px 2.6667em 266.667% Sample
32.25pt 43px 2.6875em 268.75% Sample
33pt 44px 2.75em 275% Sample
33.75pt 45px 2.8125em 281.25% Sample
34pt 45.333px 2.8333em 283.333% Sample
34.5pt 46px 2.875em 287.5% Sample
35pt 46.667px 2.9167em 291.667% Sample
35.25pt 47px 2.9375em 293.75% Sample
36pt 48px 3em 300% Sample

EMs and percentage

EMs and percentage are relative units which are calculated based on the value of their parent element. This is a very versatile measurement unit, as it helps in creating scalable and dynamic layouts. With the default font size set to 100% (equivalent to 16px), if the <body> element is set to 125% or 1.25em, then the text inside will have an equivalent size of 20px. If a <div> contained in the <body> is set to 200% or 2em, the text equivalent is 40px, or double the size of its parent.

Size and position

Relative units can be applied to any CSS property that uses measurements; this includes (but is not limited to) width, height, line-height, top, left, bottom, right, padding, margin, etc. By using relative units throughout, a fully scalable and versatile document can be created, all controlled through font-size.

What about REM?

REMs are a new unit of measurement introduced with CSS3. They are very similar to EMs; however, they only follow the root element (the font-size of the <html>) and not the parent element. While this is easier to maintain compared to the cascading nature of EMs, this unit is not supported in older browsers, and should be either preceded by the PX equivalent, or attached in browser specific CSS to be fully supported.