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

Question

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
Then, if I add <b></b> or <strong></strong> tags in
<h1 class="title"><b>Back To Basics Log</b></h1>
it looks like
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?

Answer 1

Valid keywords for font-weights are:
lighter
normal
bold
bolder
So you might want to test bolder. Or numeric font weights in the range 100, 200, 300, 400, 500, 600, 700, 800, 900
Different fonts are only available in certain weights so you may need to experiment. For more info see https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

Answer 2

You can use font-weight: 900 instead of font-weight: bold. Because 900 is maximum value for this property and bold is the same as 700.
For example:
.title {
font-size: 2em;
font-weight: 900;
margin: 0.67em 0;
page-break-after: avoid;
font-family: Arial, Sans-Serif;
color: orange;
text-align: center;
text-transform: uppercase;
}
<h1 class="title">Back To Basics Log</h1>

Answer 3

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.

Answer 4

While looking for the answer to this question, I found that there is a different behavior among different browsers.
(I tested Chrome (Version 72.0.3616.0) and Internet Explorer 11)
<strong><span style="font-weight: bold;">Bold in Chrome, Super Bold in IE</span></strong>
<strong> with CSS font-weight: bold renders as bold in Chrome font-weight: 700; while IE sums things up ending with super-bold font-weight: 900;