CSS Text & Fonts
The CSS Font Size property is used to control the size of text displayed on a webpage.
Adjusting font size helps improve:
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.
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.
| 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; |
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.
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>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.
px provides fixed sizing.rem is commonly recommended for modern responsive websites.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.