Stylin' Fonts and Text in CSS
- Specifying Fonts in CSS
- Exploring Font Families
- Sizing Fonts
- Font Properties
- Text Properties
- Using Font and Text Styles
This chapter is from the book
This chapter is from the book
This chapter is from the book
Much of Web design is dealing with type—in paragraphs, headlines, lists, menus, and forms. As a result, the properties in this chapter are essential to making the difference between a site that looks thrown together and one that looks like it has the professional touch. More than any other factor, type makes the clearest visual statement about the quality of your site's offerings. Graphics are the icing on the cake; typography is where good design begins.
If the chapter title has you wondering "Aren't fonts and text the same thing?" the answer is No, and here's why.
Fonts are the different kinds of typefaces. Each font is a set of letters, numbers, and symbols with a unique visual appearance. All fonts belong to large collections, which describe their general look, such as serif, sans-serif, or monospace. Font collections are made up of families, such as Times and Helvetica. A font family in turn can be broken down into font faces, which are variations on the basic family, such as Times Roman, Times Bold, Helvetica Condensed, Bodoni Italic, and so on.
Text simply describes a block of type, like this sentence or the heading of a chapter, regardless of the font in which it is set.
CSS has a set of properties relating to fonts and a set of properties relating to text. Font properties relate to the size and appearance of collections of type. What is its family (Times or Helvetica, for example)? What size is it? Is it bold or italic? Text properties relate to the font's treatment—setting its line height and letter spacing, underlining, and so on.
Here's a way I think about this perhaps seemingly subtle distinction. You can apply font styles, such as bold and italic, to a single character, but text properties, such as line height and text indent, only make sense in the context of a block of text such as a headline or a paragraph.
Let's start with fonts.
Specifying Fonts in CSS
In this section, you'll learn how to use CSS to specify fonts. You can use any length units, both absolute and relative, to specify font sizes, but for reasons discussed throughout this chapter, it's best to use a relative measurement such as ems, so the user can easily scale the type to other sizes.
Introducing Font Collections
)
Figure 3.1 Serif fonts have noticeable details at the ends of the character strokes. Sans-serif fonts do not have these details.
Example: body {font-family: sans-serif;}
Values: serif, sans-serif, monospace, fantasy, cursive
The simplest way to specify fonts in CSS is by using the five generic collection names—serif, sans-serif, monospace, fantasy, and cursive. These generic names cause the user agent (browser, PDA, cell phone, and so on) to serve up one of these font types. Generic collection names represent the lowest level of support for font styling, and as you will see in a moment, CSS offers some better options than these:
Serif fonts are so named because of the little details, known as serifs, at the ends of the character strokes. These are particularly noticeable in the uppercase letters. Examples of serif fonts include Times, Bodoni, and Garamond.
Sans-serif fonts do not have any details at the ends of the character strokes. They have a more plain appearance than serif fonts. Examples of sans-serif fonts include Helvetica, Ariel, and Verdana.
Monospace fonts such as Courier and Monotype give equal spacing to every letter ("i" has the same amount of space as "m") and are typically used for code blocks in computer related books (this book is no exception), or to simulate the look of a typewriter, whatever that is.
Cursive fonts look like cursive handwriting, although much neater than my own. Examples include Park Lane and Brush Script. Cursive is ideal for wedding invitations and therefore really doesn't get used much on the Web. If you use it, check it in various browsers, because every browser seems to use a different font for cursive.
Fantasy fonts are ones that don't fit in the other categories. The main fantasy here is the hope that this might be a useful way to specify a font. It's almost impossible to predict what font might be served up as a fantasy font from browser to browser, and, therefore, it's best if you avoid fantasy fonts. Also, "fantasy" isn't really an accepted font collection name in the way that cursive and serif are; I have only seen this used as a collection name in CSS, but perhaps I don't get out enough.
If you want to specify a generic font, you write a declaration like this
body {font-family:sans-serif;}
In this case, the browser dishes up Helvetica or Arial or whatever sans-serif font is set as its default and is also on the viewer's computer ( Figures 3.2–3.5 ). It's the most basic way to specify a font. But you can be more specific and declare a font family by name; usually that's what you want to do.
)
Figure 3.2 Generic font families as displayed by Firefox for Windows.
)
Figure 3.5 Generic font families as displayed by Safari. Note Safari uses regular fonts for Fantasy and Cursive in headings.
)
Figure 3.3 Generic font families as displayed by Internet Explorer for Mac OS X.
)
Figure 3.4 Generic font families as displayed by Internet Explorer for Windows.