font-size
The size of the font.
Syntax
font-size: value;Values
| Parameter | Type | Description |
|---|---|---|
| px | length | A size in pixels: `16px`. |
| rem | length | Relative to the page font size: `1.5rem`. |
| em | length | Relative to the parent's font size: `0.8em`. |
| clamp() | function | A fluid size within limits: `clamp(1rem, 4vw, 2rem)`. |
Examples
Sizes in pixels and rem (usually 1rem is 16 pixels):
<p style="font-size: 12px;">Small text</p>
<p style="font-size: 24px;">Large text</p>
<p style="font-size: 1.5rem;">1.5rem is 24 pixels</p>em is counted from the parent's font size:
<style>
.box { font-size: 20px; }
.box small { font-size: 0.7em; }
</style>
<p class="box">Price: $25 <small>incl. tax</small></p>Notes
Do not go below 16 pixels for body text: small type is hard to read on a phone. Sizes in rem follow the font size the user chose in browser settings, while px ignores it.
See also
- font — A shorthand that sets the style, weight, size, line height and family of the font in one line.
- line-height — The height of a line of text — the distance between lines.
- px, em, rem, %, vw, vh — Units for lengths in CSS: absolute pixels and relative units.
- clamp() — Keeps a value within limits: the preferred value, but not less than the minimum and not more than the maximum.
Related recipes
In the tutorial
- Text and fonts — Font family, size, weight, italics, line height, alignment and text decoration, plus loading your own font.