HTML Unbold Text

To remove bold styling from selected HTML heading text, set that text’s CSS font-weight to normal. Wrap only the words you want to change in a <span> and target that span with a CSS class. The heading remains an h1 or another heading, so its structure and semantic importance stay the same. If the whole heading should change, apply the rule to the heading instead.

Remove Bold Styling From Part of a Heading

A <span> groups inline text without changing the meaning or heading level of its parent. Place the span around only the words that should have a normal weight; text outside it keeps the heading’s other styling. For a reusable change, add a class to that span and define the class in a stylesheet or a <style> element in the document head.

Use a CSS Class for Selected Text

The following runnable JavaScript example generates a complete HTML fragment with a class rule and a heading. Use the output as page markup, then adapt the heading and selected words. The .not-bold selector matches only spans carrying that class, so other spans keep their existing styles.

Run this example to generate the class-based page fragment:

const page = `<style>
.not-bold { font-weight: normal; }
</style>
<h1>Keep this bold; <span class="not-bold">make these words normal weight</span></h1>`;
console.log(page);

<style>
.not-bold { font-weight: normal; }
</style>
<h1>Keep this bold; <span class="not-bold">make these words normal weight</span></h1>

Use this class wherever the same visual treatment is needed. Avoid a broad span selector when only selected text should change: it matches every span in its scope, including spans in unrelated content. A class keeps the target explicit and reduces unintended changes when the page grows.

Use Inline CSS for a One-Off Override

For a single local change, put the declaration in the span’s HTML style attribute: <span style="font-weight: normal">selected words</span>. This is quick when the change is unique, but less reusable than a class because the presentation is attached directly to that element. Keep the declaration on the span so the rest of the heading retains its styling. If several elements need the same treatment, move the declaration into a class rule instead.

Remove Bold Styling From an Entire Heading

To change the whole heading, set font-weight: normal on the heading itself, for example: <h1 style="font-weight: normal">A normal-weight heading</h1>. This applies to all text in that heading, including any inline content inside it. Use a stylesheet rule instead of an inline style attribute when the same treatment should apply to multiple headings or pages. Changing visual weight does not change the heading level or its role in the document outline.

Choose an Approach and Check the Result

Use a class for selected text that needs a reusable rule, inline CSS for a one-off span, and a heading rule when the entire heading should change. After applying the rule, inspect the rendered page: confirm that the class is on the intended span and that the CSS selector matches it. If the text still looks bold, check other applicable styles in the page’s stylesheets, including more specific or later rules, and inspect the computed font-weight in browser developer tools. This helps identify whether the selector missed its target or another rule determines the displayed weight.