Web Typography Tutorial

Overview

Though many outside the design community see type as "just lines on a page," it has long been considered an art form, as well as a potent form of communication with a stylistic language all its own.

From the calligraphy schools of ancient China to the explosive new forms of David Carson, it's clear that type is more than just a vehicle for conveying information to the user. If done right, type can be one of the most powerful tools for shaping the way an audience perceives written information, written information such as these very fiery-hot words you see before you.

The pages that follow are your mini-guidebook to the strange and magical land of type. Your guide on this tour is Webmonkey Nadav, the designer with a human-friendly touch.

Nadav has divided this tutorial into two sections. In the first lesson, Nadav provides a gentle introduction to typography to give you a basic overview of how type works. The second lesson examines the challenges specific to using type on Web page: How to make it legible on a computer screen? Which type technologies do you need to master to control the fonts on your pages? Nadav reveals answers to those questions, and more!

Web Typography Tutorial - Lesson 1

Before I knew anything about typography, I thought of it as some kind of high magic, shrouded in arcane terminology and a long, mysterious history. Since then, I've learned enough to know that - although that's all quite true - even us mere mortals can use type sensitively by learning a bit about how it works and paying just a little attention to how it is used.

Why should we care so much about this arcane art? Design is fundamentally about communication, and, for all the power of images, words remain at the core of how we communicate. Typography is the practice of visually representing words. Type conveys meaning, both in the obvious sense that words and sentences communicate, and in the subtler sense that the particular visual representation we use - the style, size, and so on - affects the message. While a computer might care only which ASCII codes are represented, we humans are affected by associations and visual relationships:To us, Helvetica means something different than Garamond.

Type also affects communication in the straightforward sense of legibility. If I can't read your text, I certainly can't understand it, no matter how clever your writing may be. But legibility isn't just an algorithm to follow ("always use 66 characters per line" or "serif typefaces are more readable than sans-serif"). Legibility is subtly affected by the shape, spacing, and size of individual letters and words, and the arrangement of those words into lines on the page or screen.

All of the effort we put into our text - both in terms of content and presentation - has a direct effect on the meaning of the message we convey. This is one of the most basic precepts of typography. So, before we get into the specifics of displaying type, let's explore the relationship between type and meaning.

Contents:

• Associating Meaning with Type
• Letters as Pictures
• Typographical Terms
• Historical and Stylistic Categories
• The Secrets of Legibility
• Letterspacing, Line Height, and Line Length
• X-Height, Weight, and Serifs
• Suggested readings

Associating Meaning with Type

When I say type affects meaning, what am I talking about? Why can't I just choose one of my favorite faces and be done with it? Well, I think an illustration is in order:

This example may be extreme, but the point is that your choice of typeface can either undercut your desired meaning or it can support and extend it. When we see "HAL 9000" set in Data 70 - a typeface designed in 1970 to look like futuristic computer output - the idea of HAL, the misguided computer from Kubrick's 2001:A Space Oddyssey, is communicated both in the semantic meaning of the words and in the visual, associational meaning of the letterforms. The visual and semantic meanings coincide, making each stronger. When we see the same words in the whimsical Art Nouveau face Hobo, our brains have to work to ignore the visual meaning conveyed by the typeface in order to comprehend the semantic meaning contained in the word. Of course, as with any "rule," there are times where you might want to intentionally force this conflicted reaction for effect.

What, then, makes one typeface communicate one thing and another typeface communicate some other thing? This is a difficult question, but the simple answer is that it does so in two ways:by association and through basic visual communication.

Associations have to do with our past experience:Where have we seen a given typeface before? What did it mean then? Schoolbook conveys a feeling of childhood innocence in large part because we've seen it before in grade-school primers and children's books:

We similarly associate stencil faces with blueprints, construction sites, military lettering, and shipping crates. Associations also work in reverse:One of the complaints typographers have about Helvetica is that it's been used so often, in so many different circumstances, that it has ceased to have any associational meaning. Of course this sort of meaninglessness can be a meaning all its own, perfect for creating a sort of unstyled style.

The IBM logo is another interesting example of how type gains meaning. Many of us see this familiar logo and think the horizontal lines are there to convey the idea that IBM makes computers. But, as it turns out, the lines are there for very different reasons:They lighten up what would otherwise be a very heavy logo while suggesting the company's authority and reliability by evoking the anti-forgery lines of financial documents. In fact, they signify "computer" to us only because of their use in the logo of a huge, highly-visible computer company. As Paul Rand, the logo's designer, put it, "It's since been used to symbolize the computer industry, and that's only because it's been used by IBM. There's nothing inherent in horizontal lines or vertical lines that says 'computer' except what you read into it because of association with a good company." (Paul Rand, by Steven Heller, p. 156.)

