How to Set Font-Weight in CSS: Simple Guide

Use the font-weight property in CSS to set how bold text appears. You can assign it keywords like normal or bold, or numeric values from 100 to 900 to control the thickness of the font.

Syntax

The font-weight property accepts either keyword values or numeric values:

• Keywords: normal (default), bold, bolder, lighter
• Numeric values: from 100 (thin) to 900 (extra bold) in increments of 100

Numeric values give more precise control if the font supports them.

css

selector {
  font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
}

Example

This example shows three paragraphs with different font weights: normal, bold, and numeric 300 (light).

css

html {
  font-family: Arial, sans-serif;
}

.normal {
  font-weight: normal;
}

.bold {
  font-weight: bold;
}

.light {
  font-weight: 300;
}

Output

<p style="font-weight: normal;">This text is normal weight.</p><p style="font-weight: bold;">This text is bold.</p><p style="font-weight: 300;">This text is light weight (300).</p>

Common Pitfalls

Common mistakes when setting font-weight include:

• Using numeric values that the font does not support, which may fallback to normal or bold.
• Confusing bolder and lighter keywords, which depend on the parent element's weight.
• Not specifying a font that supports multiple weights, so numeric values have no visible effect.

css

/* Wrong: Using unsupported numeric value */
p {
  font-weight: 950; /* Invalid, ignored by browsers */
}

/* Right: Use supported values */
p {
  font-weight: 900;
}

Quick Reference

Value	Description
normal	Default weight (usually 400)
bold	Bold weight (usually 700)
bolder	One level bolder than parent
lighter	One level lighter than parent
100	Thin
200	Extra light
300	Light
400	Normal
500	Medium
600	Semi bold
700	Bold
800	Extra bold
900	Black (heaviest)

Key Takeaways

Use the font-weight property to control text boldness in CSS.

You can set font-weight with keywords like normal or bold, or numeric values from 100 to 900.

Numeric values offer finer control but depend on font support.

Avoid unsupported numeric values as they may be ignored by browsers.

Keywords bolder and lighter adjust weight relative to the parent element.