CSS font-weight
➔ The font-weight property is used to specify the thickness and boldness of the font.
Syntax
font-weight: normal|bold|bolder|lighter|number|initial|inherit;
Property values
| Value | Description |
|---|---|
| normal | Sets the font-weight equivalent to the numeric value 400. This is default. |
| bold | A bold weight, equivalent to a numeric value of 700. |
| bolder | Defines heavy characters. |
| lighter | Defines lighter characters. |
|
100 (Thin) 200 (Extra Light) 300 (Light) 400 (Normal) 500 (Medium) 600 (Semi Bold) 700 (Bold) 800 (Extra Bold) 900 (Heavy) |
Numbers from 1 to 1000 (100-900 is most common) provide precise control, especially for variable fonts. Higher numbers represent bolder weights. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Example
body {
font-family: sans-serif;
}
#p1 {
font-weight: normal;
}
#p2 {
font-weight: lighter;
}
#p3 {
font-weight: bolder;
}
#p4 {
font-weight: bold;
}
#p5 {
font-weight: 1000;
}
#p6 {
font-weight: initial;
}
#p7 {
font-weight: inherit;
}
#p8 {
font-weight: unset;
}Click on the "Try it Now" button to see how it works.