How to unbold text in html

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.

Sharing Is Caring:

Leave a Comment