💪 Mastering font-weight in CSS

📌 Introduction

The font-weight property in CSS controls how bold or light your text appears. It's essential for creating hierarchy, emphasis, and a professional visual design. Proper usage improves readability and helps users quickly scan your content. ✨

🔍 What is font-weight?

The font-weight property specifies the thickness of characters. It can accept keyword values like normal, bold, or numeric values from 100–900.

Basic Usage

p {
  font-weight: bold;
}

🔢 Numeric Font Weights (100–900)

Many fonts support a range of numeric weight values. Lower numbers = lighter text, Higher numbers = bolder text.

ValueWeightExample Usage
100ThinSubtle headings
200Extra LightMinimal UI
300LightBody text (light themes)
400NormalStandard paragraphs
500MediumUI labels
600Semi BoldSubheadings
700BoldHeadings
800Extra BoldStrong emphasis
900BlackMaximum impact

Note

💡 Not all fonts support every numeric value. Some only support normal (400) and bold (700).

🧠 Keyword Values

  • 🔹 normal — Equivalent to 400
  • 🔹 bold — Equivalent to 700
  • 🔹 lighter — One level lighter than the parent
  • 🔹 bolder — One level bolder than the parent

Keyword Example

h1 {
  font-weight: bold;
}

p {
  font-weight: lighter;
}

🎯 Example: Using Numeric Weights

Numeric Weights

h1 {
  font-weight: 700;
}

h2 {
  font-weight: 600;
}

p {
  font-weight: 400;
}

small {
  font-weight: 300;
}

🔥 Using Variable Fonts

Modern variable fonts allow smooth transitions between weights, not just fixed values. This provides more control and better performance.

Variable Font Example

@font-face {
  font-family: "Inter";
  src: url("Inter-VariableFont.woff2") format("woff2-variations");
  font-weight: 100 900;
}

p {
  font-weight: 450; /* Works with variable fonts */
}

Note

💡 Variable fonts support any weight between the declared range (e.g., 100–900).

📸 Visual Demo

Further details can be found at: https://dummyimage.com/800x260/ddd/000&text=font-weight+100+to+900

🛠 Real-World Example

Here’s how weights are typically used in UI design:

UI Typography Example

.title {
  font-weight: 700;
}

.subtitle {
  font-weight: 500;
}

.body {
  font-weight: 400;
}

.caption {
  font-weight: 300;
}

💡 Best Practices

  • ✔️ Use 400 for normal text.
  • ✔️ Use 500–600 for subheadings.
  • ✔️ Use 700+ for main headings to create hierarchy.
  • ✔️ Avoid extremely heavy weights for long text.
  • ✔️ Check the font's supported weights before using numeric values.
>>“Typography is the voice of your design. Weight gives it emotion.”

🏁 Conclusion

The font-weight property is a powerful way to control how bold or light your text appears. By understanding keyword values, numeric weights, and variable fonts, you can create better visual structure and improve readability in your designs. 🎉