How to Fix Bold & Strong Text Being Too Thick in CSS & WordPress

Some fonts look too thick when used within <b></b>, <bold></bold> and <strong></strong> elements. Here’s a quick CSS fix to make the bold and strong fonts thinner, so they don’t look too obtrusive when used in the same paragraph with text that has a normal font weight.

To make the bold / strong text semi-bold for a bit thinner look use this CSS code:

b, bold, strong {font-weight:600}
 

If it’s still too bold and strong, make it thinner by choosing the medium weight instead of semi-bold.

b, bold, strong {font-weight:500}

In CSS the 700 weight typically equals to bold, 600 is semi-bold, while 500 is medium. 500 is a bit thicker than the 400 normal.

Some fonts may not have all of these weights. They may come with only one normal and one bold variant. In that case the CSS trick won’t work, so you have to use some other font with a thinner bold variant or a font with a greater range of weights.

If you are using WordPress, add the code to the Additional CSS section within the Styles section or in [yourdomain]/wp-admin/customize.php.

As a side note, here’s another situation where boldness can be exaggerated. If in your CSS stylesheet an element like H2, for example, is set to a bold weight like 700 and you additionally put it in the <strong> or <b> element when editing text, the boldness will increase. To reverse that, just select and un-bold the H2 text in the editor. There’s no need to use both H2 and strong / b on the same piece of text.