| Previous | Table of Contents | Next |
In this lesson, you learn about using styles to specify the font that the web browser will use to display your document’s text.
Perhaps the single most limiting factor to the creative design of World Wide Web pages has been the restrictions imposed on the selection of fonts. Authors who are familiar with desktop publishing and word processing software are accustomed to choosing from hundreds of fonts of every conceivable style.
Font In the PC (and especially the Windows) community, the term font refers to the design of the letters used by a computer to display or print an alphabet. Referred to by names like Courier or Helvetica, these designs are actually typefaces. The term font refers to a particular typeface in a particular size and style, such as Univers 12pt Italic. However, the advent of scaleable font technologies like TrueType, which use one set of instructions to create type of any size, has resulted in the word font being used as a synonym of typeface.
Browsers are only capable of displaying text using the fonts installed on the reader’s computer. Because the Windows operating systems ship with only a few basic fonts, authors must assume that a browser is able to display only Times New Roman, Arial, and Courier.
The problem is further compounded by the many platforms on which web browsers are run today. Even fonts that appear the same may be called by one name on a UNIX system and another on a Macintosh. The CSS1 standard provides style properties that allow authors to specify the exact fonts that are to be used when their documents are displayed. It also provides a means to account for different platforms, but this does not resolve the problem of users not owning the same fonts.
The font capabilities of personal computers have traditionally been geared toward the production of printed output. Well designed digital fonts that produce superior printed text have traditionally brought premium prices, often up to $100 or more for a single typeface.
Displaying fonts online is an entirely different story, however. The skilled eyes of a printer or graphic designer can discern the subtle differences between good quality fonts and mediocre ones when text is printed at the 600 dpi (dots per inch) or greater resolution that is typically produced by laser printers.
The text on a computer monitor, however, typically displays at a resolution of well under 100 dpi, and the excellence of a top quality digital font is largely lost.
The font market has been glutted with low priced or even free typefaces in recent years that are rarely worth more than you pay for them. While these fonts may be unacceptable for high quality printed output, they will usually suffice for on-screen use.
As a result of these changes in the font market, there is no reason why digital fonts that are sufficient for web browser displays cannot be made freely available to all users. Microsoft has taken a large step in this direction by including a selection of fonts with the Internet Explorer 3.0 browser that complements those that are included with the Windows operating systems. These fonts are optimized for screen display, contain extensive international character sets, and are freely available for all users of the Windows and Macintosh operating systems.
Microsoft plans to make more fonts available in time, free for the downloading, but it is the incorporation of these new fonts into the browser’s installation routine that is the primary reason why web page authors now assume the presence of these new fonts. The ability to display a document using the typefaces that the author intended, without the need for special preparations like downloading and installing new fonts, is what will make the World Wide Web into a fully functional environment for graphic designers.
The combination of Windows 95 or Windows NT plus Microsoft Internet Explorer 3.0 furnish the computer with a minimum of the following six fonts, which are sure to be available to the web page designer (see Figure 7.1). Information on sample pages for these fonts can also be found in Appendix A:
)
Figure 7.1 Windows and Internet
Explorer provide web authors with a selection of six basic fonts that they
can be certain their readers will have.
TIP: Using Multiple Fonts One of the most common failings of the novice desktop publisher is the tendency to use too many fonts in a single document. Now that the same font resources are being made available to web publishers, they are subject to the same danger. Avoid overloading your pages with different font families. Stick to one or two fonts and vary their appearance using sizes and weights instead.
For any web page without styles, the default font that displays all text is the one set in the reader’s browser. The default for both the Internet Explorer and the Netscape Navigator on the Windows platform is Times New Roman, which is one of the fonts that ships with the operating system. Readers can also customize their browsers to use any font that they have installed on their PCs as the default.
TIP: Browser Font Inheritance Remember that the default browser font is inherited by every text element in an HTML page that does not have a font-family assigned to it with a style. This default font may, or may not, be Times New Roman, the original browser default. If you want your text displayed in Times New Roman, it is recommended that you create a style explicitly specifying it. Don’t count on the browser default because the user may have changed it.
In order to specify the use of a particular font in a style, you must use the font-family property. The property is inserted between the curly braces that follow the font’s selector; that is, the element to which the property is to be applied. As discussed in earlier lessons, the selector appears at the left margin on a new line and is followed by at least one space. The left curly bracket signals the beginning of the style declaration containing the style properties (and their accompanying values) that are to be applied to the selected text. Properties are separated from values by colons and semicolons separate each property:value combination.
Declaration In HTML style sheets, a declaration is the entire series of properties and values enclosed by curly brackets. The declaration plus the selector is known as a rule.
A typical style rule specifying the use of a particular font appears as follows:
){kind=link}
H1 {font-family: Arial}
If the name of the font family contains spaces, you must enclose the name in quotation marks, as shown:
H1 {font-family: "Times New Roman"}
Other properties can precede or follow the font-family property as long as each property:value combination is separated from the next by a semicolon. A rule containing multiple properties would appear as follows:
H1 {font-family: "Times New Roman";
font-size: 14pt}
The font-family property controls only the basic font that displays the selected text. Other text formatting options, such as font size, weight, and style, are specified using separate properties.
TIP: Specifying Font Names If you are specifying font-families other than those listed earlier, you must be sure to use the exact typeface name as it appears in Windows applications. To determine the typeface name, open the Fonts folder from the Windows Control Panel and double-click on the font you want to use. The typeface name appears on the second line of the font sample sheet that is displayed.
To experiment with the new fonts available to you, modify the <STYLE> block of your SAMPLE.HTML file to add the font-family property to your H1 and H2 selectors, as shown:
<STYLE>
<!--
H1 {font-family: Impact;
font-size: 24pt; color: red; text-align: center}
H2 {font-family: "Comic Sans MS";
font-size: 20pt; font-style: italic; color: blue}
Feel free to change the value of the font-family property for these and the other rules in your file. Good design comes from experimentation and styles are designed to provide you with the tools that you need.
A web page author is not necessarily limited to using the six fonts shown in Figure 7.1. The name of any font installed on the author’s computer can be specified in a style sheet. If that particular font is not installed on the reader’s computer, the operating system substitutes the installed font that comes closest to having the same set of properties as the specified font.
In situations where a web page author has reason to believe that particular fonts are installed on readers’ computers, there is nothing wrong with specifying other font families. If, for example, you are creating pages for an intranet web site (that is, a private site intended only for users of a corporate network), you can assemble a collection of licensed fonts and distribute them to your users or make sure that all company computers have those fonts pre-installed. This would also work if you were designing a web page intended for users of a particular software package that you know includes certain fonts.
Distributing Fonts While supplying fonts to your readers for installation on their machines may be a viable alternative on an intranet, don’t consider this practice for Internet web pages unless you are absolutely certain that the fonts in question can be freely distributed without paying a license fee or obtaining permission. Fonts are software and their licensing practices have been a sore spot in the software industry for many years. Don’t endanger yourself or your company by publicly violating font licensing agreements.
If you are unsure of the exact fonts installed on your readers’ computers, or if your readers are using a mixture of Windows, Macintosh, and UNIX machines, you can specify alternative values for your font-family properties. Remember that some systems use different names for similar fonts. Simply list the alternative font names in the order that you want them to be selected, separating them with a comma and a space, as follows:
H1 {font-family: Arial, Helvetica, Helv}
Any font-family names that contain spaces must be enclosed in quotation marks. If you use a comma after a font-family name, it must be placed outside the trailing quote, contrary to standard English punctuation practices.
In this example, the browser attempts to display H1 text using the Arial font. If Arial is not present, the Helvetica (the Macintosh equivalent) will be substituted. If Helvetica is not present, then Helv (a variation on Helvetica and standard on many UNIX platforms) will be used.
Obviously, the technique of supplying alternative font names is to list the fonts in descending order of preference, hopefully ending with a font that you are certain everyone has. When you are dealing with multiple platforms, this is not always easy. The CSS1 standard, therefore, defines a number of generic font-family names that can be included in your alternative list as a last resort.
Generic font-family names can be added to any alternative font- family list, just as if they were normal font names. They are typically added last, so that they are used when no other matching font name is found.
The generic font types defined by the CSS1 standard are as follows:
These are all traditional typographical terms used to describe general font styles. A serif font is one, like Times New Roman, in which the letters have small decorative ends, such as those that descend from the ends of the crossbar on the letter T (see Figure 7.2). These decorative ends are themselves called serifs, and a sans serif font (in French, sans means without) is one that does not have these decorations, such as Arial.
)
Figure 7.2 The two most basic
types of fonts are serif and sans serif, which are distinguished by the
presence (or absence) of decorative ends on the letters.
A cursive font is one that resembles a calligraphic longhand with separated letters, and fantasy indicates a more decorative type of font, more likely to be used for headlines than body text. A monospaced font, like Courier New, is one in which each letter of the alphabet is exactly the same width. The browser’s default monospaced font has always been available to web page authors through the use of the <PRE> and <TT> tags. Monospaced fonts are often used for directory listings and to present text in columns (so that a consistent number of spaces will always result in even columns).
Therefore, to cover all possibilities, you are likely to end up with font-family properties that look something like the following, which provides the desired font, a standard Macintosh alternative, a possible UNIX alternative, and finally a generic family that can be interpreted by a browser on any platform:
){kind=link}
H1 {font-family: Arial, Helvetica, Helv, sans-serif}
In this lesson, you learned how to specify the font that is to be used to display the text in your web pages. In the next lesson, you learn how to vary the size of your text.
 |
 |
 |