typography
font-size
Sets the size of rendered text. Modern designs use rem for accessibility and clamp() for fluid typography that scales with the viewport.
font-size: <length> | <percentage> | <absolute-size> | <relative-size> | clamp(...)Common values
| Value | Effect |
|---|---|
| 1rem | Root-relative size, respects user zoom |
| 16px | Fixed pixel size |
| 1.125em | Relative to parent's computed font size |
| clamp(1rem, 1vw + 1rem, 1.5rem) | Fluid size with a min and max |
| smaller | One step smaller than the parent |
Examples
html { font-size: 100%; }Respect user's default browser size
h1 { font-size: clamp(1.75rem, 3vw + 1rem, 3rem); }Fluid heading that scales with viewport
small { font-size: .875rem; }Slightly smaller supporting text
Gotcha
Using px prevents users from scaling text with browser zoom in some accessibility settings; prefer rem for body copy.
Related properties
font-family
Sets a prioritized list of typefaces to render text with. The browser walks the list until it finds one that is available, so always end with a generic fallback.
line-height
Sets the vertical distance between lines of text. Unitless values are preferred because they scale with the element's own font size.
font-weight
Sets the thickness of glyphs. Numeric weights from 100 to 900 map to Thin through Black; variable fonts accept any integer up to 1000.
text-align
Sets the horizontal alignment of inline content inside a block. start and end respect the writing direction, which is preferred for internationalized sites.
text-decoration
Shorthand for text-decoration-line, style, color, and thickness. Used to add or remove underlines, overlines, and strike-throughs on text.