Command Palette

Search for a command to run...

Hectal
Phase 3: Values, Units and Colours
CSS · Exercise 2 of 5 PreviousNext
Beginner

A type scale in rem

Give the page a type scale that respects the reader's font-size setting. At the default root size of 16px, the .display heading should be 40px, the .lead paragraph 20px and the .fine print 14px.

Use rem for all three, so that if the root font size changes, every size changes in proportion.

What Check tests

  1. .display is 40px at the default size
  2. .lead is 20px at the default size
  3. .fine is 14px at the default size
  4. All three sizes grow when the root font size grows to 20px

Stuck? One hint at a time

The solution unlocks after your first Check. Try first: that is where the learning happens.

Runs in your browser. Your code is saved here.

Your page

Press Run to see the page.

Console

Nothing logged yet.