
This comes in handy if you use a font-family with three or more weights.īelow is an example of how you could use the 'bolder' value to emphasize sentences visually. What is the difference between font-weight:bold and font-weight:bolder you might ask? The 'bolder' and 'lighter' values select font weights that are relative to the inherited (parent) font weight where as the 'bold' value simply change the font's weight to bold. The difference between font-weight:bold and font-weight:bolder

If you want to have the opportunity to use more weights, you should have a look at GoogleFonts as a part of their fonts have 3-4 different weights. The value '400' equals normal and the value '700' equals bold.įurthermore, most browsers does not render the font-weight correctly and only differentiate between normal and bold - have a look at the following example and you can see the problem for yourself To travel is to live - H. But you should be aware that most webfonts do not have more than two or three weights, and weight such as 'light' or 'semi-bold' is rare. Here is an example - I've used classes to style the two paragraphs differently but you could just as well have used inline style Īs you can see, there is a difference between the two sentences.