Letters as Pictures

Unlike associational meaning, which is dependent on culture and history, visual communication comes into play on a basic human level. Hard edges evoke different emotional responses than soft edges. Ornamentation, such as elaborate serifs or uneven edges, will give a different feel than sparse, unadorned letterforms. Other differences abound, including shape, thickness, color, variation, symmetry, and so on.

Obviously, the differences among type faces are myriad. To get a grasp on all of these distinctions, it helps to name the different aspects of letterforms and typographic design.

Typographical Terms

While typographic terminology may sound impossibly cryptic, it's worth learning a few key terms both to be able to talk about type with other designers and simply because it will help you see the differences between various type faces. Once you know what "x-height" means (hang on, we're getting there), you'll start to notice when a typeface has a large or a small x-height. In this way, you'll become sensitive to the vast differences between seemingly similar typefaces, and you'll be able to communicate to other people the reason why different faces feel different to you.

What follows are a few basic terms and their meanings. I should note that my chart was inspired by this nice illustration at U&LC and the interactive type tutorial at counterspace, both of which are well worth visiting for more detail.

Ascender: The portion of a lowercase letter that extends above the x-height. Descender: The portion of a lowercase letter that extends below the baseline. Stroke: Any line (straight or curved) which makes up part of a letterform. Counter: The negative space which is fully or partially enclosed by a letterform. Stem: A major vertical or diagonal stroke in a letterform. Serif: The short stroke extending off the main stroke of a letterform. x-height: The height of lowercase letters (not including any optical correction in rounded letterforms). 'Baseline: The imaginary line on which the capital letters rest.'

Now that you're familiar with these terms, let's get a historical perspective by taking a look at the changes in the world of type over the years.

Historical and Stylistic Categories

The history of type is a history of technological changes:The evolution of type through the 19th century was largely one of refinement made possible by advances in printing technology. That doesn't mean a "modern" face like Didot is better than an "old-style" face like Bembo. It simply means that the style (and accompanying associations) are different, just as the Eiffel Tower is different from the Parthenon.

While industrial revolution-era technology and the display demands of 19th-century advertising led to a proliferation of new forms (greatly expanded again in recent years as the personal computer freed type from the physical world and simultaneously made type design accessible to the masses), typefaces are still generally classified more or less as follows:Old style, Transitional, Modern (or Didone), Egyptian (or Slab-serif), and Sans-serif.

Old-style - Low contrast within strokes, weight variations at an angle, bracketed serifs (serifs joined to strokes with curve)

Transitional - Higher contrast than old-style, more vertical, finer serifs

Modern (Didone) - Extreme contrast between thick and thin strokes, vertical axis, thin or hairline (and often horizontal) serifs

Egyptian (Slab-serif) - Unbracketed slab serifs, even strokes

Sans-serif - Lack of serifs (surprise!), generally uniform strokes, usually vertical, often geometric

Sans-serifs can be further classified as: Realist: Little or no variation in width of strokes, vertical axis, small or closed aperture (eg:Helvetica) Geometric:No variation in strokes, no stress (i.e. round), large aperture (eg:Avant Garde) Humanist:Varied stroke, slanted axis, large aperture (eg:Frutiger, Syntax)

Classification and descriptions for this chart were taken, in part, from the book Typographic Design:Form and Communication by Rob Carter, Ben Day, and Philip B. Meggs.

Actually, there are many different ways of classifying type, but the categories listed above are both simple and fairly typical, plus most schemes fall short when dealing with the recent flourishing of type design, dumping everything from Moonbase Alpha to Fusaka into a miscellaneous category like ATypI's "Display and Decorative". I've also never felt Slab-serif faces quite deserved their own category; indeed at least one more-recent attempt at categorization combines them with the geometric Sans-serifs with which they share many characteristics.

Now, let's use these loose classifications to see how two different applications of type - display type and body type - are used to help the reader identify with the meaning of the text.

The Secrets of Legibility

When specifying type, it helps to think about how the type will be used. Type is generally divided into two categories:text (or body) type and display type. The distinction is technically one of size - text type is typically set at 12 points or below - but the names refer to usage, with text type used to set body copy and display type used for titles, signage, navigational elements, and so on. Of course, this doesn't mean body copy is never set in 14-point type.

