A Cheat Sheet for CSS units

This is an opinionated take on when to use each CSS unit, feel free and encouraged to disagree and make an argument on that, if that's the case.

TL;DR

REM

• font-size
• spacing
• border-radius

EM

• letter-spacing
• media-queries

PX

• border-width
• shadows

Other Units

• z-index (integer)
• line-height (integer)
• sizes (%)

CSS units

Have you ever wondered what CSS units to use on any specific case? If so, this cheat sheet will be definitely useful for you!

There are em, rem, px and many other units out there, and we always want to apply what's described as a "best practice". That's why I came up with this cheat sheet, this is something I look up for whenever I need to come up with a new theme or new design tokens.

Design tokens are all the values needed to construct and maintain a design system — spacing, color, typography, object styles, animation, etc. - by Adobe

REM

rem is a relative CSS unit that scales with the root element's font size. Meaning, that it uses the font-size that defined under the html tag to be calculated.

Why is this unit useful?

The main purpose of rem units, is related with its scaling with the document's font-size, meaning that if a user updates the font-size on the browser settings (yes, that's a thing), and if the typography is defined with rem units, everything will scale as it is meant to!

In which scenarios should I be using rem then?

You could think of this, as "whenever I want things to scale, based on the font-size". In the end, these are the design tokens where you should be using this unit:

• Font-size - So that font-size scales with the defined font-size settings by the user.

• Spacing - Inside this design token, lives all the CSS properties that add any sense of spacing between elements, like margin or padding. And for these, I find it useful to have it scaling with the root's font-size, so that the same visual and hierarchy effect is shown to the user.

• Border-radius - This unit makes most sense to be in rem because the "box" elements that have it defined, are usually wrapping content that is also defined in rem, making it then convenient to have this "rounded" effect scaling with font-size also.

EM

em is a relative CSS unit that scales with the parent element's font-size. Meaning that if an element has a font-size of 2em, it will be the double of it's parent.

Why is this unit useful?

em units are useful when you want to have something to scale depending on the currently defined font-size. Icons are good example of this, most times you will want your icons size to be relative to whatever is the font-size defined on the context they are placed.

In which scenarios should I be using em then?

There aren't many scenarios in which this unit is useful, it's mostly when you want properties to scale depending on the context's font-size.

• Letter-Spacing - letter-spacing as the name indicates, is correlated with the letters them selves, and as such it should scale with whatever is the defined font-size for this parent's element.

• Media Queries - For multiple reasons that I won't enter in detail, em is the most consistent unit when it comes to media queries and works pretty well across all browsers. You can read more about this topic in this thorough blog post.

PX

px has been the most commonly used CSS unit when it comes to web development. It is an absolute unit, and 1px represents 1/96th of 1 inche.

Why is this unit useful?

px units are useful when you want to have something to be static and not change depending on factor's like the defined font-size.

In which scenarios should I be using px then?

This unit is the clear winner when it comes "let's build this fast and not put much thinking into it". But in fact, there aren't that many useful scenarios in which you should be using this unit.

• Border-width - As far as borders goes, you usually just want them to add some kinda of emphasis or to separate contexts, so you really don't need them to scale depending on anything.

• Shadows - We usually use shadows to give a sense of elevation or to create some type of stacking, and that's another thing where we don't need things to scale.

Other units

For the particular use case of defining values for design tokens like z-index, line-heights or sizes, I tend to not use any of the units above, and use the following "miscellaneous" instead:

Integer number

• Z-index - For this CSS property, your only shot it so use an integer number, so there isn't much to say in that regard.
• Line-height - Line-height's value depends on the defined font-size to set it's value, similar to how the em unit works. But there is no need to specify any CSS unit, as specifying an integer number like line-height: 2; will lead to a line-height value, that is the double of the font-size.

% value

• sizes - This design token includes width and height, and having pre-defined % values like width: 50% or height: 75%, is usually what I tend to find the most useful.

Conclusion

In today's web development using px as a CSS unit for every other property isn't really a choice if you wanna makes thing right by your users.

Users should have the option to update their browser settings and still have a pretty good experience on your website, with that in mind, make sure you are using the appropriate CSS units for each property, and deliver an awesome experience!

Comments

[Ngoako Ramokgopa]

I never knew most of these units were mostly about scaling relative to font sizes. I enjoyed this, I'm definitely saving to reference when I need it.