CSS font-size Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The font-size property determines the size at which text is rendered and therefore drives the visual scale of typographic elements on a page. It is the primary factor that controls glyph rendering — affecting the apparent height of letters, the balance of ascenders and descenders, and the amount of space a line of text occupies. Because many other layout calculations use the computed text size as a baseline, changes to font-size cascade into wrapping, overflow, and overall page rhythm.

How a given computed size translates to on-screen appearance depends not only on the numeric value but also on the font design and the element’s context. Different faces at the same numeric size can look larger or smaller due to differences in x-height, weight, and letterforms, so the choice of font-family directly affects perceived size. The effective vertical spacing available to each line is the combination of the text size and the line-height, so controlling both together is essential for consistent vertical rhythm and readable blocks of text.

Because font-size is inherited by default, it’s commonly used as a base for relative sizing throughout a document; many layout techniques rely on that inheritance to scale components in proportion. Its value has a strong impact on accessibility and responsiveness: text that is too small reduces legibility and increases cognitive load, while scalable approaches let users adjust sizes more comfortably. The perceived emphasis and contrast of text also depend on other typographic properties — for example, heavier font-weight can make smaller text appear bolder, while changes in letter-spacing interact with size to alter legibility at different scales.

In practice, managing font-size effectively means thinking of it as part of a typographic system rather than an isolated setting. Establish a consistent base size, test various typefaces at the sizes you plan to use, and coordinate with related typographic settings to preserve readability and layout stability across devices and user settings. Small adjustments to size can have outsized effects on line breaks, element heights, and user experience, so iterate with real content and real devices when setting typographic scales.

Definition

Initial value: medium
Applies to: All elements
Inherited: Yes
Computed value: Absolute length
Animatable: Yes
JavaScript syntax: object.style.fontSize

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

font-size: <absolute-size> | <relative-size> | <length> | <percentage>

Values

<absolute-size>A set of keywords indicating predefined font sizes that scale according to font setting preferences or each browser's default values. From smallest to largest, possible values are xx-small, x-small, small, medium, large, x-large, and xx-large.
<relative-size>A set of keywords interpreted relative to the parent element's font-size - either smaller or larger.
<length>An absolute unit value: any of the standard css length units are allowed. Negative lengths are illegal.
<percentage>A percentage value specifies an absolute font size relative to the parent element's font-size.
inherit

Example

HTML

<body>

  <main class='example'>

    <h1 class='title'>Font-size examples</h1>

    <p class='px'>This text uses 18px.</p>

    <p class='em'>This text uses 1.2em (relative to parent).</p>

    <p class='rem'>This text uses 1.1rem (relative to root).</p>

    <p class='percent'>This text uses 120%.</p>

    <p class='vw'>This text uses 3vw (viewport width).</p>

    <small class='small-note'>Resize the window to see vw change.</small>

  </main>

</body>

CSS

:root {
  font-size: 16px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.4;
  color: #222;
  padding: 24px;
  background: #f9f9fb;
}

.example {
  max-width: 700px;
  margin: 0 auto;
}

.title {
  font-size: 24px;
  margin-bottom: 12px;
}

.px {
  font-size: 18px;
}

.em {
  font-size: 1.2em;
}

.rem {
  font-size: 1.1rem;
}

.percent {
  font-size: 120%;
}

.vw {
  font-size: 3vw;
}

.small-note {
  display: block;
  margin-top: 16px;
  font-size: 0.85rem;
  color: #555;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS font-size property. Hover over a browser icon to see the version that first introduced support for this CSS property.