Space Relative to the Document :root
Use: rem
Unless you change it, the default rem
value is 16px
with the advantage of responding to changes in zoom level.
Why and how to use rem
rem
will not change no matter how deeply it is nested, so for consistent spacing between/around elements, it is a reliable choice.
It is also the preferred measurement for font sizing.
Space Relative to the Viewport
Use: Viewport units
The viewport is the boundary of the browser window or device screen size.
Available viewport units
-
vh
: viewport height - based on the height of the viewport -
vw
: viewport width - based on the width of the viewport -
vmin
: viewport minimum - returns the smaller value ofvh
orvw
, updating responsively -
vmax
: viewport maximum - returns the larger value ofvh
orvw
, updating responsively
Viewport units are ideal for:
- keeping the element within the bounds of the visible area
- ensuring
<body>
,<main>
, or a splash header has a minimum height as tall as the viewport (min-height: 100vh
) - creating proportionate, responsive elements
- combining with
calc
to affect the visibility of multiple elements - creating full-height, full-width slideshows (particularly combined with
scroll-snap
)
This example is of a nearly full-height header that makes use of calc
to ensure a bit of space is left to hint at additional content:
Space Relative to the Element
Use: em
em
will stay proportionate to the element or nearest ancestor's font-size
rule. One em
is equal to the font-size, so by default, this is equal to 1rem
which is by default 16px
.
Compared to rem
, em
can compound from parent to child, causing adverse results. Consider the following example of a list where the font-size is set in em
and compounds for the nested lists:
When and how to use em
- between typography elements
- padding on textual components, ex. buttons or input fields
- for
letter-spacing
, typically as a micro value such as0.03
, can also be defined negatively
In the following codepen, you can change the $font-size
variable to see how it affects the label
and button
as a unit:
Spacing Relative to Content
Use: ch
, em
While em
can be appropriate for spacing based on content, an underdog that doesn't see much action is the ch
unit. This unit is equal to the width of the zero character in the set font-family.
When and how to use ch
Use to set width based on the optimal line-length (50-80 characters depending on the resource used). Start with 80ch
and optimize as needed based on the font in use, keeping it mind most fonts have a narrow 0
so the ch
will likely need to be larger than the line-length desired.
This is great for:
-
article
content - setting the
flex-basis
value, especially for the flexbox albatross technique - setting the "max" part of
minmax
for grid columns - providing a
min-width
on buttons or navigation items
Top comments (15)
I had no idea about the
ch
unit in CSS until I read this post. Thanks, Stephanie!Cool, glad to help!
Greatest day
Thanks for the article and the examples! Definitely a topic that could use the coverage.
The ch units took me a minute but I think I understand:
Can't tell you how many times this unit has been the savior for some content-heavy tight layouts. Assuming everything else is responsibly sized w/breakpoints (ie: your fonts get larger at certain BPs) you can generally simplify with
max-width: XXch
for content, rather than add multiple px widths at corresponding BPs.Almost! Itβs a little weird given the name but itβs the width of the 0 (zero) character π
Thank you, Stephanie, for a very useful article!
I just wanted to recommend to avoid using
min-height: 100vh
on mobile devices because of misconception, you can read more about it hereThanks for the callout! As with any technique, browser and device testing is recommended :) Looks like this issue has been updated a bit (10 days ago as of this comment) and a proposal for new units to address this issue is in progress: github.com/w3c/csswg-drafts/issues...
I'll be happy to update the article when those new units land, but a useful note for the current issue, thanks again!
Though beautifully explained.
Still I don't grasp the concept completely
Problem I face when using unit is
Font size for desktop view remain unchanged in mobile views( I have used rem as unit for font-size).
Div and Image remain unchanged in all views which creates mess in responsiveness(px as unit for height and width).
For letter-spacing and line-height I have used rem as unit, do I need to change to em?
Great article! Thanks Stephanie :)
Great Article
Great to see units at one time. Very good for reference.
Happy to hear it will help you!
This is a very good und useful listing for CSS Units and their use cases. Thank you for that!
Great write-up.. thank you!
Some comments may only be visible to logged-in visitors. Sign in to view all comments.