font-size
Sets the font size.
- Initial value
medium- Inherited
- Yes
- Animatable
- yes, as a length
- Applies to
- all elements
- JavaScript
element.style.fontSize = "1.25rem"
Example
#html { font-size: 100%; }
h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); }
p { font-size: 1rem; }
small { font-size: 0.875rem; }<h1 style="font-size: clamp(1.75rem, 5vw, 2.5rem); margin: 0">CSS course</h1>
<p style="font-size: 1rem; margin: 6px 0">Body text is 1rem.</p>
<small style="font-size: 0.875rem; color: #a3a3a3;">A small note is 0.875rem.</small>Definition and usage
#The font-size property sets the size of the text. The most common units are rem, em, px, and percentages. 1rem is the font size of the html element (usually 16px), and 1em is the font size of the parent.
The rem unit is predictable, because it always refers to the same value. em can be tricky: sizes multiply when nested. On the other hand, em works great for spacing inside a component that should grow together with its text.
The clamp(min, preferred, max) function lets you build fluid typography: the size grows with the screen width, but never drops below the minimum or exceeds the maximum.
Syntax
#font-size: <length> | <percentage> | small | medium | large | larger | smaller | …;Values
#<length>
A size in pixels.<length>
One and a half times the font size of thehtmlelement.<percentage>
One and a half times the parent’s font size.- One step larger than the parent.
clamp()
A fluid size based on the window width, bounded between 1 and 2rem.
Values in practice
#14px
.demo { font-size: 14px; }1.5rem
html element..demo { font-size: 1.5rem; }150%
.demo { font-size: 150%; }larger
.demo { font-size: larger; }clamp(1rem, 5vw, 2rem)
.demo { font-size: clamp(1rem, 5vw, 2rem); }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Do not set the
htmlsize in pixels.font-size: 100%respects a user who has increased the font size in their browser. - On phones, form fields with a font smaller than 16px cause Safari on iPhone to zoom in on the page.
Related entries
#- fontShorthand that sets font style, weight, size, line height, and family all at once.
- line-heightSets the height of each line of text, the space between lines.
- font-familyPicks a font, with a list of fallback fonts in case the first one is unavailable.
- font-weightSets the font weight, from thin to extra bold.
Spotted a mistake or missing an example? Write to us.