0
0
CSSmarkup~5 mins

Font weight in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Font weight controls how thick or thin the text looks. It helps make words stand out or look lighter.

To make headings bold so they catch attention.
To show important words in a paragraph by making them heavier.
To create a light, elegant look with thinner text.
To improve readability by adjusting text thickness on different screens.
To match the style of a brand or design by changing text weight.
Syntax
CSS
font-weight: value;

The value can be keywords like normal or bold, or numbers from 100 to 900 in steps of 100.

Higher numbers mean thicker text. Default is usually normal (400).

Examples
This sets the text to normal thickness, which is the default.
CSS
font-weight: normal;
This makes the text bold and thicker.
CSS
font-weight: bold;
This makes the text lighter than normal.
CSS
font-weight: 300;
This makes the text very thick and heavy.
CSS
font-weight: 900;
Sample Program

This page shows four paragraphs with different font weights: normal, bold, light, and heavy. You can see how the thickness of the text changes.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Font Weight Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
      line-height: 1.5;
    }
    .normal {
      font-weight: normal;
    }
    .bold {
      font-weight: bold;
    }
    .light {
      font-weight: 300;
    }
    .heavy {
      font-weight: 900;
    }
  </style>
</head>
<body>
  <p class="normal">This text is normal weight (400).</p>
  <p class="bold">This text is bold weight (700).</p>
  <p class="light">This text is light weight (300).</p>
  <p class="heavy">This text is heavy weight (900).</p>
</body>
</html>
OutputSuccess
Important Notes

Not all fonts support every numeric weight. If a weight is not supported, the browser picks the closest available.

Using keywords like normal and bold is simpler and more compatible.

Font weight affects readability and style, so choose weights that fit your design and audience.

Summary

Font weight changes how thick or thin text looks.

You can use keywords like normal and bold, or numbers from 100 to 900.

Different weights help highlight or soften text in your design.