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 setextremely short,the reader willhave to switchlines much moreoften. 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

Ask any Web designer about the use of typographic design on Web pages and they'll tell you the same truth: The Web is a harsh, uninviting environment for the delicateness of fine typography. Along with the usual Web culprit of platform inconsistency, the extreme low resolution of even the best current screens means type online can only allude to the geometry of the typefaces you've so carefully chosen and specified.

The Devil's in the Display

The fundamental problem of online type has nothing at all to do with the Web. The problem -- whether you're building pages for a website, CD-ROM, Palm Pilot, cell phone, or museum kiosk -- is the display. On a computer screen, at least at relatively small sizes, Helvetica is not Helvetica. The chunky pixels on a 72- or 96-pixel-per-inch screen can't possibly match the subtle curves of type.

This means that for body copy, we can barely produce legible type, let alone make subtle stylistic distinctions. What we're left with is the grossest conceivable control - straight versus slanted, static versus dynamic, old versus new, light versus heavy, serif versus sans serif. While it will take radically better displays to bring onscreen typography up to the standards of the ancient Romans, there are several techniques, which do help somewhat.Contents:

Pushing Pixels HTML and CSS When is a Point Not a Point? GIF Images Flash Trouble in Paradise SVG Acrobat Resources On the Web and In Print Suggested readings

Pushing Pixels

Anti-aliasing

The problem of translating curves to pixels can be mitigated in larger (i.e., display) sizes by a technique called anti-aliasing. Anti-aliasing is the process of tricking the eye into seeing smooth curves instead of jagged pixels by using coloured pixels around the

edges of letterforms. Because the pixels are intermediate in tone and colour between the type colour and background colour, they have the effect of smoothing out the curves.

The two problems with anti-aliased text are:

1. It looks fuzzy, and 2. It only works with relatively large sizes of type.

When used with body sizes, anti-aliasing often only produces a mushy mess. An interesting secondary consideration for the Web is that anti-aliased text may appear more corporate or polished and less "immediate" than straight HTML text.

Hinting

At small sizes, there's only so much that can be done to improve on-screen legibility and fidelity to the "real" typeface, and it's done with a technique called "hinting." Hinting is a method of tweaking the outlines of letterforms so that they match up as well as possible to the screen's pixels in order to produce the closest possible - or at least less mangled - reproduction of those ideal outlines. Hinting information is included as part of a typeface, so it's not something you'll need to do yourself, but if you're interested in the gory details, take a look at this Microsoft article on hinting in TrueType.

While the practice may be esoteric, the results of good hinting can be quite dramatic. Compare, for example, the following samples of the same text (more or less) set in the meticulously hinted Verdana as compared with Helvetica.

Now you know why the vast majority of commercial Web pages created in the last year use Verdana. (There's a second, related, reason: Verdana, designed by Matthew Carter and hinted by Thomas Rickner, was originally designed as pixel-friendly bitmaps. Once

those were just right, Carter made outlines from the bitmaps instead of the more-common practice of designing outlines and then trying to generate bitmaps. Another screen-friendly face is Georgia, designed and hinted by the same team.)

Pixel fonts

Another option, especially for really tiny sizes is to use bitmapped typefaces. Since they're designed specifically as bitmaps, without curves at all, faces like Silkscreen and Mini7 don't have the same problem traditional outline fonts have onscreen. On the other hand, because they're designed to the pixel, they work only at the specific sizes for which they were designed. Still, an entire visual style has arisen from these tiny pixellated fonts.

Technologies

Even if display resolution wasn't an issue, type online faces a second major problem: the familiar bugaboo of platform inconsistency. This takes several forms, including different browser and plug-in capabilities and - most challenging - different installed typefaces. We'll take a closer look at these issues as we discuss the various technologies for specifying type on the Web: HTML/CSS, GIF images, Flash, SVG, and Acrobat.

HTML and CSS

The current XHTML spec provides rudimentary font control with the FONT tag, which allows page authors to specify typeface and rough size, like so:

