Working with text Properties

Understanding CSS Type

Throughout history, humankind has found ways to express itself using many script and handwriting and—eventually—type styles. Whether the expression is functional (see Figure 4.1), aesthetic (see Figure 4.2), or groundbreaking (see Figure 4.3), type plays an enormous role in visual design.

click to expand
Figure 4.1: The type on the WaSP home page is easy to read and therefore very functional

click to expand
Figure 4.2: While still readable, the type on this page is used for aesthetics, too.

Many readers of this book are experienced graphic designers and therefore have at least a broad, if not very specific, education when it comes to typography. But, many other readers won’t have that advantage. No matter what your background, it’s important to recognize immediately that the way CSS specifications deal with type is unique to CSS.

While there are certainly relationships between CSS typography and classic print typography, CSS typography must be seen in a distinctive light. To that end, I’ll provide information on corollaries within CSS, classic typography, and HTML-based typography. First I will focus in this chapter first on principles as they relate specifically to CSS, and then I will make comments on those concepts analogous to other typographic principles.

Note 

 For the majority of this chapter, the focus will be on how CSS typography works on screen, unless otherwise noted.

Control is something that’s been lacking for designers, and this is why CSS has become such an exciting topic. Control becomes especially important when you’re creating large sites. Instead of having to work with multiple, worrisome font elements and related attributes, CSS allows you to create a single style sheet that defines all the styles required for the entire site, including a variety of link types, specialty links, anchors, and lists. Or, you can use a variety of integration means, just as you would while working with CSS properties in general.

click to expand
Figure 4.3: Type within this design is largely experimental rather than specific to verbal communication

Presentation of Text Using CSS

So now, instead of the dreaded and problematic HTML font element, you can use the style sheet’s property font-family to select fonts, and a variety of related font and text properties, including shorthand properties, to style your type. What’s more, you can add a wide variety of typographic features to type and text that extend far above and beyond what’s available in HTML, providing you with extended options and more refined design results.

In CSS, there are two major groups of properties that help manage typographic presentation. They are:

  • Font properties

  • Text properties

Font properties are specific to how CSS defines aspects of font presentation. These properties are designed to control type family, style, variants, weight, condensation and expansion of fonts, and the size of the font.

Text properties are a little more global and relate to a variety of text-related concerns: indentation, alignment, decoration, spacing of letters and words, transformation, and white space.

Understanding CSS font Specifications

As in classic print typography, there are ways of defining features when it comes to individual fonts and groups of fonts.

The following specifications are the primary font-related properties within CSS. In the following list, the properties follow the description of the specification.

Understand the meanings of each of these specifications and their related properties, and you’ll be well on your way to terrific style for your pages:

Font Family (font-family) Font families are groups of fonts that contain similar features. The categorization of families is typically broken up in typography by a font’s master family (serif), the font’s specific family (Times), and members of the font’s family, such as bold, italic, or condensed forms (Times bold, Times italic, and so forth). In CSS, there are five generic font families, and the font-family property can be used to specify the font’s specific family as well as its generic family. See the section "Style Sheet Font Families" later in this section for more details.

Font Style (font-style) The style of a font describes whether the font should be rendered as normal, italic, or oblique. Oblique is a slanted version of a typeface that can be considered is similar to italic but is usually not as slanted as an italicized form, although the distinction is not often clear. Oblique forms are most commonly associated with sans-serif fonts (see Figure 4.4).

click to expand
Figure 4.4: Examples of font styles

Font Variant (font-variant) A font’s variant allows for that font to be displayed in either as normal lowercase letters for lowercase text, or small capitals (often referred to as small caps) for lowercase text, which is often referred to as small caps (see Figure 4.5).

click to expand
Figure 4.5: Examining font variants

Note 

 Web browsers are permitted to use all capitals as a substitute for small capitals. Internet Explorer for Windows prior to IE 6.0 is known to make this substitution.

