em compounds, rem does not
Each em level multiplies by 1.2 again; each rem level stays at 1.2 × 16px.
Relative units measure against something else: em against the font size, rem against the root font size, % against a property-specific reference, and ch/ex against the font's own letters; choosing the right reference makes designs scale with the reader.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a type scale in rem for h1 (40px), h2 (28px), p (16px) and .caption (13px) at the default root size.
Make an .icon span sit next to text and always be the same height as that text, whatever the text size.
Make a paragraph never wider than 60 characters and center it on the page.
Explain it without notes
Explain the difference between em and rem, including what em refers to on font-size versus on padding.
Why are rem font sizes better for accessibility than px font sizes?
What does a percentage refer to for width, height, padding-top and font-size?
When would you choose em over rem on purpose?
Preview
Console
Nothing logged yet.Expected console output
em level 1 19.2px
em level 2 23.04px
em level 3 27.648px
rem level 1 19.2px
rem level 2 19.2px
rem level 3 19.2px