CSS font-weight 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-weight property controls the perceived thickness or visual “weight” of glyphs in the chosen typeface, and therefore plays a central role in a page’s typographic voice and hierarchy. Changing weight can alter emphasis and readability without affecting font size or spacing directly; heavier weights tend to draw the eye and suggest stronger emphasis, while lighter weights can appear more delicate or formal. Because different typefaces are designed with different weight families, selecting a weight can also cause the browser to pick a different face from the same family, which may subtly change metrics and overall appearance — this makes weight an essential tool when working alongside the font-family property and with font variants like italic or oblique set via font-style.

Under the cascade and inheritance model, font-weight is inherited by descendants unless explicitly overridden, so a single declaration can establish a base tone for a whole section of content. When the exact weight requested is not available in the loaded fonts, user agents will either synthesize an approximation (for example by algorithmically emboldening strokes) or select the nearest available face; that fallback behavior can change glyph metrics and trigger reflow. Variable fonts introduce a continuous weight axis that lets the browser interpolate intermediate designs; this can be combined with font-variation-settings to fine-tune the appearance, while related axes such as width or optical size are controlled separately (for example via font-stretch).

Practical use of font-weight should balance visual hierarchy, legibility, and performance. Over-reliance on multiple distinct weights can increase the number of font files a page must load, so designers often pick a small palette of weights for headings, body text, and accents to maintain consistency and reduce network cost. Accessibility considerations matter too: extreme contrast between very light and very heavy weights can reduce legibility for some readers, and weight interacts with spacing and line metrics (so adjust line-height and letter spacing when necessary). Thoughtful application of weight, combined with family choice and variation axes, enables nuanced typographic systems without changing layout or size.

Definition

Initial value: normal
Applies to: All elements
Inherited: Yes
Computed value: Numeric weight value
Animatable: Yes
JavaScript syntax: object.style.fontWeight

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-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Values

normalNormal font weight. Same as 400.
boldBold font weight. Same as 700.
bolderSpecifies a bolder weight than the inherited value.
lighterSpecifies a lighter weight than the inherited value.
100, 200, 300, 400, 500, 600, 700, 800, 900Numeric font weights for fonts that provide more than just normal and bold. If the exact weight given is unavailable, a face with a nearby weight is used.
inherit

Example

HTML

<div class='font-weight-demo'>

    <h1>CSS font-weight examples</h1>

    <p class='weight-default'>Default (inherited)</p>

    <p class='weight-normal'>font-weight: normal;</p>

    <p class='weight-bold'>font-weight: bold;</p>

    <p class='weight-bolder'>font-weight: bolder;</p>

    <p class='weight-lighter'>font-weight: lighter;</p>

    <p class='weight-100'>font-weight: 100;</p>

    <p class='weight-300'>font-weight: 300;</p>

    <p class='weight-500'>font-weight: 500;</p>

    <p class='weight-700'>font-weight: 700;</p>

    <p class='weight-900'>font-weight: 900;</p>

</div>

CSS

/* Base layout */
.font-weight-demo {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    line-height: 1.4;
    max-width: 720px;
    margin: 24px;
    color: #111;
}

.font-weight-demo h1 {
    margin-bottom: 12px;
    font-size: 20px;
}

/* Example items */
.font-weight-demo p {
    margin: 8px 0;
    padding: 6px 10px;
    background: #f8f9fa;
    border-radius: 6px;
}

/* Font-weight variations */
.weight-default { /* uses inherited/default weight */ }
.weight-normal  { font-weight: normal; }
.weight-bold    { font-weight: bold; }
.weight-bolder  { font-weight: bolder; }
.weight-lighter { font-weight: lighter; }
.weight-100     { font-weight: 100; }
.weight-300     { font-weight: 300; }
.weight-500     { font-weight: 500; }
.weight-700     { font-weight: 700; }
.weight-900     { font-weight: 900; }

Result

Editor

Browser Support

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