CSS Font Weight

The font-weight property in CSS is used to set the weight (or boldness) of the font. This property allows you to control the thickness of the characters in your text, providing various levels of emphasis.

Font Weight Values

The font-weight property can take several values. Here are the common values you can use:

Value Description Example
normal The default font weight. Equivalent to a weight of 400.
This is normal weight text.
bold Defines bold text. Equivalent to a weight of 700.
This is bold weight text.
bolder Bolder than the inherited font weight.
This is bolder weight text.
lighter Lighter than the inherited font weight.
This is lighter weight text.
100 - 900 Numeric values from 100 to 900, in increments of 100. These values correspond to specific font weights, with 400 being normal and 700 being bold.
Weight 100
Weight 200
Weight 300
Weight 400 (Normal)
Weight 500
Weight 600
Weight 700 (Bold)
Weight 800
Weight 900

Using Font Weight in CSS

Here's how you can apply different font weights to your text using CSS:

Example: Applying Normal Weight
Try yourself 
        
            .normal {
    font-weight: normal;
}

This will render the text with a normal font weight, which is the default.

Example: Applying Bold Weight
Try yourself 
        
            .bold {
    font-weight: bold;
}

This will render the text with a bold font weight.

Example: Applying Bolder Weight
Try yourself 
        
            .parent {
    font-weight: 400; /* Normal weight */
}
.child {
    font-weight: bolder; /* Makes it bold relative to parent */
}
.grandchild {
    font-weight: bolder; /* Makes it bolder if possible */
}

This will render the text with a bolder font weight relative to its parent element's weight.

The bolder value increases the font weight relative to the inherited font weight from the parent element. It means that if the parent element has a normal weight (font-weight: 400), using bolder will make the child element's font weight bolder, usually equivalent to font-weight: 700. However, if the parent element already has a bold weight, bolder will not further increase it beyond the available maximum weight

Example: Applying Numeric Weights
Try yourself 
        
            .weight-100 {
    font-weight: 100;
}
.weight-200 {
    font-weight: 200;
}
.weight-300 {
    font-weight: 300;
}
.weight-400 {
    font-weight: 400;
}
.weight-500 {
    font-weight: 500;
}
.weight-600 {
    font-weight: 600;
}
.weight-700 {
    font-weight: 700;
}
.weight-800 {
    font-weight: 800;
}
.weight-900 {
    font-weight: 900;
}

This will render the text with specific numeric weights.

Important Notes

Here are some important notes and best practices when using the font-weight property:

Comparing Font Weights

Here is a visual comparison of different font weights to help you understand their impact:

Normal (400)
Bold (700)
Weight 100
Weight 200
Weight 300
Weight 400
Weight 500
Weight 600
Weight 700
Weight 800
Weight 900