Units and Measurement

REMS

We use the relative units of rems when measuring attributes like margin, padding, and font size. This allows us to think in terms of relations and inheritance rather than singular element stylings, resulting in a less fragile design language.

Rems base their measurement on the root element of the doc (rather than an em, which is based on the parent element). We define the relationship with the root to determine the element’s size.

For example, if a root element is defined as 16px and a header text is defined as 1.5rem, then the header text will render at 24px.

Rems are supported across all of our approved browsers (we do not support IE8 or Opera Mini).