CSS - Units

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 12–15 minutes

Choose units that scale correctly across devices and user settings.

Learning Objectives

• Use rem for scalable typography and em for component-relative spacing.
• Leverage viewport units for responsive layouts.

Details & Examples

• Absolute: px
• Relative to font: em, rem, ch, ex
• Relative to container/page: %, vw, vh, vmin, vmax

h1 { font-size: clamp(1.5rem, 1rem + 2vw, 3rem); }
.card { padding: 1.25em; max-width: 60ch; }

Try it

Common Pitfalls

• Using em on nested elements multiplies sizes—prefer rem for stable typography.

Checks for Understanding

1. Which unit is best for limiting paragraph width to ~65 characters?

Exercises

1. Make a fluid heading using clamp() that scales between 1.5rem and 3rem.
2. Use ch to limit a paragraph to ~65 characters and compare readability.