Font Weight (font-weightThe weight of a font is the amount of boldness or lightness as it relates to the standard weight within that family (see Figure 4.6). Different font families have different available weights—not every weight available in CSS will be available within a font.

click to expand
Figure 4.6: Compare these weight samples with the standard weight. Note that many typefaces cannot adequately render the differences in the numeric values.

Font Stretch (font-stretch) Stretching refers to the amount of condensing or expansion in a given letter or set of letters. As with weight, stretching is relative to the standard weight of other typefaces within that family. Figure 4.7 shows the concept of condensation and expansion in typography, but unfortunately, there is no current support for this property, so it’s not possible to replicate this in any browser, despite the fact that the property is in fact a part of the CSS2 specification.


Figure 4.7: Condensed (top) and expanding (bottom) examples using non-CSS glyphs


Figure 4.8: Sizing type from baseline to baseline

Font Size (font-sizeIn CSS, font-size sets the height of the character boxes in the element. For each character box, some of the box will actually be below the baseline (such as in the case of descenders, parts of letterforms such as is found in a lowercase "g"). There is some confusion as to the exact way that fonts are sized, however, leading to discrepancies in the way the CSS2 specification is written and implemented.

Note 

 W3C’s CSS Working Group member David Baron, describes a simple explanation of the concern: www.people.fas.harvard.edu/~dbaron/css/fonts/explanation.

Style Sheet Font Families

In an attempt to address the major family groups available in print typography, CSS recognizes five font families, attempting to address the major family groups available in print typography.

Because there’s no universally specific means of categorizing type (although there are many conventions used in classification), CSS uses its own means of specifying font characteristics. You’ll learn more about these when you study font properties in detail later in this chapter. However, it’s important to begin with an understanding of how type families are categorized.

Five font categories, (often referred to in typography as master families), are defined within CSS. It’s important to recognize that these are considered generic families. That is, the category itself can be used as a catch-all means of ensuring that if no specific family, such as “Verdana” is denoted, the browser in question will display the local computer’s default font for that family. However, within these categories exist numerous specific families. Table 4.1 will explains the generic families and, their features, and also provide examples of fonts found within those generic families.

Table 4.1: CSS Font Families

Generic Family

Description

Example Fonts within the Family

Serif

Serif faces are those faces with strokes (known as serifs, they mimic handwriting flourishes). These strokes are said to aid in readability in print as they provide the effect of subtle tracing lines to guide the eye. Therefore, serif typefaces are often very popular for large amounts of printed text. There is some discussion as to whether serif faces are as readable on-screen; most people think they are not as readable as other forms. Therefore, most web designers prefer using serifs for accent text.

Some examples of serif faces include Times, Times New Roman, Garamond, and Century Schoolbook.

Sans-Serif

These typefaces tend to be rounded and have no strokes. Many sans-serif fonts are excellent for screen readability as they often appear crisper, wider, and clearer on screen than serif fonts.

Common sans-serif faces include Arial, Verdana, Helvetica, Trebuchet, and Tahoma.

Script

A script face is one that looks similar to cursive writing or handwriting.

Common script typefaces include Lucida Handwriting.

Monospace

These faces look like typewriter fonts. They are called monospace fonts because each letter within the face takes up the same width as another. For example, the letter w, which is wider in most faces than an i, is actually the same width in a monospace font. Monospace fonts can be used decoratively for web pages, but mostly they are used to display code samples and preformatted text.

Courier is the common monospace font found on both the Windows and Macintosh platforms.

Fantasy

Referred to by most typographers as decorative, the fonts available in this category are best used for headings and artistic text rather than body text.

Decorative fonts include Whimsy and Comic Sans.

Figure 4.9 shows an example of each of these font types.

click to expand
Figure 4.9: Exploring font families as defined in CSS

Tip 

 It’s best to avoid using the fantasy value because there’s a lot less control as to which glyph a browser might substitute for a fantasy font. An example would be that if the initial desired, readable, decorative font were not available on a site visitor’s machine, an unreadable font such as Windings might be substituted, completely destroying the message of your page.



Cascading Style Sheets(c) The Designer's Edge
ASP.NET 2.0 Illustrated
ISBN: 0321418344
EAN: 2147483647
Year: 2005
Pages: 86

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net