CSS font-size Property
The font-size property sets the size of the text font.
Description & Usage
The font-size property specifies the dimension of text characters.
Using rem units (relative to root font size) is best practice for accessibility, allowing text to scale properly when users adjust browser font settings.
Modern web design frequently utilizes CSS clamp() to create fluid responsive typography that scales dynamically between minimum and maximum bounds.
Property Specifications
| Property Feature | Specification |
|---|---|
| Category | Typography |
| Initial Value | medium (typically 16px) |
| Inherited | Yes (inherited from parent) |
| Applies To | All elements |
Syntax
font-size: 1rem | 16px | 1.25em | clamp(1rem, 2vw, 2.5rem);Property Values
| Value | Description |
|---|---|
| 1rem | Relative to root html font size (usually 16px). |
| 1.25em | Relative to parent element font size. |
Code Examples
Fluid Typography Heading
h1 {
font-size: clamp(1.75rem, 4vw, 3rem);
}
Scales heading smoothly between mobile and desktop viewports.