Font Controls
- Understanding Typography on the Web
- Setting the Font
- Setting the Font Size
- Making Text Italic
- Setting Bold, Bolder, Boldest
- Creating Small Caps
- Setting Multiple Font Values
Check out the latest edition: HTML and CSS: Visual QuickStart Guide, 9th Edition.
This chapter is from the book
This chapter is from the book
This chapter is from the book
Typography is one of your most powerful tools for presenting organized, clean-looking documents. For that matter, type is your best tool for presenting chaotic, grungy-looking documents.
The fonts you use go a long way toward getting your message across in just the way you want—whether that message is classical, grunge, or anything in between. Boldface, italic, and other typographic effects help designers guide a visitor's eye around the page (Figures 3.1 and 3.2).
)
Figure 3.1 typoGRAPHIC (www.rsub.com/typographic) is a great source for learning about the power of typography both on and off the Web.
)
Figure 3.2 counterSPACE (http://counterspace.motivo.com) also provides insight into typography, all in a beautiful Flash interface.
CSS gives you the ability to control the appearance of fonts, also known as the letterforms, in your Web pages. But with CSS, you can set more than just the font family, boldface and italic attributes, and the limited font sizes available with HTML tags. CSS allows you to go a step further and set generic font families, various levels of boldness, different types of italic, and any font size, using the standard point notation used in the print world.
Understanding Typography on the Web
A type style (commonly referred to as a font family on the Web) is a category of typefaces (fonts) that have similar characteristics. For the Web, there are five basic font families (Figure 3.3).
)
Figure 3.3 The generic font families and some common examples of each.
- Serif. A serif is the small ornamentation at the end of a letter that gives it a distinguishing quality. Serifs are holdovers from the days of stonecutting and pen strokes. They often improve legibility by making individual letters stand out from their neighbors. Serif fonts generally are best suited for the display of larger text or for smaller printed text. They are not so good for smaller text on a screen, because the serifs often obscure the letter.
- Sans-serif. As you might guess, sansserif fonts are those fonts without serifs. Although the characters are less distinctive, sans-serif fonts work better for smaller text on a screen.
- Monospace. Although monospace fonts can have serifs or not, their distinguishing feature is that each letter occupies the same amount of space. The lowercase letter l, for example, is much thinner than the uppercase letter M. In non-monospace fonts, the letter l occupies less space than the M, but a monospace font adds extra space around the l so that it occupies the same amount of space as the M. Monospace fonts work best for text that has to be exactly (but not necessarily quickly) read, such as programming code, in which typos can spell disaster.
- Cursive. Cursive fonts attempt to mimic cursive handwriting, usually in a highly stylized manner. Cursive fonts are best reserved for decoration; they are not very good for reading large chunks of text.
- Fantasy. Decorative fonts that don't fit into any of the preceding categories are referred to as fantasy fonts. These fonts usually are extremely ornamental or, in the case of Dingbats, are illustrations or icons. Like cursive fonts, fantasy fonts are best reserved for decoration. You should choose fantasy fonts carefully to reinforce the look and feel of your Web site.
Using type on the Web
Theoretically, you can use any font you want on the Web, but there are three distinctive ways to present text, each with its own strengths and weaknesses:
HTML text. The text that you type in your HTML document acts, for the most part, like the text in a word processor. The advantages of HTML text are that it is easy to edit if changes are required, and it can adjust to the width of the screen on which it is being viewed. But HTML text has some severe limitations for design purposes.
By and large, most of the textual control is left up to the visitor's browser, and you can't do things like run text vertically rather than horizontally. Even more stifling is the fact that you are limited to the fonts that are available on the visitor's machine (see "Using Browser-Safe Fonts" later in this chapter). Thus, if you have a specific font on your machine that you want to use, but the person viewing your site doesn't have that font on her machine, you're out of luck.
CSS gives designers greater control of many common typographic features (such as line and word spacing), but even with CSS, HTML text is severely limited, particularly in the special-effects department. This is why many designers turn to text in graphics to get the look they want.
Graphic text. Unlike HTML text, graphic text is a graphic (GIF or JPEG) that just happens to have text in it. This means that you can do anything you want in terms of how the text looks and can use any font you want, whether the site visitor has it on his machine or not.
You also have all the limitations that go along with using graphics, such as larger file sizes (larger graphics mean slower download times) and the difficulty of editing text. Graphics also take up a set amount of screen space and may be cut off if the visitor's screen is not large enough.
- Vector text. Vector text combines the best of both worlds. Like HTML text, it is easy to change and can position itself dynamically, depending on the screen size. But like graphic text, vector text allows you to apply special effects easily (on a slightly more limited scale), and you can use any font that you want.