<font face="Verdana" size="3">

However, this technique, while widely practiced now, is currently being phased out in favour of Cascading Style sheets. CSS provides significantly more control, which we'll explore in depth a little later. However, as giving and wonderful as they are, even HTML and CSS have several problems in common. Perhaps the biggest headache arises from the fact that people viewing our meticulously crafted pages may be seeing them in a totally different font than we intended because not everybody has the same typefaces installed on their machines.

Embedding

But, you protest, we can just embed the fonts. And we certainly can, and probably should, but we will still have to assume that a significant portion of our audience won't ever see them. Probably the two biggest reasons more people don't embed fonts are that the tools have really confusing interfaces, and we still have to design around the possibility the fonts won't be downloaded. This paragraph, for example, is set to be displayed in Gill Sans and I've embedded the font, but many of you will see it in the default font for this page instead (which probably looks a lot better in this case). For the full scoop on font embedding, check out Mulder's excellent tutorial.The Shotgun Approach

If we can't fully rely on embedded fonts, we're stuck with guessing what our viewers might have installed. Luckily, we have a few techniques to help us. First off, the HTML FONT tag and CSS font-family property allow us to specify a list of faces, such as "Verdana, Arial, and Helvetica". The browser will display the first typeface in the list, which is available.

Next, we can make educated guesses based on default Windows and Macintosh fonts and the fonts installed by recent versions of Web browsers. Microsoft has a page listing some commonly installed fonts (and not only Microsoft ones). The default fonts are so limited, in fact, that we see the same strings over and over on Web pages:"Verdana, Arial, Helvetica", "Georgia, Times New Roman, Times", "Courier New, Courier".

Generic Families

Finally, we can use generic family names - 'serif', 'sans-serif', 'monospace', 'cursive', and 'fantasy' - to tell the browser to use the closest available face. (I have to take issue here with the absurd notion that "fantasy" should be one of these five core generic families - that one must have been added during some after-hours partying over at the W3C.) Finally, keep in mind that, as put in the CSS 2 spec, "Generic font families are a fallback mechanism, a means of preserving some of the style sheet author's intent in the worst case when none of the specified fonts can be selected."

"Verdana, Arial, Whatever"

So, if you want a sans-serif face, you just plop in "Verdana, Arial, Helvetica, and sans-serif" and you're good to go. If people look at your site and don't have Verdana installed, they get Arial or some other sans-serif face and we can all move on to reading your brilliant article about collecting toy robots. Right? Well, yes and no. The mechanism works fine, but shoot - if all sans-serif faces looked the same, there would be no point to my writing the whole first part of this article. A second issue - especially important for body type - is that, as we've learned, different typefaces at the same point (or pixel) size can appear to be quite different sizes. Indeed, the CSS 2 spec addresses this problem with the font-size-adjust property and also includes a detailed algorithm for more specific font-matching, so we'll still have degradeability but with at least some more control over the actual shape of the letters rather than their membership in hopelessly broad families like "sans-serif" and "serif."

As a side note, there is a particularly funky hack for detecting installed fonts. It involves using JavaScript to compare the relative sizes of a layer of text set in the default face with one set in the face you're testing for. It's fairly ugly, but works surprisingly well. Unfortunately, there's not all that much you can do with that information once you have it.

When is a Point Not a Point?

Type is traditionally (i.e., in the print world) measured in a unit called a "point," which is 1/72nd of an inch on paper. But screens are based on pixels, rather than points. On the original Macintosh, there were close to 72 pixels per inch on the screen, so points and pixels matched up quite nicely, thank you. But now, displays and resolutions vary widely and Macs and Windows machines make significantly different guesses about them.

Without getting into the gory details, type specified in points (or any point-based measurement) will appear larger on a Windows machine than on a Mac.

