font-size: Understand px, em, rem, and Text Enlargement

CSS Reference

font-size sets text size. In this property, em and percentages resolve against the parent’s computed font size, while rem uses the root; px is a CSS-pixel length that still participates in browser zoom.

Syntax and value choices

Property	Initial value	Inherited	Main application conditions
`font-size`	medium	Yes	All elements; visible effects depend on the text, image, or box conditions below

Initial values are not necessarily the values assigned to HTML elements by the browser’s stylesheet. Inspect the actual result in developer tools’ Computed panel.

html { font-size: 100%; }
body { font-size: 1rem; }
h2 { font-size: 1.5rem; }

Value or category	Behavior and choice
`px`	A CSS-pixel length; zoom can still enlarge it.
`em / %`	Resolve against the parent’s font size for this property.
`rem`	Resolve against the root html font size.
`larger / smaller`	Choose a relative keyword size.

For supported values and conditions, see MDN font-size.

Run the example and compare results

Save this complete code as css-reference-10544-example.html in UTF-8 and open it in a browser. Keep its demonstration styles in that file rather than pasting them into a site-wide stylesheet.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>font-size comparison example</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.samples { font-size: 20px; }
.target { font-size: 1.5em; }
.reference { font-size: 1.5rem; }
</style>
</head>
<body>
<main id="demo">
<h1>font-size comparison</h1>
<section class="samples"><div class="a"><p class="label">Parent 20px × 1.5em</p><div class="target">CSS font size</div></div><div class="b"><p class="label">Root size × 1.5rem</p><div class="reference">CSS font size</div></div></section>
</main>
</body>
</html>

The first sample is 30px because its parent is 20px and its size is 1.5em. The rem sample depends on the root’s size, which must be inspected rather than assumed.

Nested em multipliers

Each nested em size uses its own parent, so repeated multipliers accumulate. Use rem for a consistent root-based scale or em for proportions within a component. Inspect the used pixel value in Computed to verify the intended reference.

Responsive text and enlargement

Negative font sizes are not valid. Viewport-only text sizing can make text too small on narrow screens; plan minimum and maximum sizes and test zoom. If larger text is clipped, inspect fixed heights, line height, and overflow before reducing the text size.

Compare nested em and rem references

Save this complete document as css-reference-10544-practice.html in UTF-8 and open it in a browser. Test it as a separate file rather than nesting it inside another example.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Compare nested em and rem references</title>
  <style>
    body { margin: 16px; color: #20242b; font: 16px/1.7 sans-serif; }
    main { max-width: 52rem; margin: auto; }
    h1 { font-size: 1.35rem; }
    .samples { display: flex; flex-wrap: wrap; gap: 24px; }
    .samples > * { max-width: 100%; min-width: 0; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
html { font-size:16px; } .parent { font-size:20px; padding:8px; background:#e6f2ff; } .em { font-size:1.5em; } .rem { font-size:1.5rem; }
  </style>
</head>
<body>
<main>
  <h1>Compare nested em and rem references</h1>
<p>em</p><div class="parent"><div class="em">Child<div class="em">Grandchild</div></div></div><p>rem</p><div class="parent"><div class="rem">Child<div class="rem">Grandchild</div></div></div>
</main>
</body>
</html>

Inspect Computed: em yields 30px then 45px; both rem descendants yield 24px. Change only html to 20px: the rem descendants become 30px, while the fixed 20px parent leaves em at 30/45px. Restore the root to 16px.

For coordinated font sizing, line heights, and typeface choices, see CSS Fonts, Font Sizes, and Line Height. Related properties to compare alongside these conditions are line-height.

When the result is missing or unexpected

Inspect both the parent and root font sizes.
Check height and wrapping restrictions if enlargement cuts text off.

CSS Reference

CSS / Reference / list-style-type: Change List Markers and Numbering

Style list markers while keeping ordered and unordered semantics. Compare numbering styles, starting values, marker removal, and shorthand resets.

CSS / Reference / border-style: Border Patterns, Side Order, and Hidden Conflicts

Choose border patterns for each side and inspect shorthand resets. Compare none with hidden in collapsed tables and account for zero computed border widths.

CSS / Reference / background-origin: Positioning References Versus Painting Boundaries

Choose a background image’s positioning box and distinguish it from background-clip. Compare how padding, borders, percentage sizes, and fixed attachment affect the reference.

CSS / Reference / background-size: Cover, Contain, and Background Sizing

Compare background cover and contain using a known image ratio. Account for positioning areas, percentages, cropping, repeated tiles, and the element’s own size.

CSS / Reference / text-indent: First-Line Indents and Hanging Paragraphs

Create first-line and hanging indents, distinguish them from paragraph padding, and check inheritance, writing direction, and narrow-screen clipping.

CSS / Reference / background-image: Images, Gradients, Relative Paths, and Layers

Paint gradients or image layers, resolve paths from the correct stylesheet location, and keep meaningful pictures in accessible HTML rather than background decoration.

CSS / Reference / calc(): Calculate CSS Values and Understand Their Types

Combine percentages and lengths with calc(), inspect the actual parent width, and distinguish invalid expressions from newer typed arithmetic and special numeric results.

CSS / Reference / clip: Understand Legacy Clip and Migrate to Clip-Path

Read legacy rect coordinates and compare them with clip-path inset distances. Keep layout sizing and clipping separate when migrating existing CSS.

CSS / Reference / font-size: Understand px, em, rem, and Text Enlargement

Choose text-size units by their reference and test nested em scaling. Check the actual root size, browser enlargement, and layout constraints.

CSS / Reference / font-family: Font Lists, Glyph Fallback, and Loading

Build a font stack with appropriate generic fallbacks and inspect the fonts actually used. Distinguish naming a family from loading files and covering characters.