What is font-weight in CSS?

Font-weight in CSS is a property that defines the thickness or boldness of the text in an HTML element. It plays a crucial role in typography, allowing developers to create visual hierarchy and emphasis in their web designs. By adjusting the font-weight, you can enhance readability and draw attention to specific content. This property can take several values, including numeric values, keywords, and even inherit properties from parent elements.

Understanding how to effectively use the font-weight property is essential for creating visually appealing and accessible web pages. Below, we will explore the different values that can be assigned to font-weight, practical examples, best practices, and common mistakes to avoid.

Font-Weight Values

The font-weight property can accept various values, which can be categorized into three main types: numeric values, keyword values, and the inherit value.

1. Numeric Values

Numeric values range from 100 to 900, where 400 is equivalent to normal and 700 is equivalent to bold. The values in between can be used for varying levels of boldness, although not all fonts support all weights. Here’s a breakdown of the numeric values:

2. Keyword Values

In addition to numeric values, font-weight can also accept keyword values. The most commonly used keywords are:

• normal (equivalent to 400)
• bold (equivalent to 700)
• bolder (relative to the parent element)
• lighter (also relative to the parent element)

3. Inherit Value

The inherit value allows an element to inherit the font-weight from its parent element, ensuring consistency in styling throughout the document.

Practical Examples

Here are a few examples of how to use the font-weight property in CSS:

/* Example 1: Basic usage */
p {
    font-weight: normal; /* 400 */
}

/* Example 2: Using bold */
strong {
    font-weight: bold; /* 700 */
}

/* Example 3: Numeric values */
h1 {
    font-weight: 900; /* Black */
}

/* Example 4: Inheriting font weight */
div {
    font-weight: 300; /* Light */
}

span {
    font-weight: inherit; /* Inherits from div */
}

Best Practices

When using font-weight, consider the following best practices:

• Choose a font that supports multiple weights to take advantage of the font-weight property.
• Use numeric values for precise control over text thickness, especially in design systems.
• Maintain consistency in font-weight across similar elements to enhance readability.
• Use lighter weights for body text and bolder weights for headings to create a clear hierarchy.

Common Mistakes

Here are some common mistakes to avoid when working with font-weight:

• Assuming all fonts support all numeric weights; always check font documentation.
• Overusing bold text, which can reduce readability and diminish emphasis.
• Neglecting to test font-weight variations across different browsers and devices.

By understanding and effectively utilizing the font-weight property, you can significantly enhance the visual appeal and usability of your web applications.