CSS
How to Bold Text in CSS (Complete Guide)
Making text bold in CSS is a fundamental styling technique that enhances readability, highlights key points, and improves user experience. CSS provides multiple ways to bold text, depending on your design needs.
In this blog, you’ll learn:
✅ How to bold text using font-weight
✅ How to bold specific words or phrases
✅ How to bold text with strong and b tags
✅ How to apply custom bold fonts
✅ Best practices for bold typography
1. Bold Text Using font-weight (Recommended Method)
The font-weight property in CSS allows you to control how bold or light the text appears.
Example 1: Basic Bold Text
.bold-text {
font-weight: bold;
}
<p class="bold-text">This text is bold.</p>
✅ Why use font-weight?
- Works with any text element (
p,span,h1, etc.). - Gives precise control over text weight.
2. Using Numeric Font Weights for More Control
Instead of just bold, you can use numeric values from 100 to 900 (if supported by the font).
Example 2: Different Font Weights
.light-text {
font-weight: 300; /* Lighter text */
}
.normal-text {
font-weight: 400; /* Default text */
}
.semi-bold-text {
font-weight: 600; /* Slightly bold */
}
.extra-bold-text {
font-weight: 900; /* Very bold */
}
<p class="light-text">This text is light.</p>
<p class="normal-text">This is normal text.</p>
<p class="semi-bold-text">This text is semi-bold.</p>
<p class="extra-bold-text">This text is extra bold.</p>
✅ Why use numeric weights?
- Allows fine-tuning of boldness.
- Some fonts offer extra-bold styles beyond just
bold.
3. Bold Specific Words or Phrases
If you only want to bold a single word or phrase, wrap it in a <span> and apply font-weight: bold;.
Example 3: Bold Within a Sentence
<p>This is a <span class="bold-text">bold word</span> in a sentence.</p>
.bold-text {
font-weight: bold;
}
✅ Why use <span>?
- Keeps HTML clean and semantic.
- Works well for inline styling.
4. Bold Text Using <strong> and <b> Tags
HTML provides two built-in ways to bold text:
<strong>(semantic, for important text)<b>(non-semantic, for styling only)
Example 4: <strong> vs <b>
<p>This is <strong>important bold text</strong>.</p>
<p>This is <b>just visually bold text</b>.</p>
✅ Which one should you use?
✔ Use <strong> when text has meaning (e.g., warnings, key points).
✔ Use <b> for visual emphasis without meaning (e.g., styling purposes).
5. Using Custom Bold Fonts (Google Fonts & Local Fonts)
Some fonts have built-in bold variations, and you can load them with Google Fonts or locally stored files.
Example 5: Using Google Fonts
<head>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
}
.bold-text {
font-weight: 700; /* Uses bold version of Poppins */
}
</style>
</head>
<body>
<p class="bold-text">This text is bold with a custom font.</p>
</body>
✅ Why use custom fonts?
- Provides better typography.
- Supports different levels of boldness.
6. Best Practices for Using Bold Text in CSS
✅ Use font-weight: bold; or numeric values for flexibility.
✅ Prefer <strong> for important content (better for SEO & accessibility).
✅ Use <b> only for styling purposes.
✅ Limit excessive bolding to avoid visual clutter.
✅ Load bold font variations from Google Fonts for better design control.
Conclusion
Bolding text in CSS is simple yet powerful. You can use font-weight, HTML tags, or custom fonts to create clear, readable, and visually appealing text.
By applying these techniques, you can enhance readability, improve UI design, and create better typography in your projects.