Font Size, Weight and Line Height
Readable typography depends on more than font size. Weight, line height, letter spacing, measure, contrast, and responsive scaling all affect readability.
Unitless line heights are often useful because the value scales naturally with the inherited font size.
Typography Metrics
Readable Typography
.article {
font-size: 1rem;
line-height: 1.7;
letter-spacing: 0.01em;
max-inline-size: 70ch;
}
.article h1 {
font-size: clamp(2rem, 5vw, 4rem);
line-height: 1.05;
}💡 The
ch unit can constrain reading width and clamp() creates responsive typography.Key Takeaways
- Line height has a major impact on readability.
clamp()is useful for fluid typography.chcan help constrain text measure.
Knowledge Check
Why can a unitless `line-height` be useful?