Font-size property
Last updated: 2026-09-13
font-size Font-size property
The font-size CSS property sets the size of the text. It accepts absolute keywords, fixed lengths, or relative units such as em and rem, and is one of the most frequently used text styling properties.
| Category | |
|---|---|
| Initial Value | medium |
| Inherited | Yes |
| Applies To | all |
| Animation Type | font-weight |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
font-size: xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | <length> | <percentage>;⚙️ Values
| Value | Type | Description |
|---|---|---|
xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | Keyword | Absolute size keywords |
<length> | Type | A fixed font size, e.g. 16px |
<percentage> | Type | A percentage relative to the parent element's font size |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| font-size | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： Prefer relative units (em/rem) for font size so text scales with user settings and responsive layouts.
Warning： Avoid absolute keywords like xx-small or x-small; they render inconsistently across browsers.
❓ FAQ
QWhat is the difference between the px, em, and rem units in CSS?
Apx is a fixed pixel value that does not change with context; em is relative to the parent element's font size and compounds with nesting; rem is relative to the root element (html) and is unaffected by nesting. Use rem or clamp() for responsive layouts, em when you want scaling relative to a parent, and px for values like borders that should not scale with the font.
QWhat is the default font size that browsers use for web pages?
AThe default value is medium, which most browsers render as 16px. Setting html { font-size: 62.5% } makes 1rem equal to 10px, which simplifies calculations in multiples of ten, but note that it affects every element that uses rem, so use it with care.
QHow is a percentage value for font-size calculated relative to the parent?
AA percentage is resolved against the parent element's font-size: if the parent is 16px, font-size: 150% equals 24px. It scales proportionally with the parent, behaving like em, and suits emphasized text or lists that need to scale with their context.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
