Search code examples
htmlcssinternet-explorer-11

Why is bolding already bolded text rendering as "super bold"?

Using this CSS:

body > h1.title {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin: 0.67em 0;
  font-family: Arial, Sans-Serif;
  color: orange;
  text-align: center;
  text-transform: uppercase;
}
<h1 class="title">Back To Basics Log</h1>

renders like

enter image description here

Then, if I add <b></b> or <strong></strong> tags in

<h1 class="title"><b>Back To Basics Log</b></h1>

it looks like

enter image description here

Super bold! I expected a bold tag on content that was already font-weight: bold; to be disregarded, but it's actually made it even bolder.

Is there a way to get the second version (the one I'm seeing with the <b> tags added) through CSS?

--- Edit ---

Actually, I just tried commenting out font-weight:bold; and changes nothing! Is this a problem with my font? Why isn't font-weight:bold; working?

--- Edit 2 ---

It seems like the font is already bold from earlier stylings. When I use "lighter" as a value, that as working, so it seems the font is already bold. So the only question left is "is it possible to get super bold using just css?

Solution

  • While the various links in the other posts may explain things, SO policy is to always have the answers on the same page as the questions, to avoid having to click all those links.

    Here we go then.

    The answer is in the browser's built in style sheets. h1 has font-weight: bold by default, and b and strong have font-weight: bolder.¹

    Now there are many different font weights. We don't have just normal and bold, we have 9 different ones, numbered 100 to 900.² The normal weight is 400, and the definition of bold is 700. The definition of bolder is "more bold than the font weight of the parent".

    So if you have a h1 with a b inside, the h1 will be bold (i.e. weight 700), and the b inside will be bolder (i.e. more bold than 700).

    That's basically all there is to it.
    Knowing this, there are multiple solutions:

    • Use a font that has only two weights.
      This is not the best way though. What if the next system update to the user's computer includes a version of this font with more weights?

    • Write b {font-weight: bold} in your stylesheet, or to be more thorough, h1 > * {font-weight: inherit}, so that the contents of the h1 will always be the same weight, no matter what.

    • Simply remove the <b> tags from the content of the h1. In this particular case, I don't see any reason to use them.

    • Or, leave everything as is and accept that you can put text inside a h1 that is even bolder. That might have its uses: <h1>Back to <strong>Basics!</strong></h1>

    ¹ This is not the case in all browsers though. That's why we need reset style sheets.

    ² Not all fonts have all font weights. Many have only two.