One solution is to conditionalise your type sizes for different platforms if using CSS or HTML. Another is to use the CSS "px" (for pixels) unit, which will force everything to the pixel grid. The primary drawback is that text set in pixels will generally foil user-defined text sizes. This can cause usability problems, especially if you've chosen particularly small sizes. It also may cause printing trouble (if the printer tries to translate your pixel sizes into points - more on CSS and printing in a moment). But for now, the alternatives may be worse.

In HTML, all we can specify is family and a rough measure of size. With CSS, however, not only can we specify exact size increments, but we can control such crucial properties as line-height, word spacing, and letter spacing (for more on using these properties, see lesson 3 on word- and letter-spacing and line-height). Line-height alone goes a long, long way to improving the readability of a Web page.

Another advantage of CSS is the ability to specify different style sheets for different output devices. The most obvious example is to include a separate style sheet for printing a page (specifying different typefaces, perhaps, or using points rather than pixels for sizing), like so:

<style type="text/css" media="print"> .someClassName { font-family:Bodoni, Georgia, serif; font-size:10pt } </style> <style type="text/css" media="screen"> .someClassName { font-family:Georgia, serif; font-size:12px } </style>

or, linked, like so:

<link rel="stylesheet" type="text/css" media="screen" href="screen.css" /> <link rel="stylesheet" type="text/css" media="print" href="print.css" />

Finally, I wanted to point out what I see as a big problem with using CSS/HTML for specifying type: Designers still lack control over anti-aliasing, especially in display type. Depending on your visitor's particular operating system and settings, type will either be anti-aliased or not. You, as a designer, have no control, which is a darn shame because, as you now know, anti-aliasing doesn't make sense for all typefaces at all sizes.GIF Images

You may think that the lack of control over the way type displays on screen is no big deal. You can just make all your type out of images - GIFs or JPEGs - right? Well, yes and no. Using images to specify type looks at least as good as anything else onscreen and can be seen by almost all browsers, but it also introduces a number of serious problems.

The first problem is that images take up more file size than plain text, which can lead to slower display of your page. Related to this is the issue that each image (and a single page can have many if each header or navigation element is treated as an image) will

require a separate server connection, again slowing down the time it takes for your page to display.

