The font-size property sets how large text appears. It is essential for readable body copy, clear headings, and a visual hierarchy across your site.
Fixed pixels.
Root relative.
Parent relative.
small, large.
Headings vs body.
clamp(), vw.
The font-size property in CSS is used to set the size of the font for an element's text content. It is a crucial property for controlling the visual appearance and readability of text on web pages.
By adjusting the font size, you can create a hierarchy of text elements, making your content more accessible and visually appealing. Set a comfortable base size on body or html, then scale headings and UI labels relative to that base.
Many sites use html { font-size: 100%; } (16px default) and body { font-size: 1rem; } for body text. Headings might use 1.5rem, 2rem, or larger.
The syntax for the font-size property is simple. You can specify the font size using various units:
element {
font-size: value;
}Here, value can be specified in different units such as pixels (px), em, rem, percentages (%), points (pt), and others.
p {
font-size: 20px;
}The default value of the font-size property is medium, which typically translates to 16px in most browsers.
clamp().em is relative to the element's own font size (or inherited size).rem is relative to the root (html) font size.| Question | Answer |
|---|---|
| Initial value | medium (usually 16px) |
| Applies to | All elements |
| Inherited | Yes |
| Common body size | 1rem or 16px |
| Responsive pattern | clamp(min, preferred, max) |
| Keyword | Description |
|---|---|
xx-small – xx-large | Absolute-size keywords on a browser scale from extra small to extra large |
medium | Default size, typically 16px |
larger / smaller | One step larger or smaller than the inherited size |
px (pixels), pt (points), cm, mm, and in (inches) set fixed physical or pixel-based sizes.
| Unit | Relative to | Common use |
|---|---|---|
rem | Root font size | Body text, headings, site-wide scale |
em | Parent or element font size | Nested components, buttons inside cards |
% | Parent font size | Scaling relative to parent text |
vw / vh | Viewport width / height | Fluid display headings |
The same sentence at three different font sizes:
In this example, we set the font size of a paragraph to 20 pixels — plus rem-based typography, em nesting, and responsive clamp sizing.
Start with the reference example — a paragraph at 20 pixels.
Set paragraph text to a fixed 20px size.
<style>
p {
font-size: 20px;
}
</style>
<p>This paragraph has a font size of 20 pixels.</p>Pixels give a fixed size regardless of parent settings. The text always renders at 20px unless the user zooms the page.
Build a simple type scale relative to the root font size.
body { font-size: 1rem; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
small { font-size: 0.875rem; }Changing the root size scales every rem-based value consistently across the page.
Use em for nested scaling and clamp for fluid headings.
Size a button relative to its card's font size using em.
.card { font-size: 18px; }
.card button { font-size: 0.875em; }0.875em means 87.5% of the card's 18px, so the button renders at about 15.75px.
Let a hero heading grow with the viewport but stay within min and max bounds.
.hero-title {
font-size: clamp(1.75rem, 4vw, 3rem);
}clamp() picks the middle value when it falls between the minimum (1.75rem) and maximum (3rem), giving fluid but bounded typography.
font-size WorksChoose px, rem, em, %, keywords, or a function like clamp().
Relative units are converted to an absolute pixel size for rendering based on root or parent values.
Glyphs scale accordingly. Inherited children use the computed size unless overridden.
Headings, body copy, and labels each appear at an appropriate readable size.
The font-size property is supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is one of the fundamental CSS properties with wide-ranging support across platforms and devices.
All units and keywords work in every browser, including legacy environments.
Bottom line: font-size is universal. Choose units thoughtfully for accessibility and responsive design.
The font-size property is essential for web developers to control the size of text on their websites. By using this property, you can enhance the readability and visual hierarchy of your content, making it more accessible and engaging for users.
Experiment with different units and values to find the right balance for your design. For most projects, start with rem-based body text and scale headings from there.
1rem for body text in most layoutsclamp() for fluid hero headingshtml or bodyfont-sizeUse these points when sizing text on your site.
Core typography.
Purposemedium keyword.
DefaultRoot relative.
Best practiceHeadings vs body.
LayoutChildren inherit.
CascadeOpen the HTML editor, change font-size values in px, rem, and clamp(), and see how text scales.
5 people found this page helpful