Next Steps
Using Font-Related Properties
In this section, you'll learn to work with font properties to manage your typographic needs. You'll start with font families and continue with the font specifications described so far: size, style, variant, weight, and stretch.
I'll also cover the following:
-
How font family names follow a stacking convention such as is found with the font element in versions of HTML and XHTML
-
How to use the font property for shorthand
You'll also find tips along the way regarding readability, contrast, and good use of font features.
Begin with Families
A great first step when creating typographic style for the screen is to define the families you'll be using. Even if you modify your style sheets later using grouping, knowing the families you'd like to specify beforehand-both for typeface specification and for the document design itself-provides you with the foundation of your type-related style sheets.
Specifying Type Faces
The reality of font support in style sheets is much the similar to those issues encountered by the designer when employing the font element and its attributes in versions of HTML and XHTML. The specific typeface must be available on the computer viewing your page. And, as with the font element, style sheets do allow you to "stack" any number of typefaces so that you can maximize the chances that your browser will pick up a typeface that you want your audience to see.
By 'stacking' typefaces, I just mean listing several so that if your first font choice isn't available, the second listed will display, and so on. For example, if the people viewing Listing 4.1 in a browser don't have Arial, they'll probably have Helvetica and that will be displayed. If they don't have that, the last listing of a generic family name (in this case, sans-serif) will swap in a sans-serif font, and you'll be good to go.
| Note | Although these typefaces have some minor differences, they are similar enough to be considered workable in the context of style sheet design. |
Listing 4.1 provides an inline example.
Listing 4.1: WWW. Inline Style Example of font-family Order
 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Inline Example of font-family Order</title> </head> <body> <p>This paragraph has no style or font information added to it. Therefore, it relies on the browser's own defaults for a typeface.</p> <p style="font-family: Arial, Helvetica, sans-serif">In this selection, the browser will search the user's computer for the Arial font. If it's found, it will be used to display the element. If Arial isn't found, the browser will look for Helvetica. If neither is found, the browser will display the first sans-serif typeface available.</p> </body> </html>
