CSS: Font-Weight - Setting Font Weight

The font-weight property in CSS is used to specify the weight (or boldness) of the font. It allows developers to control the thickness of text characters, enhancing the visual hierarchy and emphasis in a design. The font-weight property can be used to create varying levels of importance and readability, making it a crucial tool in web typography.

Font weight is often used to highlight headings, important text, or interactive elements like buttons. By adjusting the weight of the font, you can guide the user’s attention to specific parts of the content, improving the overall user experience. In this article, we will explore the font-weight property in detail, starting with a basic setup and moving on to practical examples demonstrating its usage.

Table of Contents

Basic Setup

Before we dive into the details of the font-weight property, let’s set up a basic example to demonstrate its functionality. We’ll create a simple HTML structure with some CSS to define our text elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Font-Weight Example</title>

    <style>

        .text {
            font-family: Arial, sans-serif;
            font-size: 20px;
            margin: 10px;
            padding: 10px;
            background-color: #f0f0f0;
        }

    </style>

</head>
<body>

    <div class="text">
        This is a sample text with default font weight.
    </div>

</body>
</html>

In this code, we define a <div> element with the class text. The CSS sets the font-family to Arial and the font-size to 20px. This basic setup provides a foundation for exploring the font-weight property.

Understanding the `font-weight` Property

The font-weight property in CSS allows you to control the boldness of the text. The property can take several keyword values and numeric values to specify different levels of font weight. The syntax for font-weight is:

element {
    font-weight: value;
}

Where value can include:

normal: The default font weight. Equivalent to a numeric value of 400.
bold: A bold font weight. Equivalent to a numeric value of 700.
bolder: A font weight that is bolder than the inherited weight.
lighter: A font weight that is lighter than the inherited weight.
100 to 900: Numeric values representing the weight of the font, where 100 is the lightest and 900 is the boldest.

Practical Examples of `font-weight`

Let’s explore practical examples of using the font-weight property in different scenarios.

Using Normal Font Weight

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Font-Weight Example</title>

    <style>

        .text-normal {
            font-family: Arial, sans-serif;
            font-size: 20px;
            font-weight: normal;
            margin: 10px;
            padding: 10px;
            background-color: #f0f0f0;
        }

    </style>

</head>
<body>

    <div class="text-normal">
        This is a sample text with normal font weight.
    </div>

</body>
</html>

In this example, the font-weight property is set to normal for the .text-normal class. This ensures that the text is displayed with the default font weight, which is typically equivalent to a numeric value of 400.

Using Bold Font Weight

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Font-Weight Example</title>

    <style>

        .text-bold {
            font-family: Arial, sans-serif;
            font-size: 20px;
            font-weight: bold;
            margin: 10px;
            padding: 10px;
            background-color: #e0e0e0;
        }

    </style>

</head>
<body>

    <div class="text-bold">
        This is a sample text with bold font weight.
    </div>

</body>
</html>

In this example, the font-weight property is set to bold for the .text-bold class. This ensures that the text is displayed with a bold font weight, which is typically equivalent to a numeric value of 700.

Using Numeric Font Weights

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Font-Weight Example</title>

    <style>

        .text-light {
            font-family: Arial, sans-serif;
            font-size: 20px;
            font-weight: 300;
            margin: 10px;
            padding: 10px;
            background-color: #d0d0d0;
        }

        .text-regular {
            font-family: Arial, sans-serif;
            font-size: 20px;
            font-weight: 400;
            margin: 10px;
            padding: 10px;
            background-color: #c0c0c0;
        }

        .text-bold {
            font-family: Arial, sans-serif;
            font-size: 20px;
            font-weight: 700;
            margin: 10px;
            padding: 10px;
            background-color: #b0b0b0;
        }

    </style>

</head>
<body>

    <div class="text-light">
        This is a sample text with light font weight (300).
    </div>

    <div class="text-regular">
        This is a sample text with regular font weight (400).
    </div>

    <div class="text-bold">
        This is a sample text with bold font weight (700).
    </div>

</body>
</html>

In this example, we use numeric values for the font-weight property to demonstrate different levels of font weight. The .text-light class is set to 300, resulting in a lighter font weight. The .text-regular class is set to 400, which is the default weight. The .text-bold class is set to 700, resulting in a bold font weight.

Combining Font Weight with Other Properties

The font-weight property can be combined with other font properties to achieve more sophisticated typographic effects. Let’s see an example where we combine font weight with other font settings.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Font-Weight Example</title>

    <style>

        .text {
            font-family: 'Verdana', sans-serif;
            font-size: 24px;
            font-weight: 600;
            font-style: italic;
            margin: 10px;
            padding: 10px;
            background-color: #a0a0a0;
        }

    </style>

</head>
<body>

    <div class="text">
        This is a sample text with font weight 600, italic style, and font size 24px.
    </div>

</body>
</html>

In this example, the .text class combines font-weight: 600; with font-style: italic; and font-size: 24px;. This ensures that the text is styled with a medium bold weight, italic style, and a larger font size, creating a distinctive and readable typographic style.

Conclusion

The font-weight property in CSS is a versatile tool for controlling the boldness of text. By using this property, developers can enhance the visual hierarchy and readability of their content, making it more engaging and easier to navigate. The font-weight property offers a range of values that cater to different typographic needs, from light and regular weights to bold and bolder weights.

Experimenting with different font weights and combining them with other font properties allows for the creation of sophisticated and visually engaging webpages. The examples provided in this article serve as a foundation, encouraging further exploration and creativity in using the font-weight property to design responsive and user-friendly webpages.