| Previous | Table of Contents | Next |
In this lesson and the next one, you learn to control the application of text attributes like boldface, italics, and underlining with styles.
Apart from the selection of a font family and a font size, there are several other attributes that you can apply to your text to emphasize certain passages or to contrast one block of text from another. These attributes should be familiar to users of word processing or desktop publishing software.
The CSS1 standard separates these text attributes into four different properties and are listed with their primary purpose:
This division of the attributes into different properties allows you to easily assign more than one to a single selector, and makes it possible to combine the attributes. It also allows you to control the removal of these attributes when they are inherited from parent elements without the need for the duplication of complex properties.
It still may seem odd that each of the properties listed has only one option, when the font-family and font-size properties, for example, have so many. This is because the listing shows only the options that are supported in the 3.0 version of Microsoft’s Internet Explorer. The CSS1 standard includes many useful font control features in these properties that are not yet supported by the Internet Explorer for a variety of reasons. The CSS1 standard is still undergoing development.
It is hoped that future versions of the browser (and of the other browsers promising support for style sheets) will allow the additional values for these properties to be used, as defined by the standard. With that in mind, these lessons will cover the unsupported options (while notating them), in order to show the potential value of HTML style sheets to web publishers.
The font-weight property controls the thickness of the lines that make up an alphabet. Anyone who has worked with HTML has used the <B> or <STRONG> tag to create boldface type. Styles allow you to combine the font-weight with other properties in a single style declaration to achieve an overall effect with a single tag that would require several different tags, using traditional HTML coding.
Font weights are defined in style declarations by specifying a keyword as the value for the font-weight property, as shown:
P {font-weight: bold}
The default weight is medium, which can be assigned to a child element to return it to its normal weight when a different value is inherited from a parent element. For example, to prevent a headline tag from using bold type, you would create a rule like this:
H1 {font-weight: medium}
Absolute Weights
The CSS1 standard defines seven possible absolute values for the font-weight property:
Explorer Support Internet Explorer 3.0 supports only the medium and bold values for the font-weight property. Any other specified value will be ignored.
The ideal situation for the use of these values would be a font that provides separate typestyle variants for all of the different weights shown. As with italics, a true font variant created by a designer is preferable to one that is approximated by software interpolation. However, few fonts are available in all of these weights. Of the six fonts included with the Internet Explorer, all have bold variants except for Impact, and none have variants for any other weights.
Future browser releases will no doubt offer support for more of the weights specified in the CSS1 standard, through interpolation if actual variants are not available. The results, as with boldface and italics, are always highly dependant on the individual font being modified.
Typestyle Variants Fonts often include alternate alphabets in various typestyles. Typically, a font family consists of a medium weight, a bold, an italic, and a bold italic. Other (usually more expensive) font packages may include various other weights in combination with italics, small caps, condensed type, or other special effects. You can see what variants are included with your fonts by looking in the Fonts Control Panel in Windows, where each of the variants is listed separately.
When a font includes a bold variant, specifying the bold value for the font-weight property causes the variant to be used. When a font does not include a bold variant, the browser approximates one by increasing the thickness of every letter in the alphabet by a uniform amount. Depending on the font and its size, the results of this technique may range from acceptable to miserable.
In Figure 9.1, if you look carefully, you can see the differences between the Times New Roman medium and bold faces, particularly in the lowercase letters e, o, and h, indicating that they have been individually designed for readability at their respective weights. The Impact boldface text doesn’t look nearly as good as the medium weight because the font does not include a bold variant. Each line has been fattened by the same amount everywhere, to the point at which the counters (the enclosed or hollow parts of the letters) look as though they are about to close up completely.
)
Figure 9.1 Fonts that include
variants for different typestyles are always preferable to software
approximations.
TIP: Specifying Variants Internet Explorer 3.0 may be incapable of simulating all the various weights indicated by the font-weight keywords, but if you are using a font that includes variants with their own names, you can use them in your web pages by specifying the full name of the variant as a value for the font-family property. For example, a font-family value of Helvetica Light causes the font of that name to be used, regardless of its weight. Be sure to specify the exact typeface name for the variant as it appears in a Windows application’s font selector.
To experiment with font weights, you can make changes in your SAMPLE.HTML file that modify the weights already defined in the styles for the ordered list you created in Lesson 5, as shown.
){kind=link}
OL LI {font-size: 110%;
font-weight: bold}
OL OL LI {font-size: 100%;
font-weight: medium}
OL OL OL LI {font-style: italic;
font-size: 90%;
font-weight: medium}
font-weight is an inherited property, so you must be conscious of your document’s HTML structure when you apply it. As with all of the text attributes that you can apply with styles, turning them off can be as important as turning them on. In the example just shown, the specification of the medium weight for the OL OL LI and OL OL OL LI selectors is necessary to override the bold value that is inherited from the OL LI selector.
Relative Weights
The CSS1 standard also defines two relative values for the font-weight property:
The bolder and lighter values modify the weights relative to the absolute value keywords listed earlier. font-weight is different from other properties because specifying a relative value causes the inherited weight to be increased or decreased by two units, not one. Therefore, application of the bolder value would cause an element inheriting a medium font-weight to skip the demi-bold weight and display as bold.
As always, the relative value is applied to the actual value of the parent element. In the next example, if the <BODY> tag is assigned a medium weight, and the <H1> tag is defined as bolder, a value of lighter applied to the <SPAN> tag would return the text to medium weight, as <SPAN> is the child element of <H1>.
<BODY> <H1><SPAN>T</SPAN>his is a headline.</H1> </BODY>
Explorer Support Because Internet Explorer 3.0 can only display two adjacent font weights, medium and bold, the relative values are not supported.
In this lesson, you learned how to modify the weight of selected text. In the next lesson, you modify other text attributes, such as italics and underlines.
 |
 |
 |