|
Figure 4.10 shows the difference between the first paragraph, where the browser defaults determine what typeface to display, and the second paragraph, where the typeface is controlled by CSS.
Figure 4.10: The default font compared to the Arial font displayed by one browser and computer
| Note | You are always in some danger that you'll lose control when stacking typefaces, particularly those within the Fantasy family. The Fantasy fonts tend to be the ones that are installed by individuals rather than shipped with the computer in question. |
Of course, you'll often want style sheets that use a variety of families for an attractive visual look. Depending upon your design and type skills, you may have a range of type ideas already in mind that will help guide your final choices.
For the purposes of learning incrementally, let's keep the process very simple at this point. Begin by using a serif font for headings, and a sans-serif font for paragraphs. The rationale here is that we you want to create a little contrast between the heading font and the body font, but ensure that the body text is easily readable. You'll then add additional features as the chapter progresses.
In print, most people are accustomed to using san-serif fonts for headers, and serif fonts for body text. For the screen, this convention can be reversed if you prefer to use the more rounded letterforms of sans-serif fonts for body text and still would like some visual contrast between the header and body faces.
For now, examine the heading and paragraph CSS rules found in Listing 4.2 to style fonts that are appropriate for easy reading and legibility.
Listing 4.2: WWW. Styling Heading and Paragraph Fonts Using CSS
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Example of Simple Font Styling</title> <style type="text/css"> h1, h2, h3, h4, h5, h6 { font-family: Georgia, Times, serif; } p { font-family: Verdana, Arial, Helvetica, sans-serif; } </style> </head> <body> <h1>The Laying Of The Monster</h1> <h2>By Theodosia Garrison</h2> <p>Dorothea reposed with her shoulders in the shade of the bulkhead and her
bare feet burrowing in the sun-warmed sand. Beneath her shoulder blades was a
bulky and disheveled volume--a bound year of Godey's Lady Book of the vintage
of the early seventies. Having survived the handling of three generations,
this seemed to take naturally to being drenched with rain and warped by sun,
or, as at the present moment, serving its owner either as a sand-pillow or as
a receptacle for divers scribbled verses on its fly-leaves and margins.</p> <p>It was with a poem now that Dorothea was wrestling, as she wriggled her
toes in the sand and gazed blankly oceanward. Under the scorching August
sun, the Atlantic seemed to purr like a huge, amiable lion cub. <p>It was not the amiabilities of nature, however, in which Dorothea found
inspiration. A harp of a single string, she sang as that minstrel might who
was implored to make love alone his theme.</p> </body>
</html> |
| Note | At this point there are no defined differences between headings in terms of size, color, and other styles. For this reason, I've grouped them together. |
Figure 4.11 shows the results of this simple style sheet.
Figure 4.11: The heading style is serif, and the body text in sans-serif, creating a nice contrast between heading and body.
Determine Sizing
You can accomplish sizing by using the font-size property and an associated value.
Value measurements in CSS can be defined using a variety of value measurements, including the following:
|
|
| Note | For a closer look at additional possible measurements and the definitions of those measurements, please see Appendix A. |
The value measurement you choose will depend upon the media with which you are working. For screen, you'll likely want to use a measurement value appropriate for the screen, such as pixels or ems. For print, a measurement such as points or inches may be in order.
|
It's been a hot debate over which type measurement is best for screen. Many people recommend ems or percentages because they can be made relative to a given value. Other folks, such as Jeffrey Zeldman, highly regarded web designer, standards evangelist, and publisher of A List Apart Magazine, (www.alistapart.com/) recommend using pixels or nothing at all, unless you're concerned with accessibility, in which case ems are thought to be the better choice. One thing all people agree on is avoiding points (unless for use in CSS for print). The sizing discrepancies may occur because of inconsistencies in the way browsers and browser versions manage sizing units. For more information on this issue, please see:
-
'Give Me Pixels or Give Me Death,' an informative article on sizing at A List Apart, www.alistapart.com/stories/fear4/index.html.
-
A good general article about CSS text sizing can be found at hotwired.lycos.com/ webmonkey/98/35/index2a.html.
|
If you take a look at the CSS created in Listing 4.2, you'll notice there is nothing determining at what size the fonts should appear. You can work from the previous style sheet above to expand the headings and paragraphs as follows:
-
Copy the style portion of the sheet from Listing 4.2 as follows:
<style type="text/css"> h1, h2, h3, h4, h5, h6 { font-family: Georgia, Times, serif; } p { font-family: Verdana, arial, helvetica, sans-serif; } </style> -
Set up individual rules for each of the headings (I'm going to use h1 - - h3 and leave out h4 - - h6 as I don't need that many headings for this project):
<style type="text/css"> h1 { font-family: Georgia, Times, serif; } h2 { font-family: Georgia, Times, serif; } h3 { font-family: Georgia, Times, serif; } p { font-family: Verdana, arial, helvetica, sans-serif; } </style> -
Add the font-size property to each entry, as follows:
<style type="text/css"> h1 { font-family: Georgia, Times, serif; font-size: } h2 { font-family: Georgia, Times, serif; font-size: } h3 { font-family: Georgia, Times, serif; font-size: } p { font-family: Verdana, arial, helvetica, sans-serif; font-size: } </style> -
Add values, in pixels, for each. Because you'll want to have your headings incrementally smaller than the last, and the paragraph text appropriately sized for body text, you'll add these values as follows:
<style type="text/css"> h1 { font-family: Georgia, Times, serif; font-size: 24px; } h2 { font-family: Georgia, Times, serif; font-size: 20px; } h3 { font-family: Georgia, Times, serif; font-size: 18px; } p { font-family: Verdana, arial, helvetica, sans-serif; font-size: 16px; } </style>
Figure 4.12 shows the results of using family and sizing for headers and paragraphs.
Figure 4.12: Family and sizing used to style headers and paragraphs
Adding a Font Style
Font style refers to the slant of a given typeface. The styles available are normal, italic, and oblique. Normal style typically refers to the 'Roman' style of the font-the basic font with no adornment. Italic styles are available in most typefaces, so you're pretty safe using it wherever you require italics.
| Note | Oblique is rare in most fonts and therefore should be used cautiously. |
Because the normal value is default, there's no need to use it in this instance. However, I'd like to make the author's name appear in italics. To do so, I'd add the font-style property to the h2 heading styles:
h2 { font-family: Georgia, Times, serif; font-size: 20px; font-style: italic; } Tip Try to use italics and bold sparingly. Their primary function in body type is to emphasize passages of text. Excessive use of bold or italics looks amateurish and can seriously compromise readability.
Any h2 will now appear in italics. If you wanted to keep the h2 free from the italicized style, you can create a class, h2.italic, and apply the class only where you'd like h2-level headings italicized.
Creating a Font Variant
The font-variant property allows you to create a visual variation to a font. This variation is "small-caps" and places lowercase letters in capital letters, with slightly larger variations for truly capitalized letters. If a font doesn't have this feature within the font itself, most browsers will attempt to simulate the variant.
Since the h1 style in the current document you're using for this chapter could use a little extra panache, you can add it by following these steps:
-
Add the font-variant property within the style rule:
h1 { font-family: Georgia, Times, serif; font-size: 24px; font-variant: } -
Type the small-caps value:
h1 { font-family: Georgia, Times, serif; font-size: 24px; font-variant: small-caps; } -
Save the changes to your file.
Figure 4.13 shows both the small-caps font variant and the h2 italicized font style.
Figure 4.13: Using font-style and font-variant to create styles for heading
Gaining and Losing Font Weight
Weight is how thick or thin a typeface is. The Arial face, for example, has variations in weight including black (a very heavy face), bold, light, and so forth.
Weight is applied by using the font-weight property and an associated value. Values for the font-weight property are as follows:
-
Normal
-
Bold
-
Bolder
-
Lighter
-
100 - 900
Normal is the normal weight of the font before any modification, and it relates to the numeric value of 400. Bold relates to the numeric value 700. Using the 'bolder' and 'lighter' variations specifies that the font weight is darker or lighter than the inherited value.
If you wanted to make sure that all your strong elements were a weight of 800, you could write a rule as follows:
strong { font-weight: 800; ) Of course, you can create classes to help you modify text as well. Let's say you wanted a special light class for certain text. You could create a class of .light, and then apply a rule to it:
.light { font-weight: 100; } | Note | Because typefaces have different variations, unless you are absolutely sure that visitors to your site have a specific typeface, you generally should apply a value that is going to be available to all typefaces you are using. The one near-global value for typefaces is bold, whereas numeric font weights relate to the fonts themselves. If you use a numeric weight instead of a bold value, and there is no means to display variations within the font itself, then a value of 400 will appear the same as a normal value, and a value of 700 will appear the same as standard bold value. |
Listing 4.3 includes all of the property values applied to the document so far.
Listing 4.3: WWW. A Document Modified with Font Properties
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <title>css typography</title> <style type="text/css"> h1 { font-family: Georgia, Times, serif; font-size: 24px; font-variant: small-caps; } h2 { font-family: Georgia, Times, serif; font-size: 20px; font-style: italic; } h3 { font-family: Georgia, Times, serif; font-size: 18px; } p { font-family: Verdana, arial, helvetica, sans-serif; font-size: 16px;} strong { font-weight: 800; ) </style> </head> <body> <h1>The Laying Of The Monster</h1> <h2>By Theodosia Garrison</h2> <p>Dorothea reposed with her shoulders in the shade of the bulkhead and
her bare feet burrowing in the sun-warmed sand. Beneath her shoulder blades
was a bulky and disheveled volume-a bound year of <strong>Godey's Lady
Book</strong> of the vintage of the early seventies. Having survived the
handling of three generations, this seemed to take naturally to being
drenched with rain and warped by sun, or, as at the present moment, serving
its owner either as a sand-pillow or as a receptacle for divers scribbled
verses on its fly-leaves and margins.</p> <p>It was with a poem now that Dorothea was wrestling, as she wriggled her
toes in the sand and gazed blankly oceanward. Under the scorching August
sun, the Atlantic seemed to purr like a huge, amiable lion cub. <p>It was not the amiabilities of nature, however, in which Dorothea found
inspiration. A harp of a single string, she sang as that minstrel might
who was implored to make love alone his theme.</p> </body>
</html> |
|
No major browser supports the font-stretch property. You can try it out, but you'll see no results! Still, it's important to know about because it is a part of CSS2, and support for it could appear.
The idea behind font stretching is to enable designers to make their fonts more condensed or more expanded, depending upon the visual effects they'd like for their design. The following is an example of how, if the property were available, you might write a rule using font-stretch:
.stretch { font-stretch: ultra-expanded; } The value options for the font-stretch property are as follows:
-
ultra-condensed
-
extra-condensed
-
condensed
-
semi-condensed
-
normal
-
semi-expanded
-
expanded
-
extra-expanded
-
ultra-expanded
Normal is the standard form of the font with no condensation or expansion occurring.
|
EAN: 2147483647
Pages: 86