Choosing units affects accessibility and layout flexibility.
Direct answer
Use rem for font sizes and spacing, % or fr for flexible widths, vw and vh for viewport-based sizes and px for fine details like borders. rem respects the user's browser font setting, which helps accessibility.
Comparison
| Unit | Relative to | Good for |
|---|---|---|
px | fixed | borders, shadows |
em | current font size | component spacing |
rem | root font size | fonts, spacing |
% | parent | widths |
vw / vh | viewport | hero sections |
ch | width of "0" | text width |
Example
html { font-size: 100%; } /* usually 16px */
body { font-size: 1rem; }
h1 { font-size: 2rem; }
.card { padding: 1.5rem; max-width: 60ch; }
Where Teyro fits
Teyro's HTML & CSS for Beginners course turns this into short lessons you can play in a few minutes a day. It has 100 lessons, and you can start free.
The bottom line
Default to rem. Use px sparingly.
