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, likemargin
orpadding
. 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 inrem
, 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 likeline-height: 2;
will lead to a line-height value, that is the double of the font-size.
% value
-
sizes - This design token includes
width
andheight
, and having pre-defined % values likewidth: 50%
orheight: 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!
Top comments (1)
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.