What You’ll Learn

The font-weight property controls how thick or bold text looks, helping you build clear hierarchy and emphasis across your site.

Introduction

The font-weight property in CSS is used to set the weight (or boldness) of the font. This property allows web developers to adjust the thickness of the text, enhancing readability and emphasizing important content.

The font-weight property is versatile and can be applied to headings, paragraphs, and other text elements to achieve various design effects.

Definition and Usage

Use keyword values like normal and bold for simple styling, or numeric values from 100 to 900 for precise control in design systems. Variable fonts can interpolate smoothly between weights when the font supports it.

📝 Syntax

The syntax for the font-weight property is straightforward. It can be applied to any text-containing element:

element {
  font-weight: value;
}

Here, value can be one of several predefined keywords or numeric values that correspond to different font weights.

Basic Example

h1 { font-weight: 300; }
p { font-weight: bold; }

Default Value

The default value of the font-weight property is normal, which corresponds to a font weight of 400.

Syntax Rules

• Accepts keywords: normal, bold, bolder, and lighter.
• Accepts numeric values from 100 (thin) to 900 (black), in steps of 100.
• The property is inherited — child elements receive the parent's weight unless overridden.
• The browser uses the closest available font face when the exact weight is missing.
• Works as part of the font shorthand when included in the declaration.

💎 Property Values

Common numeric weights

Examples Gallery

Change the font weight of a heading to light and a paragraph to bold — then explore numeric scales, relative weights, and UI emphasis.

<style>
  h1 { font-weight: 300; }
  p { font-weight: bold; }
</style>

<h1>Heading with Lighter Font Weight</h1>
<p>Paragraph with Bold Font Weight</p>

.weight-300 { font-weight: 300; }
.weight-400 { font-weight: 400; }
.weight-600 { font-weight: 600; }
.weight-700 { font-weight: 700; }

.parent { font-weight: 400; }
.parent .emphasis { font-weight: bolder; }
.parent .muted { font-weight: lighter; }

.btn {
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.55rem 1rem;
}

♿ Accessibility

• Do not rely on weight alone to convey critical information; combine with color, icons, or wording when needed.
• Maintain readable contrast at every weight, especially light text on light backgrounds.
• Use semantic HTML — prefer <strong> for important content; it typically renders bold by default.
• Avoid very thin weights (100–200) for small body text; they can be hard to read.
• Test at high zoom to ensure bold and light text remain legible.

💡 Best Practices