Font-weight

If you have ever done any wordprocessing using e.g. Word you definitely know of the opportunity to use bold, italics and underlined text. When writing CSS, these characteristics are spread over several properties and this is why I have grouped them together into a single chapter.

The font-weight property

The font-weight property defines how bold you text are and there are a lot of possible values; normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, and inherit.

Let's have a look at the easy-to-understand part - the numerical scale consisting of the numbers 100-900. These values range from lightest (100) to boldest (900).

Here is a rough guide to match the numerical scale with the most common weight terms:

• 100: Thin, Hairline, Ultra-light, Extra-light
• 200: Light
• 300: Book
• 400: Regular, Normal, Plain, Roman, Standard
• 500: Medium
• 600: Semi-bold, Demi-bold
• 700: Bold
• 800: Heavy, Black, Extra-bold
• 900: Ultra-black, Extra-black, Ultra-bold, Heavy-black, Fat, Poster

Here is an example - I've used classes to style the two paragraphs differently but you could just as well have used inline style;

<style>
.weight200 {font-weight:200 }
.weight800 {font-weight:800 }
</style>
<p class="weight200">To travel is to live - H. C. Andersen </p>
<p class="weight800"> To travel is to live - H. C. Andersen </p>

As you can see, there is a difference between the two sentences. 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. The value '400' equals normal and the value '700' equals bold.

Furthermore, 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;

<p style="font-weight: 100;">To travel is to live - H. C. Andersen </p>
<p style="font-weight: 200;">To travel is to live - H. C. Andersen </p>
<p style="font-weight: 300;">To travel is to live - H. C. Andersen </p>
<p style="font-weight: 400;">To travel is to live - H. C. Andersen </p>
<p style="font-weight: 500;">To travel is to live - H. C. Andersen </p>
<p style="font-weight: 600;">To travel is to live - H. C. Andersen </p>
<p style="font-weight: 700;">To travel is to live - H. C. Andersen </p>
<p style="font-weight: 800;">To travel is to live - H. C. Andersen </p>
<p style="font-weight: 900;">To travel is to live - H. C. Andersen </p>

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 difference between font-weight:bold and font-weight:bolder

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. This comes in handy if you use a font-family with three or more weights.

Below is an example of how you could use the 'bolder' value to emphasize sentences visually. (But before you do this, please have a look at my article about the <em>, <strong>, <i>, and <b> tags over at my HTML5 tutorial!)

<style>
p {font-weight: normal;}
.bolderText {font-weight:bolder;}
</style>
<p>For people could close their eyes to greatness, to horrors, to beauty, and their ears to melodies or deceiving words. <span class="bolderText">But they couldn't escape scent</span>.</p>
<p >And scent entered into their very core, went directly to their hearts, and decided for good and all between affection and contempt, disgust and lust, love and hate. </p>
<p><span class="bolderText">He who ruled scent ruled the hearts of men</span>.</p>

As you can see, the sentences highlighted with the 'bolderText' class is actually bolder.