Tag font-weight

🖋️ CSS font-weight: Controlling Text Boldness with Precision

The weight of your font dramatically impacts the tone, readability, and hierarchy of your content. The CSS font-weightproperty lets you adjust the thickness of your text, from ultra-light to extra-bold, helping you guide your readers’ attention and create a balanced design.

🧾 What is font-weight?

font-weight defines the weight (thickness) of the font characters. It’s typically used to make text appear lighter or bolder.

🧬 Syntax

selector {
  font-weight: normal | bold | lighter | bolder | <number>;
}

🎯 Values Explained

ValueDescription
normalDefault weight (usually 400)
boldBold weight (usually 700)
lighterLighter than the parent element’s weight
bolderBolder than the parent element’s weight
100 – 900Numeric weights from thin (100) to black (900) in increments of 100

🎯 Example Usage

p.normal {
  font-weight: normal; /* Standard weight */
}

p.bold {
  font-weight: bold; /* Bold text */
}

h1 {
  font-weight: 900; /* Extra bold */
}

h2 {
  font-weight: 300; /* Light */
}

🧠 How It Works

  • Numeric weights range from 100 (thin) to 900 (extra-black).
  • Not all fonts support all weights — some may only have normal and bold.
  • When a specific weight is not available, browsers simulate it by adjusting the stroke thickness.
  • The keywords lighter and bolder are relative to the parent element’s font weight.

🛠️ Tips & Best Practices

  • Use numeric weights for precise control when supported by your font.
  • Pair font-weight with font-family to ensure your font supports the desired weights.
  • Use bold sparingly to highlight important content without overwhelming.
  • Combine with other font properties for clear visual hierarchy (e.g., size, style).
  • Variable fonts allow continuous weight adjustment, offering smooth transitions.

✅ Browser Support

font-weight enjoys wide support:

  • ✅ Chrome
  • ✅ Firefox
  • ✅ Safari
  • ✅ Edge
  • ✅ Internet Explorer 6+

🔚 Conclusion

The font-weight property is essential for controlling text emphasis and hierarchy. Whether you want a sleek light font or a commanding bold headline, font-weight helps you express the right tone and clarity.