Besides speed issues, text in images isn't selectable or copyable. And it's not viewable by text browsers such as Lynx or screen readers for blind Web surfers. The workaround is to religiously use the ALT attribute of the <img> tag, which you should absolutely do. (If you're not sure what to write, there are plenty of detailed ALT text guidelines on the Web.) Finally, text in images is fixed in size, which means it cannot scale along with non-image text on your page.

In addition to its considerable, though not insurmountable, usability problems, image text can be a pain to manage. Changing text contained in an image requires an image-editing program and the ability to use it; often the organizational province of a graphic designer, while a copyeditor or other member of a Web production team can easily change plain text. Similarly, a change in visual treatment requires changing all images on a site. This is especially significant on a large site where a single change may occur across many images. By contrast, simply editing the appropriate style rule can change CSS-styled text. Finally, text in images is not so easy to generate dynamically (although it certainly can be done). The bottom line is that images are not generally appropriate for personalized portions of a site.

Where images do make sense for text is in navigation or title treatments, where carefully specified and anti-aliased display type can make a site feel much more polished and expressive than jagged default HTML type. Just make sure not to forget about ALT text and consider using plain text if you have a large number of items, such as the navigation on a large news site like CNN.Flash

The reason images are so wasteful of bandwidth is that they're based on pixels rather than a more efficient method of describing visual information, such as [[Reference: Vectors | vectors]. So it stands to reason that a vector-based way of rendering type might make more sense for the Web. The most obvious current choice is Macromedia's Flash.

In terms of type, Flash offers several advantages. The first is file size, as you can see in the following example:

Flash: 548 bytes

Gif: 1,459 bytes

As you can see (assuming, that is, you have the Flash plug-in, which we'll discuss later), the GIF is almost three times as large as the Flash version. Since Flash is all based on vectors, in fact, the larger the type, the bigger the file-size savings. Double the size of the type, and the Flash file will still be only 548 bytes. The second advantage (as you

can see above) is selectability. You should be able to select the text in the Flash example and then copy and paste it. Finally, Flash text can be pulled from an external source - an XML file or a Web server for example - which means both that content management is less a problem than with image files and that text in Flash can be dynamically generated, which as I've mentioned is relatively difficult using an image.

For static text in Flash, there's no need to embed the font, as it will be saved as outlines. For dynamically updated text, Flash supports embedding of fonts, either an entire font or specific glyphs. As with CSS font embedding, the font data can be saved as a separate file and linked from multiple Flash movies. It's also possible to tell Flash to handle type similarly to how HTML and CSS do, by using "device fonts," although you'll be limited to the generic groups ('_serif','_sans', and '_typewriter'). And don't forget, with Flash, you can make your type dance and twirl and fade in and out. I'm not saying you should, just that you can.Trouble in Paradise

But Flash has problems of its own. One of the big ones has to do with anti-aliasing. The trouble is that Flash has no ability to selectively turn anti-aliasing on and off. Either everything in the movie is anti-aliased or nothing is. It sure would be nice to be able to use, say, 10pt Georgia for big blocks of text with no anti-aliasing and still have nice anti-aliased 36pt titles. Are you listening, Macromedia?

Another significant problem is that Flash files included on your pages won't get printed along with the rest of the page. Flash has an internal print mechanism, so you can add a print button to a standalone Flash site, but that won't help with Flash embedded along with HTML in a Web page. If you print this article, for example, you'll see only empty boxes where the Flash samples should be.

Then, of course, there's the fact that Flash is a plug-in rather than a "native" Web language like HTML. This is a legitimate concern, but at this point, after years of browser manufacturers forcing proprietary capabilities on us while ignoring established specifications (like CSS), I'm not sure what's so "native" about HTML and CSS. And Flash is quite widely distributed, with Macromedia claiming over 90 percent "penetration" worldwide. Still, not everyone who visits your site will have the plug-in, let alone the latest version. So you'll want to consider whether you need to have a separate version of your site for non-Flash users. Recent versions make this more feasible by allowing you to store content as XML, readable by Flash and relatively easily convertible to HTML for accessibility.

Finally, many people have pointed out glaring usability problems in Flash movies, often attributing the lack of usability to Flash itself. It's important to understand that many of the common problems (such as long intro animations, obfuscated navigation, and frustrating, non-standard scrolling mechanisms) are due to poor design rather than some inherent aspect of the authoring tool. On the other hand, Flash does have some definite problems, such as its inability to respond to the browser's back button or to allow the user to bookmark a specific "page" in a Flash movie. Many of these issues can be overcome with good interaction design - the back button is less of a worry, for example, if you don't force your visitors into a navigational dead-end - but they may require extra attention. For more on Flash usability, take a look at Macromedia's Flash accessibility pages or Flazoom's usability section.

If you're new to Flash and want to learn how to use the darn thing, visit the Flash Tutorial for Beginners. For more on pixels and vector graphics, take a look at Web Graphics for Beginners.SVG

SVG, like Flash, is a format for describing vectors. In fact, you can think of SVG as a sort of W3C-sanctioned version of Flash, although there are some important differences, most notably that SVG data exists as plain text, rather than in a binary format as does Flash, and that that text is formatted as XML. In fact, once you get past all the contextual stuff like document type declarations and so on, SVG is a pretty straightforward way of describing shapes:

<rectx="100" y="100"width="400" height="50"fill="#33cc33"stroke="#000000" stroke-width="2"/>

Much of the promise of SVG lies, in fact, in its promise. As it exists today, people who have installed the Adobe plug-in. OK can only view it, there are lots of SVG viewers out there, but I'm talking about regular people, not geeks who install development applications. But the idea of being able to handle vector graphics side-by-side with HTML and XML is quite powerful. For animations, it remains to be seen if SVG can compete with Flash, but for static type, SVG could be a godsend. SVG, like Flash, includes several methods for embedding typefaces.

I want to point out something here: Flash is a relatively mature authoring environment, which happens to output movies in a particular binary format. As such, it has a great advantage over SVG, no matter the benefits of SVG's strict XML format. Right now, this is probably the most important distinction - aside from plug-in distribution - between the two. This doesn't mean that SVG won't have its own authoring tools - it will. Indeed, Illlustrator 9 already supports SVG and LiveMotion eventually will as well. Or, just as likely, we'll soon use Flash to generate SVG.

There's growing support for SVG on the viewing side, including both Web browsers and mobile devices. It seems fairly safe to say that either SVG will be a usable part of our lives relatively soon or, if not, that Flash and SVG will converge enough to make the distinction moot.Acrobat

And then there's Acrobat, an entirely different animal. Instead of operating within a Web page, Acrobat files operate in their own self-contained universe. This means on one hand that you'd never use Acrobat to make page titles for a Web page. On the other hand, Acrobat promises precise control over the design of a page. The key word here is "page." Think of Acrobat as an excellent way of distributing paper-like pages over the Internet.

Acrobat files will print exactly as authored, so they can be great for publishing reports or other documents that require graphic and typographic precision. On-screen, however, they're more than a bit clunky to navigate, often seeming either a bit too large or a bit too

small for comfortable reading. Accessibility can also be a problem, although Adobe has done quite a bit to address this with the latest release (Acrobat 5) and by providing tools like their Acrobat to HTML converter. Like Flash, Acrobat requires a browser plug-in.

Finally, despite free and paid converters online, you'll likely want to invest in the full version of Acrobat for satisfactory control over your output.Resources On the Web and In Print

Whew! For a brief introduction to typography online, that's a whole lot to digest. But now you hopefully know enough to choose and set type with confidence, and you can work around some of the problems of using type online. If you want to learn even more, I encourage you to explore the following resources I've included below.

Selected resources

Type foundries

MyFonts.com (MyFonts.com is a Reseller of typefaces for many different foundries.)

Adobe AGFA-Monotype Bitstream Emigre FontBureau FontShop House Industries ITC (International Typeface Corporation) Linotype Library P22 Storm T-26 Free fonts: there are loads of sites offering free fonts for download. Many of them

are quite nice, but many more are relatively shoddy, either in design or in quality. In general, you're best off buying a small number of high-quality fonts from a reputable source. This may also encourage you to use fonts to support text rather than the other way around. As [/webmonkey/html/96/46/index2a.html Kristin wrote] way back in '96, when it comes to type, "Simple is almost always best."

Books

Typographic Design: Form and Communication The Elements of Typographic Style Stop Stealing Sheep & Find Out How Type Works A History of Graphic Design The End of Print Typography FontShop FontBook Precision Type Font Reference Guide

Magazines and other typography resource sites

Web Page Design for Designers Microsoft Typography U&lc:Upper & lowercase Magazine FUSE Createivepro - fonts Robin Williams' Type Talk Fontsite Type books x-height Lines & Splines Textism Typographer.com

Type Designers

Aldus Manutius Francesco Griffo Claude Garamond William Caslon John Baskerville Giambattista Bodoni Morris Fuller Benton Frederic Goudy Eric Gill Jan Tschichold Paul Renner Hermann Zapf Adrian Frutiger Paul Rand Herb Lubalin Saul Bass Erik Spiekermann Susan Kare Neville Brody Matthew Carter

I encourage you to take some time and browse these resources. Pick up a book or two on type. Find a few designers whose work is appealing to you, and then check out their friends. But just remember, the best way to learn about type -- or anything else in design for that matter -- is by experimenting. So, after reading up and looking around for inspiration, pull out your sketchbook or start up your favourite graphics program and do some sketches. And when you think you're done, do some more. And before you know it, you'll be a typography pro!