How to Make Text Bold in CSS?

Making text bold in CSS is a simple yet essential styling technique that enhances readability and emphasizes important content.

In this blog, we’ll explore different ways to bold text using CSS, including the font-weight property, HTML elements, and advanced styling techniques.

1. Using the font-weight Property (Recommended Method)

The most common way to make text bold in CSS is by using the font-weight property.

Example: Basic Bold Text

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

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

✔ font-weight: bold; makes the text bold using the default bold weight of the font.

2. Using Numerical Values for font-weight

Instead of using bold, you can specify numeric values for different levels of boldness:

.thin { font-weight: 100; }  /* Very thin */
.normal { font-weight: 400; } /* Default */
.semibold { font-weight: 600; } /* Semi-bold */
.bold { font-weight: 700; }  /* Bold */
.extrabold { font-weight: 900; } /* Extra bold */

<p class="bold">This text is bold.</p>
<p class="extrabold">This text is extra bold.</p>

✔ This method allows precise control over the boldness of text, depending on the font.

3. Using the <strong> or <b> HTML Tags

In HTML, you can make text bold using <b> or <strong>.

<p>This is a <b>bold text</b> using the `<b>` tag.</p>
<p>This is a <strong>bold text</strong> using the `<strong>` tag.</p>

✔ <strong> is preferred for accessibility and SEO because it conveys meaning (important text), while <b> is purely for styling.

4. Applying Bold to Specific Elements

You can apply bold styling to specific HTML elements like headings, paragraphs, or spans.

h1, h2 {
    font-weight: bold;
}

span.highlight {
    font-weight: 700;
}

<h1>This heading is bold.</h1>
<p>This is a <span class="highlight">bold section</span> in a paragraph.</p>

✔ This approach helps you maintain consistency across your website.

5. Using Google Fonts for Custom Bold Styling

Some fonts support different bold weights. You can import a Google Font and set a custom font-weight.

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

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

.bold {
    font-weight: 700; /* Using a custom bold weight */
}

<p class="bold">This text uses Google Fonts with a bold style.</p>

✔ This allows for more control over typography and style.

Conclusion

To make text bold in CSS:

✔ Use font-weight: bold; for a standard bold effect.
✔ Use numeric values (100–900) for precise control.
✔ Use <strong> instead of <b> for semantic importance.
✔ Apply bold styling to specific elements for consistency.
✔ Use Google Fonts for custom typography.