CSS font-weight Property

Posted in CSS Tutorial

Updated on Oct 03, 2024

By Mari Selvan

👁️ 18 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The font-weight property in CSS is used to set the weight (or boldness) of the font.

This property allows web developers to adjust the thickness of the text, enhancing readability and emphasizing important content.

The font-weight property is versatile and can be applied to headings, paragraphs, and other text elements to achieve various design effects.

💡 Syntax

The syntax for the font-weight property is straightforward. It can be applied to any text-containing element.

Syntax

Copied

element {
  font-weight: value;
}

Here, value can be one of several predefined keywords or numeric values that correspond to different font weights.

🎛️ Default Value

The default value of the font-weight property is normal, which corresponds to a font weight of 400.

🏠 Property Values

Value	Description
normal	Sets the font weight to normal (equivalent to 400).
bold	Sets the font weight to bold (equivalent to 700).
bolder	Sets the font weight to one level bolder than the inherited weight.
lighter	Sets the font weight to one level lighter than the inherited weight.
100 to 900	Numeric values representing different levels of font weight, where 400 is normal and 700 is bold.

📄 Example

In this example, we'll change the font weight of a paragraph to bold and set the heading to a lighter weight.

index.html

Copied

<!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>
    h1 {
      font-weight: 300;
    }
    p {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>Heading with Lighter Font Weight</h1>
  <p>Paragraph with Bold Font Weight</p>
</body>
</html>

🖥️ Browser Compatibility

The font-weight property is well-supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. This ensures consistent rendering of text weight on different devices and platforms.

🎉 Conclusion

The font-weight property is an essential tool for web developers aiming to enhance text readability and emphasize important content.

By adjusting the weight of the font, you can create a more engaging and visually appealing website. Experiment with different font weights to see how they can improve the overall design and user experience of your web projects.