The font-size property sets how large text is drawn. Changing it also updates font-relative lengths such as em and ex on that element.
You can use absolute keywords (medium, large), relative keywords (larger, smaller), lengths (1rem, 16px), or percentages. The property is inherited. Pair it with font-family and line-height for readable type.
Not deprecated and not experimental. Prefer relative sizes such as rem when you want text to respect user font preferences.
font-size: <absolute-size> | <relative-size> | <length-percentage> | initial | inherit;The initial value is medium. Length and percentage values must be non-negative.
| Value | Description | Try it |
|---|---|---|
<length> (rem) | Size relative to the root html font size | Try it |
<length> (px) | Fixed pixel size | Try it |
large (keyword) | Absolute-size keyword based on the user default (medium) | Try it |
<percentage> | Percent of the parent element’s font size | Try it |
em | Multiplier of the parent’s font size (can compound when nested) | Try it |
inherit | Uses the parent’s font-size | Try it |
font-sizePick a unit that matches your goal, then apply it on the element that should change size.
rem), follow the parent (em / %), or use a fixed pixel size.font-size on the element (or on html / body for a page-wide base).em and % multiply through parents; rem does not.| Piece | Required? | Role |
|---|---|---|
| A size value | Yes | Keyword, length, or percentage |
| Text content | Yes | Something visible to size |
| Root / parent size | For rem / em | Reference for relative units |
line-height | Recommended | Keeps multi-line text readable at the new size |
Change only font-size on the sample sentence. Everything else stays the same.
Each snippet focuses on font-size. Use Try It Yourself for a live editor.
remRoot-relative size that stays predictable when nested.
<style>
p {
font-size: 1.25rem;
}
</style>
<p>Text sized with rem.</p>1.25rem means 1.25 × the html font size (often 16px → 20px).rem do not multiply against this paragraph.Keywords sit on a scale based on the user’s default medium size.
<style>
p {
font-size: large;
}
</style>
<p>Text sized with the large keyword.</p>large is an absolute-size keyword, not a pixel count.medium size.small, medium, x-large, and others.larger / smaller bump size relative to the parent instead.emem multiplies the parent size — nested spans can grow quickly.
<style>
span {
font-size: 1.5em;
}
</style>
<p>Outer <span>middle <span>inner</span></span></p>1.5em is 1.5 × that span’s parent font size.rem would keep every span the same size.If text looks too big, too small, or inconsistent, check these first.
em compounds in nested elementsA nested 1.5em inside another 1.5em becomes much larger than you might expect. Prefer rem when you want stable sizing.
px can hurt accessibilitySome browsers do not let users rescale text set only in pixels. Prefer relative units for body copy when inclusive design matters.
font-size: 150% means 1.5 × the parent’s font size, not 150% of the viewport.
font can reset sizeThe font shorthand sets size and can overwrite a earlier font-size rule. Put size after the shorthand, or include it in the shorthand.
Length and percentage values must be zero or positive. A negative font-size is ignored.
font-size is a browser CSS property for text sizing. Node.js, Deno, and Bun do not apply it.
Supported in all modern browsers and Internet Explorer. Core keyword, length, and percentage values are universal.
Bottom line: Safe to use everywhere. Prefer rem or other relative sizes for accessible body text. It is not a runtime API.
em/ex units).rem: predictable scaling from the root without nesting surprises.em / %: relative to the parent and can compound when nested.medium. Inherited by default.One line: font-size: 1.25rem; sizes text from the root in a way that stays easy to scale.
Preserve readable size when the browser switches to a fallback font.
10 people found this page helpful