In general, legibility is more of an issue for text type, both because of the smaller size and the fact that there's more of it. Likewise, while your choice of typeface for body copy can certainly affect the feeling of the text, it's more often in display faces that you'll want to choose a typeface with a particularly strong personality. For example, while a face like Mesquite - which was designed explicitly as a display face - is barely legible at 12 points, it does a wonderful job of communicating an old-western feel when used as a header.

Just because you wouldn't normally want to set the body of your entire site in a boldly expressive display face like Mesquite doesn't mean you shouldn't spend as much time and care choosing body faces as you do selecting display faces. For body copy, legibility becomes of primary concern. This need is exacerbated on the Web, where reading is under less-than-ideal conditions, as we'll discuss in lesson two of this tutorial. An understanding of the main factors that influence legibility will go a long way to helping you choose a typeface that not only expresses the meaning of your text, but can actually be read!

One of the keys to understanding type legibility may seem surprising at first. It turns out that human beings read entire words, and sometimes even phrases, rather than piecing them together from the individual letters. Instead of seeing the word "Ant" and sounding it out letter-by-letter (a la the Electric Company) - "A...n...t...Aaannnttt...Ant!" - we instead see a shape that matches our memory of the word "Ant."

This process is easier to see with an unfamiliar word that we actually do have work out the pronunciation from the letters (Myrmecology, for example, although the "-ecology" part might read as a single shape). This is also probably why even a common word can start to look bizarre if we stare at it long enough.

That's all well and good for theory, but it also has a practical implication. Because we rely on differences in shape to distinguish words, the more differentiation there is the easier a word will be to read. THIS IS WHY TEXT SET IN ALL CAPS IS (IN GENERAL) MORE DIFFICULT TO READ THAN MIXED CASE TEXT.

Let's finish up this lesson by exploring how the structural aspects of typefaces - such as spacing, weight, and serifs - can affect the legibility of your body text.

Letterspacing, Line Height, and Line Length

Letterspacing

It's not just the external shape of words that helps us read, we also look at the internal structure of a word. For this reason, proper, balanced letterspacing - spacing between the letters of a word - is crucial to legibility. "Kerning" is a related term which refers specifically to reducing the space between troublesome letter pairs (such as "AV") to improve appearance and legibility.

Line height

Line height - the measure of the space between lines of text - can likewise have a significant impact on readability. If lines are too close together, it is difficult to keep the eyes on the current line. Too much space, on the other hand, and it becomes difficult to move from one to the next.

(Quote by Marshall McLuhan, from Understanding Media)

Line length

There are many opinions of optimum line length (the number of characters per line), but the ideal length is often determined in part by secondary factors such as size. The main issue for the reader is the disruption of having to go from the end of one line to the beginning of the next. When lines are too long this can be quite difficult because of the sheer distance the eye has to travel. On the other hand,

if lines are set

extremely short,

the reader will

have to switch

lines much more

often. It's considered ideal to keep lines to somewhere around 60 or 70 characters (including punctuation and spaces), but anything from about 40 to 80 characters is generally reasonable. And for small amounts of text, significantly shorter lines can be OK.

X-Height, Weight, and Serifs

X-height

Since x-height measures the height of the lower-case letters relative to the uppercase letters, it has a great effect on overall legibility. A typeface with a very small x-height can be difficult to read due to the small resulting size of the openings (apertures) of lowercase letters. On the other hand, an extremely large x-height can reduce the distinctness of word shape and often requires more space between lines, since each line has less internal white space.

Weight

The weight (the thickness of the strokes) of a typeface can also affect legibility. A very light face may be difficult to distinguish from the background, while heavy strokes may make letter shapes less distinct, especially at smaller sizes where apertures begin to close up.

Serifs vs Sans-serifs

A long-time truism of typographic design is that text set in a serif face such as Bembo is more legible than text set in a sans-serif face like Univers. The logic is that the serifs emphasize the horizontal motion necessary to read a line of text and simultaneously help differentiate the letters. But this is an oversimplification, and like most oversimplifications it can be misleading. Other factors, such as aperture size and letter-, word-, and line-spacing have a far greater impact on overall legibility. In addition, on the low resolution of computer screens, serifs often serve only to muddy already indistinct letterforms.

Which brings us to part two of this article, a discussion of some of the issues that arise from the forced combination of the delicate art of typography with the unwelcoming coarseness of the Internet.

Web Typography Tutorial - Lesson 2

Resources On the Web and In Print