CSS font-weight Property

The font-weight property in CSS is used to control the thickness or boldness of text. It helps improve the appearance and readability of webpage content.

• The font weight depends on the font family and browser support.
• Common values include normal, bold, lighter, and numeric values like 100–900.
• Proper use of font-weight enhances the visual appeal of text.

Syntax:

font-weight: normal | bold | lighter | bolder | number | initial | inherit | unset;

Property Values

• normal: This is the default font-weight and defines the normal font weight. It is equal to the number value 400.
• bold: This defines the bold font weight, equal to the number value 700.
• lighter: This makes the font weight one level lighter than the parent element, considering the available font weights of the font family.
• bolder: This makes the font weight one level heavier than the parent element, considering the available font weights of the font family.
• number: This sets the font weight according to the number specified. The number can range between 1 to 1000. If the exact weight is unavailable, a suitable weight is applied.

Global Values

• initial: This sets the font weight to the default value.
• inherit: This sets the font weight equal to the value inherited from its parent element.
• unset: This resets the font weight to its inherited value.

When lighter or bolder is specified, the below chart shows how the absolute font weight of the element is determined.

Example: The following example demonstrates the use of CSS font-weight property in which the property has been set to different values.

The CSS font-weight property is a powerful tool for controlling the thickness and visual impact of text on a webpage. By utilizing different font-weight values, web designers can create a variety of text effects that enhance readability and visual appeal. Understanding how to leverage this property will significantly improve the typography and overall user experience of your web content. For further learning, explore additional CSS properties and techniques to elevate your web design skills.