How to Bold Text Using CSS: A Complete Guide

Bold text is often used to emphasize important information, improve readability, and enhance the overall design of a webpage. In CSS, you can make text bold using the font-weight property.

In this blog, we’ll explore different ways to bold text using CSS, the values available for font-weight, and best practices for using bold styling effectively.

Using the font-weight Property to Bold Text

The font-weight property in CSS controls the thickness of the text. To make text bold, you can use the value bold or numerical values for finer control.

Example 1: Basic Bold Text with font-weight: bold;

p {
    font-weight: bold;
}

<p>This text is bold.</p>

This applies a bold font weight to all paragraph (<p>) elements.

---

Using Numerical Values for font-weight

CSS allows you to specify font-weight using numerical values ranging from 100 (thin) to 900 (extra bold).

Value	Weight
100	Thin
200	Extra Light
300	Light
400	Normal (default)
500	Medium
600	Semi-Bold
700	Bold
800	Extra Bold
900	Black (Heavy)

Example 2: Using Numerical Font Weights

.thin-text {
    font-weight: 200;
}

.normal-text {
    font-weight: 400;
}

.bold-text {
    font-weight: 700;
}

.extra-bold-text {
    font-weight: 900;
}

<p class="thin-text">This is thin text.</p>
<p class="normal-text">This is normal text.</p>
<p class="bold-text">This is bold text.</p>
<p class="extra-bold-text">This is extra bold text.</p>

🔹 Why Use Numerical Values?

• Some fonts support different weights beyond just “bold” and “normal.”
• It provides greater control over typography and styling.

---

Using Bold Text with Headings and Links

Most browsers apply bold styling to <h1>, <h2>, and <h3> elements by default. However, if you need to ensure consistency or override styles, you can explicitly define font-weight.

Example 3: Adjusting Heading Font Weight

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

h2 {
    font-weight: 700; /* Bold */
}

h3 {
    font-weight: 400; /* Normal */
}

If you want to remove the bold effect from headings, set font-weight: normal;.

Example 4: Making Links Bold

a {
    font-weight: bold;
    text-decoration: none;
}

<a href="#">This is a bold link</a>

This ensures the link stands out without the default underline.

---

Using strong and b Tags in HTML

In HTML, the <b> and <strong> tags make text bold, but they have different purposes:

• <b> makes text bold for visual styling only.
• <strong> makes text bold and gives it semantic meaning, helping screen readers recognize important content.

<p>This is <b>bold</b> text.</p>
<p>This is <strong>important</strong> text.</p>

🛑 Best Practice: Use <strong> when emphasizing important content, and use CSS for purely visual styling.

---

Combining Bold Text with Different Fonts

When applying bold styling, ensure the chosen font supports the desired weight. Some fonts only support normal and bold, while others offer multiple variations.

Example 5: Using a Custom Font with Bold Weight

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700;900&display=swap');

body {
    font-family: 'Roboto', sans-serif;
}

.bold-text {
    font-weight: 700; /* Uses the bold weight from the imported font */
}

This example loads the Roboto font with multiple weight options.

---

Best Practices for Using Bold Text in CSS

1. Use Bold Text for Emphasis, Not Decoration
   • Bold text should highlight key points without overwhelming the reader.
2. Ensure Readability
   • Use bold sparingly to avoid cluttered or difficult-to-read text.
3. Use strong for Meaningful Emphasis
   • Helps screen readers and improves accessibility.
4. Test Different Font Weights
   • Ensure the font you’re using supports the weight you apply.
5. Use Relative Font Weights for Consistency
   • Instead of font-weight: bold;, consider font-weight: 700; for more control.

---

Conclusion

The font-weight property in CSS provides flexibility for making text bold, whether using bold, numerical values, or custom fonts.

By following best practices, you can create well-structured, readable, and accessible content that enhances user experience.