Applying Bold Formatting

Bold formatting is probably the most common and effective way to make text stand out. Using style sheets gives you much more flexibility with bold text, providing relative values or allowing you to get rid of it altogether.

Figure 10.11. Browsers add bold formatting to headers (like `h1` and `h2`) automatically. I can apply a normal font weight to remove it (since it's a bit much on this page). I've also added bold formatting to the `emph` class and to new and hovered links.

To apply bold formatting:

Type font-weight:.

Type bold to give an average bold weight to the text.

Or type bolder or lighter to use a value relative to the current weight.

Or type a multiple of 100 between 100 and 900, where 400 represents normal or book weight and 700 represents bold.

Figure 10.12. The headers are not so overbearing with the extra bold formatting removed. New links stand out (while visited ones are less obtrusive).

To remove bold formatting:

Type font-weight: normal.

Tips

Since the way weights are defined varies from font to font, the predefined values may not be relative from font to font. They are designed to be relative within a given font family.
If the font family has fewer than nine weights, or if they are concentrated on one end of the scale, it is possible that some numeric values will correspond to the same font weight.
What can you remove bold formatting from? Any tag where it's been applied automatically (strong and h1 come to mind) and where it's been inherited from a parent tag (see page 122).
The font-weight property is inherited.

Figure 10.11. Browsers add bold formatting to headers (like h1 and h2) automatically. I can apply a normal font weight to remove it (since it's a bit much on this page). I've also added bold formatting to the emph class and to new and hovered links.

Figure 10.12. The headers are not so overbearing with the extra bold formatting removed. New links stand out (while visited ones are less obtrusive).

Figure 10.13. The emphasized text (the word faith in the second to last line shown) is not only italic (from the preceding page) but also bold.

Figure 10.11. Browsers add bold formatting to headers (like `h1` and `h2`) automatically. I can apply a normal font weight to remove it (since it's a bit much on this page). I've also added bold formatting to the `emph` class and to new and hovered links.

Figure 10.13. The emphasized text (the word `faith` in the second to last line shown) is not only italic (from the preceding page) but also bold.