Skip to main content

CSS Font Weight

In CSS, the font-weight property is used to specify the thickness or boldness of a font. It allows you to control the visual weight of text elements on your web page, making them appear lighter or bolder as needed. The font-weight property accepts a variety of values that range from 100 (thin) to 900 (bold), providing you with fine-grained control over the appearance of text.

Syntax​

The font-weight property in CSS has the following syntax:

index.css
selector {
  font-weight: value;
}
  • selector: The CSS selector that targets the text element you want to apply the font weight to.
  • value: A numeric or keyword value that represents the thickness of the font. The font-weight property accepts the following values:
    • normal: Sets the font weight to the normal level (equivalent to 400).
    • bold: Sets the font weight to a bold level (equivalent to 700).
    • bolder: Increases the font weight relative to the parent element.
    • lighter: Decreases the font weight relative to the parent element.
    • 100 to 900: Numeric values that represent the font weight, with 100 being the thinnest and 900 being the boldest.

Examples​

1. Setting the Font Weight to Bold​

You can use the font-weight property to make text elements appear bold by setting the value to bold. In the following example, we make a paragraph element bold:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bold Text</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <p class="bold-text">This text is bold.</p>
</body>
</html>
http://127.00.1:5500/index.html

This text is bold.

Informaton

The font-weight property can be applied to various text elements, such as headings, paragraphs, and spans, to create different visual styles.

2. Using Numeric Values for Font Weight​

You can specify the font weight using numeric values ranging from 100 to 900. In the following example, we set the font weight of a heading element to 700 (bold):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bold Heading</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <h1 class="bold-heading">This is a bold heading.</h1>
</body>
</html>
http://127.00.1:5500/index.html

This is a bold heading.

3. Adjusting Font Weight Relative to Parent Element​

You can use the bolder and lighter values to adjust the font weight relative to the parent element. In the following example, we make a paragraph element lighter than its parent:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lighter Text</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div class="parent-element">
    <p class="lighter-text">This text is lighter than the parent.</p>
  </div>
</body>
</html>
http://127.00.1:5500/index.html

This text is lighter than the parent.

Note

The bolder and lighter values adjust the font weight relative to the parent element's font weight. If the parent element has a font weight of normal, the bolder value will make the text bold, while the lighter value will make it lighter.

4. Using font-weight with Other Properties​

You can combine the font-weight property with other text properties to create custom text styles. In the following example, we set the font weight, font size, and font family of a paragraph element:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Text Style</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <p class="custom-text">This is custom text.</p>
</body>
</html>
http://127.00.1:5500/index.html

This is custom text.

Conclusion​

The font-weight property in CSS allows you to control the thickness of text elements on your web page, making them appear lighter or bolder as needed. By using the font-weight property with different values, you can create visually appealing text styles that enhance the readability and aesthetics of your content. Experiment with the font-weight property to find the right balance of boldness for your text elements.