and typeface of the font, respectively. In addition, there are a number of other properties that can be used to further select fonts from within those families. These properties are font-weight, font-variant, font-style, font-stretch, and font-size-adjust. To understand how these properties work, it’s important to understand how CSS views fonts. A font in CSS is one specific instance of several properties: a specific typeface, size, weight, and other variables. So the font 12pt Arial bold italic is different from the font 10pt Arial. They are part of the same font family, of course. It’s helpful to remember that when you declare a font family, you’re actually selecting a group of fonts to be used. Other properties (or browser defaults) will narrow down the specific font. Font families generally include a number of variations on the base font, for example, an italic version of the font. In some cases, you will specify a font combination that simply isn’t available as a distinct variant. The browser will then have to create a variant on the fly by slanting the text to produce italic effects, for example, or by using the closest available equivalent in the font family. The effects produced by various font settings are listed in Table 8.1 for reference; this is because it’s not always clear which property controls which effect. TABLE 8.1 Properties Affecting Font Display Property Effect font-family Selects the typeface family font-size Sets the size of the font font-weight Makes text bold or lighter font-variant Creates “small caps” effect font-style Sets italic font font-stretch Stretches the font horizontally text-decoration (Hour 9) Underlines text color (Hour 9) Changes the color of text line-height (Hour 12) The height of the line (but not the text height) font Sets font-family, font-size, font-weight, font-variant, font-style, and line-height The font-weight Property The font-weight property controls how heavy a font appears—in other words, the thick- ness of the lines used to draw that font, relative to the size of the font. The weight of a 132 Hour 8 13 0672324091 ch08 6/13/02 10:35 AM Page 132 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. font is measured in numbers that range from 100 to 900,in steps of 100. The higher the number, the bolder the font; normal text has a weight of 400 and bold text (as created by the HTML <b> tag) has a weight of 700. Not all font families have specific fonts at all values; in such a situation, the browser will usually use the closest match. For example, if there’s no weight 800 variant for a font, the browser may substitute weight 700. Many browsers support only two to four font-weight values. Figure 8.1 shows how Opera 6 (Windows) displays each font-weight value of Verdana, whereas Figure 8.2 is from Internet Explorer 5.1 (Macintosh). Notice that they differ on whether weights 500 and 600 should be weighted like 400, 700,or somewhere in between. Keep this in mind; it will be important later on. Fonts and Font Families 133 8 FIGURE 8.1 Successive font- weight values of Verdana font, shown in Opera 6. In addition to numeric values, the font-weight property can take named values, as shown on Table 8.2. The font-weight value is inherited from the containing box if any is set. The default value is normal (400) for most HTML tags; some, such as <b>, <strong>, <h1> to <h6>, and <th>,will default to bold (700). 13 0672324091 ch08 6/13/02 10:35 AM Page 133 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. TABLE 8.2 Values for the font-weight Property Value Effect 100 to 900 Lightest (100) to heaviest (900) font weight bold Same as 700 bolder One step (+100) heavier than the containing box’s font-weight lighter One step (-100) lighter than the containing box’s font-weight normal Same as 400 inherit Uses the value of the containing box’s font-weight property If a font’s weight is already at 900,the value bolder won’t make it any heavier; likewise, if the font-weight is 100, lighter has no additional effect. 134 Hour 8 FIGURE 8.2 Successive font- weight values of Verdana font, shown in Internet Explorer 5.1 (Macintosh). I noted earlier that browsers aren’t consistent about how heavy they make in-between values, such as 500 or 600. Because bolder and lighter move up or down in steps of 100, it’s possible that a bolder (or lighter) rule may have no effect. If the default is 400, and the browser does not render 500 as 700 but as 400, an increase of 100 is meaningless. For this reason it’s proba- bly better to use explicit numeric values or the keyword bold for cross- browser consistency. 13 0672324091 ch08 6/13/02 10:35 AM Page 134 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. The font-variant Property Only one type of variant font can be set with the font-variant property, a variant where lowercase letters are represented with smaller versions of capital letters. The three possi- ble values for font-variant are shown in Table 8.3; the default value is normal, and if there is a value set on the containing box, it will be inherited. TABLE 8.3 Values for the font-variant Property Value Effect normal Uses normal lowercase letters small-caps Uses small capitals instead of lowercase letters inherit Uses the value of the containing box’s font-variant property An example of font-variant is shown in Figure 8.3; the rule used is #a { font-family: Verdana, sans-serif; font-variant: small-caps; } Fonts and Font Families 135 8 Workaround for Netscape 4 Netscape 4 doesn’t understand the font-weight value of lighter. To make fonts lighter in Netscape 4, give explicit numeric values, such as 200. FIGURE 8.3 Using font-variant: small-caps in Opera 6. 13 0672324091 ch08 6/13/02 10:35 AM Page 135 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. The font-style Property To set something in an italic or oblique font, you can use the font-style property; font-style is not used for anything else, although the name seems deceptively general. The values for font-style are shown in Table 8.4. If there’s a font-style property set on the containing box, it will be inherited. Otherwise, the default will usually be normal, although some HTML properties, such as <i>, <em>, and <address>,are normally itali- cized by Web browsers. TABLE 8.4 Values for the font-style Property Value Effect italic Uses an italic font normal Uses a non-oblique, non-italic font oblique Uses an oblique or slanted font inherit Uses the value of the containing box’s font-style property 136 Hour 8 What is oblique? Although it’s a less common term than italic, it’s a related concept. Most fonts we see are called Roman fonts; these are not slanted, and they correspond to the CSS value of normal. An italic font is created by making slanted, slightly curly alternate versions of the letters in a Roman font; each letter has been redesigned so that it’s essentially a new set of characters within the same font family. An oblique font, on the other hand, is created simply by tilting the Roman font’s characters at an angle. This doesn’t always require font redesign and can be done automatically by a computer, but often the results are not nearly as nice looking. Many typography books explicitly discourage the use of computer-created obliques. Browsers will treat italic and oblique property values the same because they don’t really know the difference most of the time. The CSS specification allows for italic fonts to be displayed as oblique (even oblique fonts generated automatically) if a match- ing italic font is not available. You’ll probably want to simply use italic; don’t worry about the difference unless you are a professional typographer, in which case you don’t need me to explain the difference between oblique and italic. 13 0672324091 ch08 6/13/02 10:35 AM Page 136 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Figure 8.4 shows the lack of difference between oblique and italic as displayed by current browsers; they’re both rendered the same, in slanted text. This is unfortunate for typographers, but for most of us it won’t be a major problem. The code used in this screenshot was <div style="font-style: normal;"> This is Roman text. </div> <div style="font-style: italic;"> This is italic text. </div> <div style="font-style: oblique;"> This is oblique text. </div> Fonts and Font Families 137 8 FIGURE 8.4 Oblique versus italic in Netscape 6. The font-stretch Property You can use the font-stretch property to select a thinner or wider font in CSS. Condensed type is narrower and looks as though it’s been pressed together from the left and right sides; conversely, expanded type looks as though it’s been pulled out and stretched to be wider. Values for font-stretch are shown in Table 8.5; the default is normal, and this value can be inherited from the containing box. 13 0672324091 ch08 6/13/02 10:35 AM Page 137 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. TABLE 8.5 Values for the font-stretch Property Value Effect ultra-condensed Most narrow extra-condensed Very narrow condensed Narrow semi-condensed Somewhat narrow normal Unchanged (default) semi-expanded Somewhat wider expanded Wide extra-expanded Very wide ultra-expanded Widest wider Increase by one step over inherited value narrower Decreases by one step below inherited value inherit Uses the font-stretch value of the containing box 138 Hour 8 Unfortunately, no browser currently supports the font-stretch property. This is the reason there’s no screenshot of these values in action. If you need to use a condensed font, you should name the specific condensed font as one of the fonts in font-family, such as h2.compressed { font-family: "Arial MT Condensed Light", Arial, sans-serif; } See the discussion later this hour on font availability. The font-size-adjust Property Not all fonts of the same point size look like they’re the same size. For example, 12- point Verdana looks much larger than 12-point Times New Roman. Why is that if they’re both 12 point? To understand the reason for that, and to understand how to use font-size-adjust, you need to understand how font sizes are measured. A font size is measured from the bottom baseline to the top of the capital letters; this unit is called the em, as we’ve discussed before and used in our CSS properties for borders, margins, and padding. Another unit of measure is the ex; the ex is the measurement from the bottom baseline up to the top of the lowercase letters (historically, this was measured to the top of a lower- case x). 13 0672324091 ch08 6/13/02 10:35 AM Page 138 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Fonts and Font Families 139 8 The ratio of the ex to the em is called the aspect value of the font. Fonts with larger aspect values are going to look larger because the uppercase letters will be the same size, but the lowercase letters will be taller and usually wider. This is why 12-point Verdana looks larger than 12-point Times New Roman; Verdana has a larger aspect value. Aspect values of common fonts are given in Table 8.6; these are listed in the CSS Level 2 specification. TABLE 8.6 Aspect Values for Typical Web Fonts Font Name Aspect Value Verdana 0.58 Comic Sans MS 0.52 Georgia 0.5 Times New Roman 0.46 So for Verdana, 1ex is 0.58em,whereas 1ex in Times New Roman is 0.46em. When you set the font-size property, the ex value is calculated automatically from the em size. You can use the ex unit in your designs—for example, setting the size of the margin to 3ex—but I advise against it. Because the ex varies considerably depending on the font and isn’t easily known in advance (unlike the em, which is based directly on font-size), the ex is a much less reliable measure than the em. The font-size-adjust property allows you to tweak the size of the ex,changing the aspect ratio to another value. You write a font-size-adjust rule like this: selector { font-size-adjust: aspect-value; } For example, to make your Verdana and Times New Roman fonts look closer to the same size, use this type of CSS rule: body { font-size: 12pt; font-family: Verdana, sans-serif; font-size-adjust: 0.46; } Like font-stretch, font-size-adjust is not supported by existing browsers. For this level of font control, you’ll have to wait for future CSS implementations. 13 0672324091 ch08 6/13/02 10:35 AM Page 139 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 140 Hour 8 Don’t overlook that first function, resetting to default values! You can easily spend hours trying to debug your style sheet. In addition to anything else a font rule does, it also is equivalent to the following declarations: font-family: serif; /* or the default browser font */ font-size: medium; font-weight: normal; font-variant: normal; font-style: normal; line-height: 100%; A font rule looks like this: selector { font: style variant weight size family; } The values for weight, size, and family must be specified in that exact order, but other than that the values can appear in any order. Any values that aren’t listed are set to their default values. Here are some examples of font shorthand rules: body { font: 12pt normal "Times New Roman"; } h1 { font: 20pt Arial italic small-caps; } blockquote { font: bold "Courier New", sans-serif; } When using font it’s important to keep in mind that the first function of this property is to reset values to their defaults; this means that priority order counts. For example, con- sider these pairs of rules: #a { font-weight: 700; font: large Verdana, sans-serif; } #b { font: large Verdana, sans-serif; font-weight: 700; } The font Shorthand Property As you’ve probably noticed this hour, there are quite a few properties that define a font. Rather than typing out each property, the font property allows you to set these values at one time. The font property is a shorthand property in CSS terminology. A shorthand value has two effects: it sets all affected properties to their default values, and it assigns designated values to the appropriate properties. The font property is shorthand for the font-family, font-size, font-weight, font-variant, font-style, and line-height properties. (You’ll learn about line-height and how to use it with font in Hour 12, “Alignment and Spacing.”) The font property doesn’t let you set values for font-stretch or font- size-adjust; these need to be set in separate rules. 13 0672324091 ch08 6/13/02 10:35 AM Page 140 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Fonts and Font Families 141 8 In the #a rules, the font-weight gets set to 700 by the font-weight property, but then the font property resets it to the default, so the weight is back to 400. The #b rules are in the correct order to make the text bold; first the font rule sets everything to default values, and then the specific rule for font-weight overrides the default. Font Families As you learned in Hour 2, the font-family property is used to select the family of font faces. A font-family rule can be written like this: selector { font-family: font1, font2, font3, generic; } You can give as many alternate fonts as you want; the browser will look through its own list (from the computer’s operating system) and locate the closest match. Once it finds one, it will display the text using that font face. For example, consider this rule: h1 { font-family: "MS Sans Serif", Palatino, Helvetica, "Bookman Old Style", "Times New Roman", Times, Garamond, Chicago, Arial, Geneva, Verdana, cursive; } The browser will start looking through the list of fonts, and if it finds a match, it will use that font. So on my Windows computer, it might find “MS Sans Serif” and dis- play the <h1> in that font; on my Apple iBook, it won’t find "MS Sans Serif" and will go on to the next one. If the iBook has Palatino (which it does), that’s the font family that will be used. The font property can also take values based on the user’s operating system fonts; these are discussed in detail in Hour 22, “User Interface and Generated Content.” Remember to include quotes around font names that are more than one word! The Generic Font Families In the long rule above, I included a generic font family name at the end—cursive. In case the browser can’t find any of the 11 named fonts, it will use the browser’s cursive font. The exact value of the cursive font will vary a lot from operating system to operat- ing system; also, modern browsers (such as Netscape 6 or Internet Explorer 5.1 for 13 0672324091 ch08 6/13/02 10:35 AM Page 141 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... colors on your inline links Navigation bars are a different case; even without underlines, users can tell they’re supposed to click on things that look like buttons or a list of options Removing underlines from navigation bars is acceptable and won’t cause problems Text Colors and Effects 161 The other side of the link-underlining coin is this: Users think that anything that is underlined is clickable... font families in Opera 6 (Windows) 143 8 144 Hour 8 Finally, Figure 8.8 shows how Internet Explorer on the Macintosh interprets the generic font families Compare these fonts with those in the previous figures, and you’ll find that there’s little regularity across browsers—or even within browsers or operating systems— when using fantasy and cursive families FIGURE 8.8 Generic font families in Internet Explorer... use color effectively in Web design • How to add or remove underlines from your text • How to add lines through or over your text • Which CSS property allows you to change the case of your letters • How to do text shadows in CSS, and which browsers support them Text Colors Colors are a key part of conveying information in a visual medium Giving distinct colors to certain types of information on a page... value for text-decoration in style sheets is none; the property is mainly used to turn off underlines rather than add them or any other text decorations Why is this so? Because you can use text-decoration to turn off the underlines on links by writing a:link and a:visited rules Many designers find underlined links to be annoyingly ugly and much less elegant than links without underlines However, there are... well; in most browsers you can reconfigure your generic font families depending on which fonts are installed on your system In Figure 8.5, you can see the generic font families as shown in Netscape 6, running on my iBook Macintosh laptop FIGURE 8.5 Generic font families in Netscape 6 (Macintosh) Figure 8.6 shows you what the generic font families look like in Internet Explorer 6, running on my Windows... the user to know what’s a link and what’s not If you’re going to remove one of the user’s primary cues to find clickable links, you need to make sure that the links are obvious Color typically isn’t enough by itself, even though Web developers like to think it should be If you’re using inline links—those within paragraphs of text—then you should probably leave the underlines alone An alternative approach... overline Draws a line over the top of the text underline Draws a line under the bottom of the text none None of the effects listed above inherit Uses the value of text-decoration on the containing box 9 160 Hour 9 The blink property value is not very popular, primarily due to serious abuse of the tag by designers when it was first introduced by Netscape The tag is nonstandard in HTML... to decorate! I think that decorating cakesHTML is lots of fun Here are some of my favorites: Underlined text (don't you want to click here?) Line-through text Overlined text continues 9 162 Hour 9 LISTING 9.1 Continued Blinking text (this is hard to show in print!) ... pfr fonts, and try using these programs to make font files Are they worth the effort? 8 HOUR 9 Text Colors and Effects Use of Cascading Style Sheets can transform a plain, boring page of text into a visual treat, without even using any graphics to do so The CSS specifications define ways to visually enhance your textual content, from changing the colors to adding drop shadows In this hour, you’ll learn... bother trying to use it, at least not with Year 2002 browsers If you use it, it won’t hurt anything, but it won’t do anything, either Browser support may exist in the future, but until that happens, there’s little point in using text-shadow Summary The foreground color of text can be set with the color property, as you’ve seen in previous hours You can set the color value in several ways, including color . containing box’s font-weight lighter One step (-100) lighter than the containing box’s font-weight normal Same as 400 inherit Uses the value of the containing. Widest wider Increase by one step over inherited value narrower Decreases by one step below inherited value inherit Uses the font-stretch value of the containing