The Font-Weight Property

The font-weight property specifies the weight of the desired font within the current family.

Name:	font-weight
Value:	normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Initial:	normal
Applies to:	all elements
Inherited:	yes
Percentages:	N/A

This property has nine levels of weight:

• The nine values 100 to 900 form an ordered sequence, where each number indicates a weight that is at least as dark as its predecessor (100 is the lightest).

• normal is the same as 400.

• bold is the same as 700.

Two of the values, bolder and lighter, select a weight that is relative to the parent's weight.

The font-weight property is a superset of what is available for most families. Few families have the equivalent of all nine different weights. Hence, many of the CSS weight values result in the same font. On the other hand, some families, such as the Adobe's Multiple Master fonts, have an almost unlimited range. For those families, the browser selects nine of the possible weights and assigns them to the nine values.

Numerical values are used because we felt that descriptive words, other than normal and bold, could be potentially confusing. This is because no universal naming system for fonts exists. For example, a font that you might consider bold could be described, depending on the font, as Roman, Regular, Book, Medium, Semi-Bold, Demi-Bold, or numerous other names. These names are generally meaningful mainly within the family that uses them and differentiate fonts within that family. Outside that family, a name may have a different meaning. So, you cannot necessarily gauge the weight of a font from its name. In CSS1, the value normal (400) will have the weight that is normal for the specified font. What it means for another font may differ.

Figure 5.15 gives examples of the nine weights. These are only samples. Exactly what you get if you select a value of, say, 300 depends on the font you use, but Figure 5.15 helps you get some idea of how the weights vary.

Figure 5.15. Numerical values of the font-weight property.

The following are descriptions of the nine numerical values:

• 100 This is the lightest weight. Not many fonts have weights lighter than 400 ("normal"). Those that do, for which the browser would select the 100 value, often have "Thin," "Light," or "Extra-light" in their names. But font names are inconsistent in their descriptions, so we suggest that you don't rely on them. Let the browser figure out the weight of a font.

• 200 This is not usually any different from 100. However, it is included because some fonts, such as the Multiple Master fonts, have many weights.

• 300 This is slightly heavier than the 100 and 200.

• 400 This is available for all fonts. It corresponds to the normal keyword that the property offers. You can choose either the number or keyword.

• 500 This is slightly bolder than 400, but not by much. Some fonts have a weight called Medium, which is just a little bolder than the normal weight; 500 would result in that weight. If there is no such font, 500 will be the same as 400.

• 600 This is slightly bolder than 500. A weight name of Demi-bold or Semi-bold would correspond to the 600 weight.

• 700 This is available for most fonts. It corresponds to the bold keyword that the property offers. You can choose either the number or keyword.

• 800 This is heavier than the usual bold. Fonts that have such a weight may have "Extra-bold," "Black," or "Heavy" in their names. Other possibilities are Poster and Ultra.

• 900 This is the heaviest weight available in a font. Fonts with this weight often have rather strange names, such as Nord or Ultima. Or they may have cryptic numbers, often the case with Multiple Master fonts. Most fonts on the typical computer don't go beyond bold (700), so choosing either 800 or 900 results in the same effect as choosing 700.

The bolder and lighter values select a weight that is relative to the parent's weight. For example, consider this style sheet:

 P { font-weight: normal } /* same as 400 */ H1 { font-weight: 700 } /* same as bold */ STRONG ( font-weight: bolder }

In this example, a STRONG element that appears in either the P or H1 element will be bolder than its parent. However, the weight of STRONG when it appears in the P element may be less than its weight in the H1 element. This is because the parent elements' weights differ.

In this case, we say "may" because, as previously mentioned, the font used also plays a role in how bold type looks.

For more information on how fonts are assigned to the numerical scale for each font, we recommend you check the CSS specifications.