How Font Weight Works

Example 1: Normal Weight

The normal value displays text with normal thickness.

CSS Code

p {
    font-weight: normal;
}

Output

Example 2: Bold Weight

The bold value makes text thicker and more prominent.

CSS Code

p {
    font-weight: bold;
}

Output

Example 3: Numeric Weight

Numeric values can be used to specify the exact font weight.

CSS Code

h2 {
    font-weight: 700;
}

Output

Example 4: Different Font Weights

Different elements can use different numeric font weights.

CSS Code

.light {
    font-weight: 300;
}

.normal {
    font-weight: 400;
}

.medium {
    font-weight: 500;
}

.bold {
    font-weight: 700;
}

Output

Common Font Weight Values

Simple Explanation