CSS: what is the difference between "bolder" and "bold" font-weight styles?

Question

What is the difference between font-weight: bolder; and font-weight: bold; styles?

I never met such style until today, when I found it in our project's CSS file. Result is the same visually (tested on Ubuntu 10.10, Firefox 3.6.15).

Answer 1

bolder is a relative font weight:

The 'bolder' and 'lighter' values select font weights that are relative to the weight inherited from the parent

bolder and lighterare even part of the official spec. How they are interpreted and displayed is up to the browser.

The fact that they appear the same visually is because most browsers don't properly support font weight variations beyond bold and normal.

Here's a question with background info: Are all CSS font-weight property's values useful?

Answer 2

First we need to understand the difference between specified weight, computed weight and rendered weight.

For bold, the specified weight is "bold", the computed weight is "700" and the rendered weight depends on the font, and the only guarantee is that it won't be lighter than elements with lower computed weights. (i.e. Since "normal" equates to "400", "bold" will never be rendered lighter than "normal" is (though it could be rendered identically.)

For bolder, the specified weight is "bolder" and the computed weight is "400" if the container element has a computed weight of less than or equal to 300, otherwise "700" if the container element has a computed weight of less than or equal to 500, otherwise "900" The rendered weight again depends on the font with the same guarantee.

Since typefaces typically only natively support normal and bold weights, this often means that font-weight:bold and font-weight:bolder get rendered identically even if they have different computed weights.

But it doesn't have to be the case, even if the font only supports those two weights. In particular, if the container element has a computed weight less than "400", then "bolder" will compute to a weight of "400" and render the same as an element with a specified weight of "normal".

To illustrate this, see this JsFiddle: http://jsfiddle.net/UgAa5/ ¹

p { font-weight:300; font-size:2em } #scenario1 b { font-weight:bolder; } #scenario2 b { font-weight:bold; }

<p id="scenario1">     <span>plain</span>     <b>bold?</b> </p>      <p id="scenario2">     <span>plain</span>     <b>bold?</b> </p>

---

¹ _{Current versions of IE, Firefox, Chrome and Opera all demonstrate this correctly. Older browsers, such as Safari 5.1 do not.}

² _{The HTML5 spec says that the <b> element should have a default font-weight of "bolder". Firefox and IE do that, but webkit/blink based browsers default to "bold", and normalize.css applies a font-weight:bold setting to the <b> element for all browsers.}