Text styling is a core part of web design, and bold text is commonly used for emphasis. However, there are cases where you need to remove bold formatting from elements — whether inherited from a parent or applied directly through tags like <b>, <strong>, or CSS.
In this guide, you’ll learn different ways to unbold text in HTML using HTML and CSS.
🎯 1. Understand How Bold Text Is Applied
Text can become bold in several ways:
- Using HTML tags:
<b>This is bold</b> <strong>This is bold too</strong> - Using CSS:
p { font-weight: bold; }
To unbold the text, you need to override or reset the font weight.
✅ 2. Use CSS to Unbold Text
The CSS property that controls boldness is font-weight.
Use font-weight: normal; to remove bold styling:
<p style="font-weight: normal;">This text is not bold</p>
Or with a class:
<p class="unbold">This text is not bold</p>
.unbold {
font-weight: normal;
}
This tells the browser to use the default weight (usually 400) instead of bold (usually 700).
🧠 3. Unbold Text Inside a Bold Context
If you’re dealing with bold text inside a bold parent (e.g., a <strong> or a section styled bold), you can target inner elements and reset their weight:
Example:
<strong>
This is bold text.
<span style="font-weight: normal;">This part is not bold.</span>
</strong>
This allows fine-grained control even within bold elements.
🚫 4. Avoid Using <b> or <strong> for Styling
If you want to control boldness purely for visual design, it’s better to use CSS instead of semantic tags like <strong>. Keep <strong> and <b> reserved for meaning and emphasis, and handle appearance with styles.
🔄 5. Overriding Inherited Bold Styles
If boldness is inherited from a parent, you can override it like this:
.parent {
font-weight: bold;
}
.child {
font-weight: normal; /* this will unbold */
}
<div class="parent">
Bold text
<span class="child">Not bold</span>
</div>
📌 Conclusion
To unbold text in HTML, the key is to set:
font-weight: normal;
Whether you’re undoing <b> or <strong>, or overriding inherited styles, this CSS rule will return your text to the normal weight.
