CSS font-weight

The CSS font-weight property is used to control the thickness or boldness of the text in an element. It allows you to set different font weights to achieve various typographic effects.

The font-weight property can take one of the following values:

1. normal: This is the default value, and it represents the normal font weight of the text.
2. bold: This value sets the text to a bold font weight. It is typically bolder than the normal font weight.
3. bolder: This value makes the text even bolder than the parent element’s font weight, effectively increasing the font weight relative to the parent’s value.
4. lighter: This value makes the text lighter than the parent element’s font weight, effectively decreasing the font weight relative to the parent’s value.
5. Numeric values: You can also use numeric values from 100 to 900 in increments of 100. Each value represents a specific font weight, with 400 being the normal font weight, and 700 being the bold font weight. The availability of different font weights depends on the font family being used.

Example:

h1 {
  font-weight: bold;
}

p {
  font-weight: 500;
}

In this example, all <h1> elements will have bold text, while all <p> elements will have a font weight of 500, which may or may not be a distinct font weight depending on the font family being used.

Not all font families support all font weights, and the available font weights can vary depending on the fonts loaded on the user’s system. Some fonts may have only two font weights (normal and bold), while others may have more extensive font weight options.

It’s important to choose appropriate font weights that match the design and hierarchy of your website. The font-weight property is useful for creating visual contrast between different heading levels and text content. Using appropriate font weights can improve the readability and overall aesthetics of your web page’s typography.