References: http://www.webmonkey.

com/2010/02/web_typography_tutorial_-_lesson_1/ Web Typography Tutorial Lesson 1 By Webmonkey Staff 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, Ive learned enough to know that although thats 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 cant read your text, I certainly cant understand it, no matter how clever your writing may be. But legibility isnt 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, lets explore the relationship between type and meaning. Associating Meaning with Type When I say type affects meaning, what am I talking about? Why cant 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 Kubricks 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 weve seen it before in grade-school primers and childrens 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 its 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 companys 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 logos designer, put it, Its since been used to symbolize the computer industry, and thats only because its been used by IBM. Theres 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, its 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, were getting there), youll start to notice when a typeface has a large or a small xheight. In this way, youll become sensitive to the vast differences between seemingly similar typefaces, and youll 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 youre familiar with these terms, lets 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 doesnt 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. Category 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. Example

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 ATypIs Display and Decorative. Ive 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, lets 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 doesnt 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 theres more of it. Likewise, while your choice of typeface for body copy can certainly affect the feeling of the text, its more often in display faces that youll 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 wouldnt normally want to set the body of your entire site in a boldly expressive display face like Mesquite doesnt mean you shouldnt 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 well 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 letterby-letter (a la the Electric Company) AntAaannntttAnt! 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. Thats 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.

Lets 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 Its 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. Its 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.