CSS Text & Fonts
CSS Font Size
The CSS Font Size property is used to control the size of text displayed on a webpage.
Adjusting font size helps improve:
- Readability
- Accessibility
- Visual hierarchy
- User experience
Different font sizes are often used to distinguish headings, subheadings, and body text. The supporting concepts are explained in CSS Units and Web Fonts & Typography.
Syntax
CSS Font Size Syntax
css
selector {
font-size: value;
}CSS Font Size Example
css
p {
font-size: 18px;
}This sets the paragraph text size to 18 pixels.
Attributes
| Value Type | Description | Example |
|---|---|---|
| px | Fixed size in pixels | font-size: 20px; |
| em | Relative to parent element | font-size: 1.5em; |
| rem | Relative to root element | font-size: 1.25rem; |
| % | Relative percentage | font-size: 120%; |
| keywords | Predefined sizes | font-size: large; |
Readable and scalable type
Body text should normally remain relative to the user's configured default size. Use rem for document-level scales and em when a component should scale from its own inherited size. Viewport units can contribute to fluid headings, but wrap them in clamp() so text never becomes too small on narrow screens or excessively large on wide ones.
Example
CSS Font Size Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>CSS Font Size Example</title>
<style>
h1 {
font-size: 36px;
}
h2 {
font-size: 2rem;
}
p {
font-size: 18px;
}
.small-text {
font-size: 14px;
}
</style>
</head>
<body>
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<p>This paragraph uses a font size of 18px.</p>
<p class="small-text">This paragraph uses a smaller font size.</p>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| font-size | 1 | 12 | 1 | 1 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
Notes
pxprovides fixed sizing.remis commonly recommended for modern responsive websites.- Avoid very small font sizes that reduce readability.
- Use a consistent font scale throughout your website.
- Larger font sizes help create visual hierarchy between headings and content.
Conclusion
The CSS Font Size property allows you to control how large or small text appears on a webpage. By choosing appropriate font sizes and units, you can improve readability, accessibility, and the overall design of your website.