How to Unbold Text in HTML Using CSS

Bold text is often used to highlight key content, but sometimes you need to remove bold styling—especially when you’re working with inherited styles or third-party templates. Luckily, HTML and CSS give you full control over text formatting, including how to unbold text effectively.

In this blog post, you’ll learn:

• ✅ How bold styling works in HTML
• 🎯 How to unbold text using CSS
• 💡 Practical examples for removing bold text in different scenarios

---

✅ How Text Gets Bolded in HTML

Text can become bold in a few different ways:

1. Using Bold Tags

<b>This is bold</b>
<strong>This is also bold</strong>

2. Via CSS

p {
  font-weight: bold;
}

Sometimes elements like headings (<h1> to <h6>) are bold by default in browsers.

---

🔓 How to Unbold Text in HTML

To remove boldness from text, you’ll use the CSS property:

font-weight: normal;

This explicitly resets the font weight to the default (usually 400, depending on the font).

---

🧪 Practical Examples

✅ Example 1: Unbolding a <b> or <strong> Tag

<span class="no-bold"><strong>Unbold this text</strong></span>

.no-bold {
  font-weight: normal;
}

✅ This overrides the default bold style of <strong>.

---

✅ Example 2: Unbolding a Heading Tag

By default, headings like <h1> are bold.

<h1 class="no-bold-heading">Unbold Heading</h1>

.no-bold-heading {
  font-weight: normal;
}

✅ This will make your heading text render like regular paragraph text.

---

✅ Example 3: Unbolding Inherited Styles

If a parent element applies boldness, you can override it for a child:

<div style="font-weight: bold;">
  Parent is bold.
  <span style="font-weight: normal;">This part is unbold.</span>
</div>

---

🎯 Common Font Weight Values

Value	Description
normal	Standard text weight (400)
bold	Bold text weight (700)
lighter	Lighter than the parent
100–900	Numeric font weights

---

✅ Final Thoughts

To unbold text in HTML, all you need is:

font-weight: normal;

Use it with any tag (<b>, <strong>, <h1>, etc.) to override inherited or default bold styles. It’s a small tweak, but it can help fine-tune your typography and design for a cleaner, more consistent look.