5
Applying Font Faces
WHAT YOU WILL LEARN IN THIS CHAPTER:
- The font-family property and how it is used to change the face of a font
- The font-style property and how it is used to make a font italic
- The font-variant property and how this property is used to create a small-caps effect
- The font-weight property and how it is used to increase or decrease how bold or light a font appears
- The font-size property and how it is used to increase or decrease the size of a font
- The font property and how it is used as shorthand to specify a number of other font properties
In Chapter 4, you learned how certain properties in CSS are inherited and how the cascade determines which style rules are the most important. In this and subsequent chapters, you begin an in-depth look at the individual properties of CSS and how these come together to style a document.
This chapter begins the discussion of text manipulation with CSS's font manipulation properties. CSS includes a variety of properties that change the face, size, and style of a font.
SETTING FONT FACES
The font-family property allows you to specify the typeface used to display a piece of text. You can specify more than one typeface, and the first one that the user has installed on their system will be the one used. You can make use of any of the fonts installed on the user's operating system, though in practice you'll generally stick to the set of web safe fonts that we discuss later in the chapter. There are also some so-called generic font families that browsers map to the most appropriate system font, as in the following table.
| PROPERTY | VALUE |
| font-family | [[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ] Initial value: Varies depending on the browser or user agent. |
The following code is an example of the basic use of the font-family property.
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html lang=“en”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
<title>FIGURE 5-1</title>
<style type=“text/css”>
body {
font-family: arial, helvetica, sans-serif;
}
h1 {
font-family: “Times New Roman”, Georgia, Serif;
}
</style>
</head>
<body>
<h1>Recipes for Cheese</h1>
<p>Cheese is a remarkably versatile food, available in literally hundreds
of varieties with different flavors and textures.</p>
</body>
</html>
code snippet /chapter5/figure_5-1.html
This results in the output shown in Figure 5-1.
The example is pretty straightforward, and hopefully by now you are sufficiently familiar with CSS to guess what it does. A set of font families, arial, helvetica, sans-serif, out of which the first installed font is applied to text within the body element, and a different set of font families “Times New Roman”, Georgia, Serif is applied to any h1 elements.
There are two things to note about the format. First, the names of each font are case insensitive (that is, they can be uppercase, lowercase, sentence case, or whatever mixture of cases you find most readable). Second, as you saw in Chapter 2, strings which contain spaces (for example, “Times New Roman” must be enclosed with quotation marks).
The font-family property can accept one or more fonts for its value, which is what is meant by the repetition of the syntax in the notation and the presence of the asterisk. The asterisk indicates that the syntax may be repeated one or more times, and a comma is used to separate each font name provided. You can specify two types of fonts. The first is documented as <family-name> in the preceding table. The <family-name> notation refers to fonts installed on the user's computer, which means that the available fonts depend on the user's operating system and the fonts available to that operating system. The <generic-family> notation refers to a small subset of predefined fonts that can be expected to always be available; this will be discussed shortly.
Don't worry if you find this syntax difficult to read. You will get used to it over the course of this book, and although it is not essential that you learn it, it will help you read the official CSS documentation if you do.
Font Families
The available font families that can be specified vary depending on the operating system. Using a default installation, Windows does not provide the same fonts as Mac OS X, for instance. Furthermore, the available fonts also vary depending on the programs installed on the user's computer. For instance, Microsoft Office installs a number of extra fonts in addition to those that ship with Mac OS X or Windows. In fact, with the exception of a few fonts, Mac OS X with Microsoft Office installed provides pretty much the same fonts as installed on Windows. Without Microsoft Office installed, however, many Windows fonts are not available on the Mac platform.
There is a huge number of fonts available across platforms, too many to list here. A great resource which lists many fonts and the likelihood of their being installed on each platform can be found at www.codestyle.org/css/font-family/index.shtml.
For this reason, there is the possibility of font inconsistencies, that the font-family property can accept more than one font as its value. The browser will use the first font provided that is installed and available on the end user's computer. The browser will fall back to the next font in the list in the event that previous fonts are not available. Subsequent fonts in the list are called fallback fonts. This capability is provided because it is difficult to foresee which fonts will be available on the user's computer.
The effect of specifying more than one font is that the browser goes through the list of comma-separated fonts until it finds one that it is capable of displaying.
CSS provides a couple of generic fonts that you can always rely on being installed and for this reason it is good practice to include a generic font as the last in the list.
The following table outlines the generic font family names defined in CSS.
| GENERIC FONT | RESEMBLES |
| serif | Times, Times New Roman |
| sans-serif | Helvetica, Arial |
| cursive | Zapf-Chancery |
| fantasy | Western |
| monospace | Courier, Courier New |
An example of each generic font family is shown in Figure 5-2.
You will find that most text on the Web is displayed with a sans-serif font family. This is because sans-serif fonts tend to be easier to read on screen. Printed materials such as this book often use serif fonts because most people find them easier to read off screen. Serif fonts can also be used on the Web but usually only with text which is larger than average such as headings.
Use the following Try It Out to experiment with the font-family property for yourself.
TRY IT OUT Applying the font-family Property
Follow these steps to experiment with the font-family property.
- Write the following markup in your text editor:
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> <html lang=“en”> <head> <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”> <title>Example 5-1</title> <style type=“text/css”> body { font-family: arial, helvetica, sans-serif; } h1 { font-family: “Times New Roman”, Georgia, Serif; } ol { font-family: monospace; } </style> </head> <body> <h1>Recipes for Cheese</h1> <p>Cheese is a remarkably versatile food, available in literally hundreds of
varieties with different flavors and textures.</p> <h2>Welsh Rarebit</h2> <ol> <li>Lightly toast the bread</li> <li>Place on a baking tray, and spread with butter.</li> <li>Add the grated Cheddar cheese and 2 tablespoons of beer to a saucepan.
Place the saucepan over a medium heat, and stir the cheese continuously until
it has melted. Add a teaspoon of wholegrain mustard and grind in a little
pepper. Keep stirring.</li> <li>When thick and smooth, pour over each piece of toast spreading it to the
edges to stop the toast from burning.</li> <li>Place under the grill for a couple of minutes or until golden brown.</li> </ol> </body> </html> - Save example_5-1.html. The results of these modifications are shown in Figure 5-3.
In Example 5-1, you made use of several examples of the font-family property. Following is a review of each of the relevant rules.
The first example of the font-family property you used was arial, helvetica, sans-serif applied to the body element, setting default fonts for all text on the page.
body {
font-family: arial, helvetica, sans-serif;
}
Next, you specify “Times New Roman”, Georgia, Serif for all h1 elements.
h1 {
font-family: “Times New Roman”, Georgia, Serif;
}
Finally, you specify the generic system monospace font for all OL (ordered list) elements.
ol {
font-family: monospace;
}
In the next section, I discuss how to make text italic, bold, or small caps.
MAKING TEXT ITALIC, BOLD, OR SMALL CAPS
Making your text italic, bold, or displayed as small caps requires three different properties which all behave in a very similar way. We will cover them all in the following three sections.
Italic Text
The font-style property is used to switch between styles provided by a particular font; those styles are italic or oblique. For many fonts the information required to render text in an italic version of the font is included in the font file. The oblique style does not use this information, even if it is available, instead it simulates italicized text, not always to great effect.
The following table outlines the possible values for the font-style property.
| PROPERTY | VALUE |
| font-style | normal | italic | oblique Initial value: normal |
The italic and oblique values are, with most fonts, indistinguishable in how they render; however, I have never used or seen used the oblique style in real-world code, so we will limit our use of the font-style to italicizing text.
There is only one gotcha with font-style. Not all fonts have an italic style, and browsers differ in how they handle this case. IE will render the font in the normal style, whereas other browsers will fall back to the next specified font that has an italic version.
Bold Text
The font-weight property provides the functionality to specify how bold a font is. The following table outlines the font-weight property and the values that it allows.
| PROPERTY | VALUE |
| font-weight | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 Initial value: normal |
As you can see in the preceding table, the font-weight property has several values. Despite all of these different values being available for the font-weight property, in real-world web design, a font is either bold or it isn't. That is to say, in real-world web design, the only two values that matter in the preceding table are the normal and bold values. This majority of fonts used on the Web do not support the variations that the font-weight property allows.
For those interested, normal text usually equates to a font-weight value of 400 and bold text to a value of 700.
Small Caps Text
The following table outlines the font-variant property and its possible values.
| PROPERTY | VALUE |
| font-variant | normal | small-caps Initial value: normal |
The font-variant: small-caps; declaration causes letters to appear in uppercase but scaled slightly smaller than capitalized letters. The capitalized letter maintains its case and size, but all lowercase letters are displayed as capital letters scaled slightly smaller than any real capital letters appearing in the markup's source code. It can be a nice effect to use in headings but can make long sections of text hard to read.
In the following Try It Out, you experiment with the font-style, font-weight, and font-variant properties.
TRY IT OUT Applying the font-style, font-weight, and font-variant properties
Follow these steps to try out the font-style, font-weight, and font-variant properties.
- Write the following markup in your text editor:
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> <html lang=“en”> <head> <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”> <title>Example 5-2</title> <style type=“text/css”> body { font-family: arial, helvetica, sans-serif; } h1 { font-family: “Times New Roman”, Georgia, Serif; font-variant: small-caps; } .intro { font-weight: bold; } .recipe .intro { font-weight: normal; font-style: italic; } </style> </head> <body> <h1>Recipes for Cheese</h1> <p class=“intro”>Cheese is a remarkably versatile food, available in literally
hundreds of varieties with different flavors and textures.</p> <div class=“recipe”> <h2>Welsh Rarebit</h2> <p class=“intro”>Cheese is a remarkably versatile food, available in literally
hundreds of varieties with different flavors and textures.</p> <ol> <li>Lightly toast the bread</li> <li>Place on a baking tray, and spread with butter.</li> <li>Add the grated Cheddar cheese and 2 tablespoons of beer to a saucepan. Place the saucepan over a medium heat, and stir the cheese continuously until it has melted. Add a teaspoon of wholegrain mustard and grind in a little pepper. Keep stirring.</li> <li>When thick and smooth, pour over each piece of toast spreading it to the edges to stop the toast from burning.</li> <li>Place under the grill for a couple of minutes or until golden brown.</li> </ol> </div> </body> </html> - Save the preceding markup as example_5-2.html. The example results in the output in Figure 5-4.
How It Works
In Example 5-2, you experimented a bit with the font-style, font-weight, and font-variant properties.
First, you applied the small-caps font variant to any h1 elements.
h1 {
font-family: “Times New Roman”, Georgia, Serif;
font-variant: small-caps;
}
Then you applied the bold font weight to elements with class name intro.
.intro {
font-weight: bold;
}
Finally, you applied the normal font weight and italic font variant to elements with the class name of intro with an ancestor element with a class name of recipe.
.recipe .intro {
font-weight: normal;
font-style: italic;
}
In the next section, I introduce the font-size property.
THE FONT-SIZE PROPERTY
The font-size property is, of course, used to control the size of fonts. The following table outlines the font-size property and its possible values.
| PROPERTY | VALUE |
| font-size | <absolute-size> | <relative-size> | <length> | <percentage> Initial value: medium |
Of these, you will rarely find any values other than length and percentage in use in real world code, so let's briefly take a look at absolute-size and relative-size before we move on to the practical stuff.
Absolute Font Sizes
The <absolute-size> value notation of the font-size property refers to one of seven keyword values. Absolute values for the font-size property are defined using keywords that range from xx-large to xx-small. The following table outlines the absolute values and their relation to HTML heading sizes.
These keywords specify the font size based on a scaling factor of 1.2. Scaling factor is the ratio between two shapes. The scaling factor is determined by multiplying the font size by 1.2 to determine the next font size relative to the previous one. For instance, if a font size of 16 pixels is assumed for the medium keyword value, the large keyword would be approximately 20 pixels, rounding up from 19.2, because 16 multiplied by 1.2 equals 19.2.
Relative Font Sizes
The <relative-size> notation of the font-size property refers to two values: larger and smaller. When either of these two values is used, the font size is determined by the values appearing in the table for absolute size. If the value is specified with a length unit — say, for instance, as pixels — the browser simply applies a 1.2 scaling factor to that size to get the larger size.
Length and Percentage Font Sizes
Length and percentage font sizes are what you will most commonly see and use, and both work in the same way.
Font sizes can be set in any of the absolute (inches, centimeters, millimeters, points, and picas) or relative (em, ex, pixels and percentage) measurements that we saw in the “Length and Measurement” section in Chapter 2. Of these you will rarely see absolute measurements used for text outside of print style sheets (see Chapter 15) and will rarely see ex used in any context.
Let's start with the easiest to understand, pixels, demonstrated in the following code.
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html lang=“en”>
<head>
<meta http-equiv=“Content-Type”content=“text/html; charset=utf-8”>
<title>Figure 5-5</title>
<style type=“text/css”>
body {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
}
h1 {
font-family: “Times New Roman”, Georgia, Serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Recipes for Cheese</h1>
<p>Cheese is a remarkably versatile food, available in literally hundreds
of varieties with different flavors and textures.</p>
</body>
</html>
code snippet /chapter5/figure_5-5.html
This results in the output shown in Figure 5-5.
If you compare this to previous examples, you will see that the paragraph text is smaller and the heading text is larger than before. This is very simple and easy to implement and would probably the most common method of setting font sizes on the Web if it wasn't for one small wrinkle: Internet Explorer. All browsers provide a mechanism for users to resize text in their browser. This is an important accessibility feature, in particular helping those with poor vision to read text in a size comfortable for them.
Unfortunately, IE does not resize text if the font size is set in pixels or for that matter in any absolute units. It won't even resize text if you override the default font size on a child element with a relative measurement such as a percentage if the initial value is set with pixels. If you want your sites to be accessible (and you do!), you must look to other measurements, namely percentages and ems.
Percentage font sizes work much like the em units discussed in Chapter 2. Consider this example:
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html lang=“en”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
<title>Figure 5-6</title>
<style type=“text/css”>
body {
font-family: arial, helvetica, sans-serif;
}
h1 {
font-size: 1.5em;
font-weight: normal;
}
p {
font-size: 150%;
}
</style>
</head>
<body>
<h1>Recipes for Cheese</h1>
<p>Cheese is a remarkably versatile food, available in literally hundreds
of varieties with different flavors and textures.</p>
</body>
</html>
code snippet /chapter5/figure_5-6.html
This results in the output shown in Figure 5-6.
Figure 5-6 shows that percentage values are based on the element's ancestry. The font size for the h1 element is 1.5em, which means 1.5 times the default font size. The font size of the p element is made 150% larger than the default font, and you can see that they are both the same size. This means that 1em is interchangeable with 100%, with 2em being the same as 200% etc.
As long as you set your font sizes with ems or percentages, all browsers, including IE, will allow your users to resize text. It is therefore common to see styles such as the one in the following code.
body {
font-size: 62.5%;
}
Based on the default font size of 16px, common to all modern web browsers, this sets the size of 1em to 10px, making it much easier to calculate the value required to set font sizes of other values (for example, 13px would be 1.3em or 130%).
There is one gotcha with relative measurements: They are cumulative. In other words, if you nest two elements that both have styles changing the font size of the text, both changes will be applied. The following code shows this.
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html lang=“en”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
<title>Figure 5-7</title>
<style type=“text/css”>
.intro {
font-size: 1.2em;
}
.recipe {
font-size: 1.1em;
}
</style>
</head>
<body>
<p class=“intro”>Cheese is a remarkably versatile food, available in
literally hundreds of varieties with different flavors and textures.</p>
<div class=“recipe”>
<h2>Welsh Rarebit</h2>
<p class=“intro”>Cheese is a remarkably versatile food, available in
literally hundreds of varieties with different flavors and textures.</p>
</div>
</body>
</html>
code snippet /chapter5/figure_5-7.html
This results in the output shown in Figure 5-7.
The result in Figure 5-7 is that the p element inside the div with class name of recipe has been increased in size by 10% because it is of the .recipe selector and by a further 20% on top of the 10% because of the .intro selector! This makes the text much bigger than expected.
The next section examines a special shorthand property used to specify several font properties in one.
THE FONT SHORTHAND PROPERTY
font is a shorthand property that allows you to write several font-related properties in a single property. The following table outlines the font property and the values that it allows.
| PROPERTY | VALUE |
| font | [ <‘font-style’> || <‘font-variant’> || <‘font-weight’> ]? <‘font-size’> [ / <‘line-height’> ]? <‘font-family’> ] caption | icon | menu | message-box | small-caption | status-bar |
The notation for the font property is somewhat more complicated than that presented in previous examples. For now, just ignore the caption, icon, menu, message-box, small-caption, and status-bar values — these are called system fonts, and you will rarely see them used in real-world code.
The font Properties
As for the first part of the notation, here's a breakdown of each portion:
[ <‘font-style’> || <‘font-variant’> || <‘font-weight’> ]?
This indicates that a font-style, font-variant, or font-weight value can be provided. The question mark indicates that this part is optional; you don't have to include a font-style, font-variant, or a font-weight. The double vertical bars in the notation indicate that each value is optional, and they also indicate that any combination of the three can appear. You can include just a font-style, just a font-variant, just a font-weight, all three, or any combination of the three. The next part indicates that a font size must be specified:
<‘font-size’>
The font size is not optional, so a font-size value must always be provided.
The next part indicates that a line-height (discussed in Chapter 6) may be specified, but because a question mark follows it, the line height is optional:
[ / <‘line-height’> ]?
The forward slash in the notation indicates that if a line height is specified, a forward slash must separate the font-size and line-height properties. The question mark after the closing square bracket indicates that this portion of the syntax is optional.
NOTE Line height controls the spacing between lines of text, and is covered in detail in the next chapter.
The last portion indicates that a font-family must be specified:
<‘font-family’>
So at the very least, a font-size value and a font-family value must be specified.
It's important to note that using shorthand properties of any kind resets to their default the values of any of the individual properties that haven't been specified in the shorthand property. The following code gives an example:
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html lang=“en”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
<title>Figure 5-8</title>
<style type=“text/css”>
body {
font-weight: bold;
}
p {
font: 100% arial, helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>Recipes for Cheese</h1>
<p>Cheese is a remarkably versatile food, available in literally hundreds
of varieties with different flavors and textures.</p>
</body>
</html>
code snippet /chapter5/figure_5-8.html
In Figure 5-8 you can see that although the first rule applied to the body sets all text on the page to be bold, the rule targeting the paragraph does not specify a font-weight and therefore the default font-weight style of normal has been applied.
Now that you understand the notation (I hope!), you can try the font property for yourself in the following Try It Out.
TRY IT OUT Applying the font Property
Follow these steps to try out the font property.
- In your text editor, type the following markup:
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> <html lang=“en”> <head> <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”> <title>Example 5-3</title> <style type=“text/css”> body { font: 62.5% arial, helvetica, sans-serif; } h1 { font: small-caps 1.6em “Times New Roman”, Georgia, Serif; } .recipe .intro { font: italic 1em arial, helvetica, sans-serif; } </style> </head> <body> <h1>Recipes for Cheese</h1> <p class=“intro”>Cheese is a remarkably versatile food, available in literally hundreds of varieties with different flavors and textures.</p> <div class=“recipe”> <h2>Welsh Rarebit</h2> <p class=“intro”>Cheese is a remarkably versatile food, available in literally hundreds of varieties with different flavors and textures.</p> <ol> <li>Lightly toast the bread</li> <li>Place on a baking tray, and spread with butter.</li> <li>Add the grated Cheddar cheese and 2 tablespoons of beer to a saucepan. Place the saucepan over a medium heat, and stir the cheese continuously until it has melted. Add a teaspoon of wholegrain mustard and grind in a little pepper. Keep stirring.</li> <li>When thick and smooth, pour over each piece of toast spreading it to the edges to stop the toast from burning.</li> <li>Place under the grill for a couple of minutes or until golden brown.</li> </ol> </div> </body> </html> - Save the markup as example_5-3.html. The results of these modifications are shown in Figure 5-9.
How It Works
In Example 5-3, you saw three examples of the font shorthand property. The first example sets the font for the whole document. Because the font property is inherited, the font will stay 16px and sans-serif unless specified otherwise for a child element.
body {
font: 62.5% arial, helvetica, sans-serif;
}
You then set the font of all h1 elements to be small caps, 1.6em (which is equivalent to 16px thanks to the rule on the body element), and with a font family of “Times New Roman”,Georgia, Serif.
h1 {
font: small-caps 1.6em “Times New Roman”, Georgia, Serif;
}
Finally, you set the font style to italic, the font size to 1em, and the font family to arial, helvetica, sans-serif for all elements with a class of intro that are also ancestors of an element with class of recipe.
.recipe .intro {
font: italic 1em arial, helvetica, sans-serif;
}
You may think that the last rule is pointlessly complicated, and you would be right. All you are really changing here is the font-syle property, all other values are duplicating the style on the body element. This shows that short hand properties are not always the right choice, but in many cases can reduce the amount of code that you have to write. Ultimately I would advise you to write CSS in the style that is most comfortable for you — use short hand notation where appropriate if you want to, but don't feel that you have to.
EXERCISES
- Why aren't the values of the font-weight property 100 through 900, bolder, and lighter used in real-world web design?
- How could the following rules be better written?
p { font-family: Arial, sans-serif; font-weight: bold; font-size: 24px; color: crimson; } p.copy { font-style: italic; font-weight: bold; line-height: 2em; } p#footer { font-size: 12px; line-height: 2em; font-family: Helvetica, Arial, sans-serif; } - What's wrong with the following rule?
p { font-size: 24; } - Would the declaration font-size: 75%; make the font size larger or smaller?
WHAT YOU LEARNED IN THIS CHAPTER
Throughout this chapter, you learned about inheritance and the cascade, fundamental to CSS. To recap, in this chapter you learned the following:
| TOPIC | KEY CONCEPTS |
| font-family | Setting font faces with the font-family property |
| Font styles | How to make text italic withfont-style, bold with font-weight and small-caps with font-variant |
| Font sizes | The various ways of setting the size of text with font-size and the problems each unit of measurement has |
| Font shorthand | How to use the font shorthand and when it is appropriate to do so |