Working with Typography - Learn to Code HTML and CSS: Develop and Style Websites - page 100

Font Weight
Occasionally, we'll want to style text as bold or to change the specific weight of a typeface.
For these cases we'll use the font-weight property. The font-weight property ac-
cepts either keyword or numeric values.
Keyword values include normal , bold , bolder , lighter , and inherit . Of these
keyword values, it is recommended to primarily use normal and bold to change text
from normal to bold and vice versa. Rather than using the keyword values bolder or
lighter , it's better to use a numeric value for more specific control.
In practice, here's the CSS to set the font-weight to bold for any element with the
class of daring :
1. .daring {
2. font-weight: bold;
3. }
The numeric values 100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , and 900 pertain spe-
cifically to typefaces that have multiple weights. The order of these weights starts with the
thinnest weight, 100 , and scales up to the thickest weight, 900 . For reference, the keyword
value of normal maps to 400 and the keyword bold maps to 700 ; thus, any numeric
value below 400 will be fairly thin, and any value above 700 will be fairly thick.
Changing the font-weight to 600 for any element with the class of daring now
renders that text as semibold—not quite as thick as the bold keyword value from before:
1. .daring {
2. font-weight: 600;
3. }
Typeface Weights
Before using a numeric value, we need to check and see whether the typeface we
are using comes in the weight we'd like to use. Attempting to use a weight that's
not available for a given typeface will cause those styles to default to the closest
value.
For example, the Times New Roman typeface comes in two weights: normal , or
400 , and bold , or 700 . Attempting to use a weight of 900 will default the
typeface to the closest related weight, 700 in this case.