CSS

CSS

🎯 What is CSS font-weight?

The font-weight property defines the thickness of text characters in CSS. It controls how light or bold the text appears on a webpage.

It is widely used to create visual hierarchy, emphasize headings, and improve readability in web design.

πŸ”Ή Basic Usage

CSS

p {
    font-weight: bold;
}

πŸ“Œ This makes paragraph text bold.

πŸ“š CSS font-weight Values

1️⃣ Keyword Values

  • normal β†’ Regular text (400)
  • bold β†’ Bold text (700)
  • bolder β†’ Thicker than parent
  • lighter β†’ Thinner than parent
CSS

h1 { font-weight: bold; }
p  { font-weight: normal; }
span { font-weight: lighter; }

2️⃣ Numeric Values (100 - 900)

You can define font thickness more precisely using numeric values.

CSS

h1 { font-weight: 900; }
h2 { font-weight: 700; }
p  { font-weight: 400; }
span { font-weight: 200; }
  • 100 β†’ Thin
  • 400 β†’ Normal
  • 700 β†’ Bold
  • 900 β†’ Extra bold

⚠️ Important Notes

  • Not all fonts support every weight value.
  • Some fonts only support normal and bold.
  • bolder and lighter are relative values.

  • 🧠 Summary

  • The font-weight property controls how thick or thin text appears.
  • It is used to create emphasis and visual hierarchy in typography.
  • Common values: normal, bold, 100–900.
CSS font-style
CSS font-variant