CSS Units: px, em, rem, %, vw, vh, ch and When to Use Each

Most CSS values need a unit: 16px, 1.5rem, 50%. Choosing the right unit makes layouts adapt to screen sizes and to users who increase their font size.

Absolute: px#

px (pixels) is a fixed size. A CSS pixel is not necessarily one physical screen pixel: on high-density screens, one CSS pixel may be drawn with two or three device pixels, so 16px text looks about the same size on every device.

px is fine for borders, shadows and small details. For font sizes, relative units are better, because they respect the user's preferred text size.

Relative to font size: em and rem#

.rem-box { font-size: 1.5rem; }    /* 1.5 × 16px = 24px */
.parent { font-size: 20px; }
.parent .em-box { font-size: 1.5em; } /* 1.5 × 20px = 30px */
.parent .rem-box2 { font-size: 1.5rem; } /* still 24px */

<p class="rem-box">1.5rem</p>
<div class="parent">
  <p class="em-box">1.5em inside a 20px parent</p>
  <p class="rem-box2">1.5rem inside the same parent</p>
</div>

• rem is predictable: the same everywhere on the page. Use it for font sizes and most spacing.
• em scales with the local font size, which is useful when spacing should grow with the text, such as button padding (padding: 0.5em 1em).
• em compounds when nested: a 1.2em inside a 1.2em inside a 1.2em grows each time. That is often a surprise.

If a user sets their browser's default text size to 20px, everything in rem scales with it. Text set in px does not respond to that setting (although page zoom still works).

Percentages#

% is relative to something in the parent, depending on the property. For width, it is the parent's width:

.track { background: #e5e7eb; }
.bar { background: #2f5fe0; color: white; padding: 4px; }

<div class="track"><div class="bar" style="width: 75%">75% of the parent</div></div>
<br>
<div class="track"><div class="bar" style="width: 30%">30%</div></div>

Careful: percentage padding and margin are relative to the parent's width, even for top and bottom.

Viewport units#

100vh on phones can be taller than the visible area, because it ignores the browser's address bar. For full-screen sections on mobile, min-height: 100dvh is usually what you want.

Characters: ch#

1ch is the width of the "0" character in the current font. It is handy for limiting line length, because lines of roughly 45 to 75 characters are the most comfortable to read:

.readable { max-width: 45ch; }

<p class="readable">This paragraph is limited to about forty-five characters per line, which makes long text easier to read than lines that stretch across a wide screen.</p>

Unitless values#

Some properties take plain numbers. The most important is line-height:

body { line-height: 1.5; }   /* 1.5 × the font size of each element */

A unitless line-height is recommended because children recalculate it from their own font size. line-height: 24px would be inherited as a fixed 24px, too tight for large headings.

0 never needs a unit: margin: 0.

Which unit when?#

Practice#

.card {
  width: 90%;
  max-width: 30rem;
  padding: 1.5rem;
  border: 1px solid #ccc;
}
.card h2 { font-size: 1.75rem; margin-top: 0; }
.card p { font-size: 1rem; line-height: 1.6; }

<div class="card">
  <h2>Weekend workshop</h2>
  <p>Build a portfolio website from scratch in two days, with a mentor for every five students.</p>
</div>

Key takeaway#