Part III: CSS for Presentation 206 The Font Properties Serif Decorative serif stroke Straight strokes Sans-serif Times Georgia Times New Roman Lucida (Mac) Veranda Trebuchet MS Arial Arial Black Courier Courier New Andale Mono Comic Sans Snell Stencil Mojo Apple Chancery Imapct Monospace Cursive Fantasy Monospace font (equal widths) Proportional font (different widths) Figure 12-2. Examples of the five generic font families. Font specifying strategies The best practice for specifying fonts for web pages is to start with your first choice, provide some similar alternatives, then end with a generic font family that at least gets users in the right stylistic ballpark. Here’s another example of this strategy in action. With this style rule, I specify that I’d prefer that users see all the text in Verdana, but I’d settle for Arial, or Helvetica, or, if all else fails, I’ll let the browser choose an available sans-serif font for me. body { font-family: Verdana, Arial, Helvetica, sans-serif; } Because a font will only show up if it’s on a user’s hard drive, it makes sense to specify fonts that are the most commonly available. Although there are countless fonts out there, the fact is that because licensed copies of fonts cost big bucks, most users stick with the fonts that are installed by their operating You’ll find that the majority of professional web sites use Verdana because it was specially designed to be legible at small sizes on computer monitors. This is a common value line-up for font-family : Verdana, Arial, sans-serif D e S I G n t I P You’ll find that the majority of professional web sites use Verdana because it was specially designed to be legible at small sizes on computer monitors. This is a common value line-up for font-family : Verdana, Arial, sans-serif D e S I G n t I P The Font Properties Chapter 12, Formatting Text 207 system or other applications. Font copyright also prevents designers from just making cool fonts available for download. For these reasons, web designers tend to specify fonts from the Microsoft Core Web Fonts collection. These come installed with Windows, Internet Explorer, and Microsoft Office, so it is likely that they will find their way onto all Windows and even most Apple and Linux computers. Not only are they widely available, they were designed to be legible on low-resolution computer screens. Table 12-1 lists the fonts in the collection. Table 12-1. Core Web Fonts from Microsoft Serif Georgia, Times New Roman Sans Serif Arial, Arial Black, Trebuchet MS, Verdana Monospace Courier New, Andale Mono Miscellaneous Comic Sans, Impact, Webdings So, as you see, specifying fonts for the Web is more like merely suggesting them. You don’t have absolute control over which font your users will see. It’s one of those web design quirks you learn to live with. Now seems like a good time to get started formatting the Black Goose Bistro menu. We’ll add new style rules one at a time as we learn each new property. N o t e There are techniques for using graphics and even small Flash movies for head- lines in order to achieve more stylized typography than can be handled with CSS alone. These image replacement techniques are not appropriate for large amounts of text, however. Read more about image replacement in Chapter 17, CSS Techniques. N o t e There are techniques for using graphics and even small Flash movies for head- lines in order to achieve more stylized typography than can be handled with CSS alone. These image replacement techniques are not appropriate for large amounts of text, however. Read more about image replacement in Chapter 17, CSS Techniques. exercise 12-1 | Formatting a menu In this exercise, we’ll add font properties to the Black Goose Bistro menu document, menu-summer.html, that you marked up back in Chapter 5. A fresh and validated copy, complete with DOCTYPE declaration, is available at www.learningwebdesign. com/materials. Open the document in a text editor. You can also open it in a browser to see its “before” state. It should look similar to the page shown in Figure 12-1. Hang onto this document, because this exercise will continue as we pick up additional font properties. We’re going to use an embedded style sheet for this exercise. Start by adding a style element with its required type attribute to the head of the document (remember, the only place a style element can go is in the head ), like this: <head> <title>Black Goose Bistro</title> <style type="text/css"> </style> </head> 1. exercise 12-1 | Formatting a menu In this exercise, we’ll add font properties to the Black Goose Bistro menu document, menu-summer.html, that you marked up back in Chapter 5. A fresh and validated copy, complete with DOCTYPE declaration, is available at www.learningwebdesign. com/materials. Open the document in a text editor. You can also open it in a browser to see its “before” state. It should look similar to the page shown in Figure 12-1. Hang onto this document, because this exercise will continue as we pick up additional font properties. We’re going to use an embedded style sheet for this exercise. Start by adding a style element with its required type attribute to the head of the document (remember, the only place a style element can go is in the head ), like this: <head> <title>Black Goose Bistro</title> <style type="text/css"> </style> </head> 1. N o t e If your browser is configured to use Verdana or a sans-serif font as its default font, you won’t see much of a change after adding this rule. Hang in there, more changes are to come. N o t e If your browser is configured to use Verdana or a sans-serif font as its default font, you won’t see much of a change after adding this rule. Hang in there, more changes are to come. Part III: CSS for Presentation 208 The Font Properties Specifying font size Use the aptly-named font-size property to specify the size of the text. font-size Values: length unit, percentage, xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | inherit Default: medium Applies to: all elements Inherits: yes You can specify text in a several ways: At a specific size using one of the CSS length units (see the sidebar, CSS Units of Measurement, for a complete list), as shown here: h1 { font-size: 1.5em; } When specifying a number of units, be sure the unit abbreviation imme- diately follows the number, with no extra character space in between: INCORRECT h1 { font-size: 1.5 em; } /*space before the em*/ • CSS Units of Measurement CSS2 provides a variety of units of measurement. They fall into two broad categories: absolute and relative. Absolute units Absolute units have predefined meanings or real-world equivalents. pt points (1/72 inch in CSS2.1) pc picas (1 pica = 12 points) mm millimeters cm centimeters in inches Absolute units should be avoided for web page style sheets because they are not relevant on computer screens. However, if you are creating a style sheet to be used when the document is printed, they may be just the ticket. Relative units Relative units are based on the size of something else, such as the default text size, or the size of the parent element. em a unit of measurement equal to the current font size. ex approximately the height of a lowercase “x” in the font. px pixel, considered relative because it varies with display resolution, particularly between low resolution screens and high resolution print output. % percentage values, although not a unit of measurement, are another way to specify relative size. It is recommended that you stick with ems, percentage values, or a combination of the two when specifying text size. CSS Units of Measurement CSS2 provides a variety of units of measurement. They fall into two broad categories: absolute and relative. Absolute units Absolute units have predefined meanings or real-world equivalents. pt points (1/72 inch in CSS2.1) pc picas (1 pica = 12 points) mm millimeters cm centimeters in inches Absolute units should be avoided for web page style sheets because they are not relevant on computer screens. However, if you are creating a style sheet to be used when the document is printed, they may be just the ticket. Relative units Relative units are based on the size of something else, such as the default text size, or the size of the parent element. em a unit of measurement equal to the current font size. ex approximately the height of a lowercase “x” in the font. px pixel, considered relative because it varies with display resolution, particularly between low resolution screens and high resolution print output. % percentage values, although not a unit of measurement, are another way to specify relative size. It is recommended that you stick with ems, percentage values, or a combination of the two when specifying text size. I would like all the text on the page to appear in Verdana or some other sans-serif font. Instead of writing a rule for every element in the document, we will write one rule for the body element that will be inherited by all the elements it contains. Add this rule to the embedded style sheet. <style type="text/css"> body {font-family: Verdana, sans-serif;} </style> Save the document and reload the page in the browser. It should look like Figure 12- 3. We’ll work on the font size in the next installment. 2. Figure 12-3. The menu in the Verdana or sans-serif font.Figure 12-3. The menu in the Verdana or sans-serif font. The Font Properties Chapter 12, Formatting Text 209 As a percentage value, sized up or down from the element’s default or inherited font size: h1 { font-size: 150%; } Using one of the absolute keywords (xx-small, x-small, small, medium, large, x-large, xx-large). On most current browsers, medium corresponds to the default font size: h1 { font-size: x-large; } Using a relative keyword (larger or smaller) to nudge the text larger or smaller than the surrounding text: strong { font-size: larger; } I’m going to cut to the chase and tell you that, despite all these options, the only acceptable values for font-size in contemporary web design are em measurements, percentage values, and keywords. These are preferred because they allow users to resize text using the text-zoom feature on their browser. This means you can size the text as you prefer it (generally smaller than the most common default 16 pixel text), but still rest assured that users can make it larger if they have special needs or preferences. While it may be tempting to specify text in actual pixel measurements, Internet Explorer (all versions) does not allow text-zoom on type sized in pixels. That means users are stuck with your 10 or 11 pixel type, even if they are unable to read it. That’s a big no-no in terms of accessibility. In addition, all of the abso- lute units such as pt, pc, in, mm, and cm are out because they are irrelevant on computer monitors (although they may be useful for print style sheets). Working with keywords Many web designers like to specify type size using one of the predefined absolute keywords: xx-small, x-small, small, medium, large, x-large, xx- large. The keywords do not correspond to particular measurements, but rather are scaled consistently in relation to one another. The default size is medium in current browsers. Figure 12-4 shows how each of the absolute keywords renders in a browser when the default text is set at 16 pixels. I’ve included samples in Verdana and Times to show that, even with the same base size, there is a big difference in legibility at sizes small and below. Figure 12-4. Text sized with absolute keywords. • • • Part III: CSS for Presentation 210 The Font Properties The benefit of keywords is that current browsers in Standards Mode will never let text sized in keywords render smaller than 9 pixels, so they protect against illegible type (although I would still opt for Verdana for better readability). On the downside, the size keywords are imprecise and unpredictable. For example, while most browsers scale each level up by 120%, some browsers use a scaling factor of 150%. Another notable problem is that Internet Explorer 5 and 5.5 for Windows use small as the default (not medium), meaning your text will display a lot smaller for users with those browsers. Fortunately, with the introduction of IE 7, these old versions are slowly going away. The relative keywords, larger and smaller, are used to shift the size of text relative to the size of the parent element text. The exact amount of the size change is determined by each browser, and is out of your control. Despite that limitation, it is an easy way to nudge type a bit larger or smaller if the exact proportions are not critical. Figure 12-5 shows the result of this simple bit of markup (note that the inline styles were used just to keep the example compact). <p>There are two relative keywords: <span style="font-size: larger">larger</span> and <span style="font-size: smaller">smaller</span>. They are used to shift the size of text relative to the parent element.</p> Figure 12-5. Relative size keywords make text slightly larger or smaller than the surrounding text. Working with percentages and ems By far the most popular way to specify font sizes for the Web is using em measurements or percentage values, or a combination of the two. Both ems and percentages are relative measurements, which means they are based on another font size, namely, the font-size of the parent element. In this example, the font-size of the h1’s parent element (body) is 16 pixels, so the resulting size of the h1 would be 150% of that, or 24 pixels. body { font-size: 16px; } h1 { font-size: 150%; } /* 150% of 16 = 24 */ If no font-size properties have been specified, relative measurements are based on the browser’s base font size, which is 16 pixels in most browsers. Of course, users can resize their base font as small or as large as they like, so there is no guaranteed starting size, only a reasonable guess. An em is a relative unit of measurement that, in traditional typography, is based on the width of the capital letter M (thus, the name “em”). In the CSS specification, an em is calculated as the distance between baselines when the N o t e Don’t confuse the em unit of measure- ment with the em (X)HTML element used to indicate emphasized text. They are totally different things. N o t e Don’t confuse the em unit of measure- ment with the em (X)HTML element used to indicate emphasized text. They are totally different things. The Font Properties Chapter 12, Formatting Text 211 font is set without any extra space between the lines (also known as leading). For text with a font size of 16 pixels, an em measures 16 pixels; for 12 pixel text, an em equals 12 pixels, and so on, as shown in Figure 12-6. em box 24px type 1em=24px 12px type 1em=12px 16px type 1em=16px Figure 12-6. An em is based on the size of the text. Once the dimensions of an em for a text element is calculated by the browser, it can be used for all sorts of measurements, such as indents, margins, the width of the element on the page, and so on. For text sizing, an em value works like a scaling factor, similar to a percent- age. As in the previous example, if the base font size is 16 pixels, giving h1 elements a font-size of 1.5 ems makes them 24 pixels high. body { font-size: 16px; } h1 { font-size: 1.5em; } /* 1.5 x 16 = 24 */ For the most part, ems and percentages can be used interchangeably when specifying type size. It’s mostly a matter of preference. There are a few snags to working with ems. One is that due to rounding errors, there is a lot of inconsistency among browsers and platforms when text size is set in fractions of an em. There are also documented problems in Internet Explorer when font-size is specified at sizes smaller than 1em. It is safest to use ems to scale text larger. For both ems and percentages, there is the lingering issue of not knowing the base font size. We are left with best guesses, and the assumption that users probably have their default font size set to a size that is comfortable to read, and we probably shouldn’t muck around with it too much. There is much more to the font size story. The Font Sizing Techniques sidebar lists some good resources for further research. N o t e Although I’ve set the size of the body text in pixels in the previous two examples for explanation purposes, you wouldn’t want to do that in the real world because the text could not be zoomed in Internet Explorer. In the meantime, we can add some font-size properties to the sample menu in the continuation of Exercise 12-1. Font Sizing Techniques Sizing type for web pages is problematic and the subject of much debate even among seasoned web designers. One popular method for sizing text is to make the text slightly smaller globally (using the body element) with a percentage value, then size all the elements up as appropriate using em measurements. The following articles provide slightly different takes on that method. How to Size Text Using Ems , by Richard Rutter (www. clagnut.com/blog/348) is a detailed how-to that makes em increments easy to use. The comments to this blog entry are also informative and give good insight into the varying opinions on how web text should be sized. Owen Briggs’ article on Text Sizing is the result of exhaustive cross-browser testing. Hundreds of screenshots are available if you want the proof. This article is a little dated, but still brings up relevant issues. Read it at www. thenoodleincident.com/tutorials/ box_lesson/font/index.html. If keywords are vexing you, read Todd Fahrner’s classic article, CSS Design: Size Matters on A List Apart (www.alistapart.com/articles/ sizematters/). It is a little dated (for example, support in Netscape 4 figures prominently), but it provides some useful background information and workarounds. Font Sizing Techniques Sizing type for web pages is problematic and the subject of much debate even among seasoned web designers. One popular method for sizing text is to make the text slightly smaller globally (using the body element) with a percentage value, then size all the elements up as appropriate using em measurements. The following articles provide slightly different takes on that method. How to Size Text Using Ems , by Richard Rutter (www. clagnut.com/blog/348) is a detailed how-to that makes em increments easy to use. The comments to this blog entry are also informative and give good insight into the varying opinions on how web text should be sized. Owen Briggs’ article on Text Sizing is the result of exhaustive cross-browser testing. Hundreds of screenshots are available if you want the proof. This article is a little dated, but still brings up relevant issues. Read it at www. thenoodleincident.com/tutorials/ box_lesson/font/index.html. If keywords are vexing you, read Todd Fahrner’s classic article, CSS Design: Size Matters on A List Apart (www.alistapart.com/articles/ sizematters/). It is a little dated (for example, support in Netscape 4 figures prominently), but it provides some useful background information and workarounds. Part III: CSS for Presentation 212 The Font Properties exercise 12-1 | Formatting a menu (continued) Let’s refine the size of some of the text elements to give the online menu a more sophisticated appearance. Open menu_summer.html in a text editor and follow the steps below. You can save the document at any point and take a peek in the browser to see the results of your work. You should also feel free to try out other size values along the way. I would prefer that the body text for the document appear smaller than the common 16 pixel default. I am going to set the size of the body to small , which renders at approximately 12 pixels on most current browsers. If it ends up too small for some users, they can always zoom the text up, since it was specified with a keyword. body { font-size: small; } Now let’s get that giant h1 under control. I’m going to make it one and a half times larger than the body text size with an em measurement. I could also use font-size: 150% to accomplish the same thing. h1 { font-size: 1.5em; } Figure 12-7 shows the result of our font sizing efforts. smaller h1 Before After (the font-size is set to small) Figure 12-7. The online menu after a few minor font-size changes. I want to point out that at this point, I don’t really know exactly how many pixels tall the h1 s will be for every user. They’re likely to be 18 pixels, but they may be smaller or much larger. The important part is that I’ve set my desired proportion of h1 elements to the surrounding text. If the user resizes or zooms the text, that proportion stays the same. 1. 2. The Font Properties Chapter 12, Formatting Text 213 Font weight (boldness) After font families and size, the remaining font properties are straightfor- ward. For example, if you want a text element to appear in bold, use the font-weight property to adjust the boldness of type. font-weight Values: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit Default: normal Applies to: all elements Inherits: yes As you can see, the font-weight property has many predefined values, includ- ing descriptive terms (normal, bold, bolder, and lighter) and nine numeric values (100 to 900) for targeting various weights of a font if they are available. Because most fonts common on the Web have only two weights, normal (or roman) and bold, the only font weight value you will use in most cases is bold. You may also use normal to make text that would otherwise appear in bold (such as strong text or headlines) appear at a normal weight. The numeric chart is an interesting idea, but because there aren’t many fonts with that range of weights and because browser support is spotty, they are not often used. In general, numeric settings of 600 and higher result in bold text, although even that can vary by browser, as shown in Figure 12-8. Rendered on Safari Rendered on Firefox (Mac) Figure 12-8. The effect of font-weight values. About inherit You will see that CSS properties include inherit in their list of keyword values. The inherit value allows you to explicitly force an element to inherit a style property value from its parent. This may come in handy to override other styles applied to that element and to guarantee that the element always matches its parent. About inherit You will see that CSS properties include inherit in their list of keyword values. The inherit value allows you to explicitly force an element to inherit a style property value from its parent. This may come in handy to override other styles applied to that element and to guarantee that the element always matches its parent. exercise 12-1 | Formatting a menu (continued) Back to the menu. I’ve decided that I’d like all of the menu item names to be in bold text. What I’m not going to do is wrap each one in <b> tags that would be so 1996! I’m also not going mark them up as strong elements that is not semantically accurate. Instead, the right thing to do is simply apply a style to the semantically correct dt (definition term) elements to make them all bold at once. Add this rule to your style sheet, save the file, and try it out in the browser (Figure 12-9). dt { font-weight: bold; } exercise 12-1 | Formatting a menu (continued) Back to the menu. I’ve decided that I’d like all of the menu item names to be in bold text. What I’m not going to do is wrap each one in <b> tags that would be so 1996! I’m also not going mark them up as strong elements that is not semantically accurate. Instead, the right thing to do is simply apply a style to the semantically correct dt (definition term) elements to make them all bold at once. Add this rule to your style sheet, save the file, and try it out in the browser (Figure 12-9). dt { font-weight: bold; } Part III: CSS for Presentation 214 The Font Properties Figure 12-9. Using the font-weight property to dt elements in the menu. Font style (italics) The font-style property affects the posture of the text, that is, whether the letter shapes are vertical (normal) or slanted (italic and oblique). font-style Values: normal | italic | oblique | inherit Default: normal Applies to: all elements Inherits: yes Italic and oblique are both slanted versions of the font. The difference is that the italic version is usually a separate typeface design with curved letter forms, while oblique text takes the normal font design and just slants it. The truth is that in most browsers, they may look exactly the same (see Figure 12-10). You’ll probably only use the font-style property to make text italic or to make text that is italicized by default (such as emphasized text) display as normal. Figure 12-10. Italic and oblique text. The Font Properties Chapter 12, Formatting Text 215 Figure 12-11. Applying the font-style property to the strong elements. Font Variant (Small Caps) Some typefaces come in a “small caps” variant. This is a separate font design that uses small uppercase-style letters in place of lowercase letter designs. The one-trick-pony font-variant property is intended to allow designers to specify such a small-caps font for text elements. font-variant Values: normal | small-caps | inherit Default: normal Applies to: all elements Inherits: yes In most cases, a true small caps font is not available, so browsers simulate small caps by scaling down uppercase letters in the current font, as you’ll see when we add some small caps text to the menu next. To typography sticklers, this is less than ideal and results in inconsistent stroke weights, but you may find it an acceptable option for adding variety to small amounts of text. h1 in small caps Figure 12-12. Using font-variant for small caps. exercise 12-1 | Formatting a menu (continued) Now that all the menu item names are bold, some of the text I’ve marked as strong isn’t standing out very well, so I think I’ll make them italic for further emphasis. To do this, simply apply the font-style property to the strong element. strong { font-style: italic; } Once again, save and reload. It should look like the detail shown in Figure 12-11. exercise 12-1 | Formatting a menu (continued) Now that all the menu item names are bold, some of the text I’ve marked as strong isn’t standing out very well, so I think I’ll make them italic for further emphasis. To do this, simply apply the font-style property to the strong element. strong { font-style: italic; } Once again, save and reload. It should look like the detail shown in Figure 12-11. exercise 12-1 | Formatting a menu (continued) Just for kicks, let’s set the first level heading ( h1 ) in small caps so we can try out this font-variant property. Remember that you can add this property to the existing h1 rule. The result is shown in Figure 12-12. If you find it kind of clunky, don’t worry, we’ll be undoing it later. h1 { font-size: 1.5em; font-variant: small-caps; } exercise 12-1 | Formatting a menu (continued) Just for kicks, let’s set the first level heading ( h1 ) in small caps so we can try out this font-variant property. Remember that you can add this property to the existing h1 rule. The result is shown in Figure 12-12. If you find it kind of clunky, don’t worry, we’ll be undoing it later. h1 { font-size: 1.5em; font-variant: small-caps; } . copyright also prevents designers from just making cool fonts available for download. For these reasons, web designers tend to specify fonts from the Microsoft Core Web Fonts collection. These. Impact, Webdings So, as you see, specifying fonts for the Web is more like merely suggesting them. You don’t have absolute control over which font your users will see. It’s one of those web design. Chapter 5. A fresh and validated copy, complete with DOCTYPE declaration, is available at www.learningwebdesign. com/materials. Open the document in a text editor. You can also open it in a browser