“Font-weight: bolder” for fonts with a variety of styles

If you use a font with multiple outlines, then you probably want the strong and b tags not to increase the font-weight:700 to a fixed font-weight:700 , as is the default, but to use intermediate values ​​calculated from the font weights. parent element.
After all, it is not very beautiful when the fat blots of the strong tags appear in the ultra-thin font.


Take for example Open Sans.


Open Sans has five styles: Light 300, Normal 400, Semi-Bold 600, Bold 700 and Extra-Bold 800.
The numbers correspond to the font-weight value.
')
Let the main text have the inscription Light 300, headings and quotes - Normal 400, and a promo block - Semi-Bold 600:

 body { font-family: 'Open Sans', sans-serif; font-weight: 300; } h1, h2, h3, h4, h5, h6, blockquote { font-weight: 400; } .promo { font-weight: 600; } 

The strong tag can appear in the main text, in quotations, and in the promotional block. It is necessary to take this into account.

Default:

 strong, b { font-weight: bold; /* bold = 700 */ } 

And we want strong and b to have a Normal 400 for the main text, Bold 700 for quotes and headings, and Extra-Bold 800 for the promo block. This will keep the contrast between bold and non-greasy text approximately equal in all cases.

I'm sure many have tried to use strong {font-weight: bolder;} , but this did not bring the expected result - the text became even fatter than expected.

That's because, according to the specification , the bolder ( lighter ) value increases (decreases) the inherited font-weight value to the next possible value for this font, according to the following table.

inherited value	bolder	lighter
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

But in the browser CSS it is spelled strong, b {font-weight: bold;} , i.e. the value “700” is inherited , and then it also increases to “900”. Therefore, it seems that the bolder is not working properly.

You can fix this by:

 /*   «bold»,         */ strong, b { font-weight: inherit; } /*  bolder         */ strong, b { font-weight: bolder; } 

Just like two separate rules. The first one sets the font-weight value from the browser style sheet to zero, the second sets the fatness in relative, not absolute, units.

Now we don’t have to worry about nesting the elements - the cascade will do everything automatically. We can attach strong tags to each other.


Nested tags "strong". Font thickness is determined based on the value of the parent element.
Demo

Restrictions

Using relative font-weight values, we get only three gradations of the bolder font for bolder and lighter respectively. The specification does not guarantee that browsers will correctly match the names of styles and numerical values. Does not guarantee that there will be a bold or thinner font for the font. Some fonts have only two styles, some may have eight.

The only guarantee when using bolder / lighter is that the font with the value “ bolder ” will not be thinner than the lighter features of this font, and with the value “ lighter ” it will not be thicker than the bold faces of this font.

To fine tune the weight of the font, you must use absolute values.

Bugs

If you have a font installed in the system, but is not connected via @font-face , then Google Chrome determines only Normal and Bold font styles. In order for the local font to work, you need to additionally specify its font-family .

 .fw300 { font-family: "Open Sans Light", "Open Sans"; font-weight: 300; } .fw600 { font-family: "Open Sans SemiBold", "Open Sans"; font-weight: 600; }