Stop 03 · CSS3Topics · 7/17

Units

In short

px, %, rem, em, vh, ch. Picking the right unit is the difference between a layout that bends nicely on every screen and one that breaks the moment someone zooms.

CSS sizing units — px (absolute), %, em/rem (relative to font size), vw/vh (viewport) — each suited to different responsive scenarios. Choosing units well makes interfaces more resilient to different font settings, viewport sizes, accessibility preferences, and content lengths.

The jaadu mascot cooks, scooping rice with a small steel katori and adding a pinch of salt.

Think of it like this

Measuring in a home kitchen

Mummy says 'one katori rice' (relative to the katori) or 'a pinch of salt' (relative to the dish). Rarely '87 grams'. rem and em are like the katori: sizes relative to something else. px is the exact gram scale.

Watch it happen

Follow one user setting through rem and em

Setting

html

body 1rem

h1 2.5rem

btn em

1/5A user changes their browser's default text size to 20px.

The big ideas

What you need to know

px is fixed

Fine for borders and small details. For font sizes it ignores the reader's preferred text size.

rem follows the root

1rem equals the root (html) font size, usually 16px. If a user sets bigger text, everything in rem grows with it.

em follows the parent

1em is the current element's font size. Good for padding on buttons, but nested ems multiply quickly.

Viewport and ch

vw and vh are percentages of the screen. dvh fixes mobile address bar jumps. ch is roughly one character wide.

See it in code

Walk through the code

css

1html { font-size: 100%; }        /* respects user settings */2 3body { font-size: 1rem; }         /* usually 16px */4h1   { font-size: 2.5rem; }5 6.btn {7  font-size: 1rem;8  padding: 0.5em 1em;             /* grows if the font grows */9  border: 1px solid;              /* px is fine here */10}11 12.hero    { min-height: 100dvh; }   /* full screen, even on mobile */13.article { max-width: 65ch; }      /* comfy line length */

1/4100% means 'whatever the user's browser setting is', usually 16px.

rem for text, em for spacing that should scale with text, px for hairlines, and viewport units for full-screen sections.

Save yourself the pain

Common mistakes

Oops

Setting html { font-size: 10px; } to make rem maths easy.

Do this instead

That overrides users who need bigger text. Keep 100% and get used to 1rem = 16px.

Oops

Using 100vh for a mobile hero and getting a jumpy bottom edge.

Do this instead

Use 100dvh, which adjusts as the mobile address bar shows and hides.

Your mission

The zoom test

~15 min

Quick check

A user sets their browser's default text size to 20px. Which font-size grows with that setting?

Go deeper

1Rebuild a component using `rem` instead of `px` for scalable typography. Validate your understanding by applying it in a small practical example.
2Learn the difference between `em` (relative to parent) and `rem` (relative to root). Focus on understanding the underlying reason it works, not only memorizing the definition.
3Try `vw`/`vh` for full-viewport hero sections.