Typography
font-family sets the typeface with fallbacks. Use rem for font-size to respect user preferences. line-height: 1.5 improves readability. clamp(1rem, 2.5vw, 1.5rem) creates a fluid font size that scales with viewport.
Typography body {
font-family: "Segoe UI", system-ui, sans-serif;
font-size: 16px;
line-height: 1.6;
font-weight: 400;
letter-spacing: 0.01em;
}
h1 {
font-size: clamp(1.8rem, 5vw, 3rem); /* responsive */
font-weight: 700;
text-transform: uppercase;
text-align: center;
}
Test your understanding before moving on
1. Which property controls font size?
A. text-size
B. font-size
C. font
D. size
💡 font-size sets the size of the text.
2. What does line-height control?
A. Letter spacing
B. Space between lines of text
C. Word spacing
D. Paragraph indent
💡 line-height controls the space between lines in a text block.
3. Which unit is relative to root font size?
A. em
B. %
C. rem
D. px
💡 rem (root em) is relative to the root <html> element's font size.
4. What does font-weight: 700 mean?
A. Light
B. Normal
C. Bold
D. Extra bold
💡 700 is bold. Weights range from 100 (thin) to 900 (extra bold).
5. What does clamp() do for font-size?
A. Rounds font size
B. Sets responsive size between min and max
C. Clamps color
D. Limits characters
💡 clamp(min, preferred, max) creates a responsive value that scales with the viewport.