font-size
The font-size property sets the size of text.
Syntax
font-size: <length|%|rem|clamp()>;
Examples
:root { font-size: 100%; }
h1 { font-size: clamp(1.75rem, 1rem + 3vw, 3rem); }
body { font-size: 1rem; }
Output
Renders a heading that scales fluidly with the viewport between 1.75rem and 3rem.
Notes
Prefer rem for accessibility so user font preferences scale text. clamp() enables fluid typography without media queries. em is relative to the parent's font-size.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 1.0 |
| firefox | 1.0 |
| safari | 1.0 |
| edge | 12 |