Category Archives: Fonts

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 meanssomething different than Garamond.

helvetica_garamond.gif

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 howclever 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

  1. Associating Meaning with Type
  2. Letters as Pictures
  3. Typographical Terms
  4. Historical and Stylistic Categories
  5. The Secrets of Legibility
  6. Letterspacing, Line Height, and Line Length
  7. X-Height, Weight, and Serifs
  8. 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:

hobbit_9000.gif

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’s2001: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:

schoolbook.gif

We similarly associatestencil 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.

ibm_logo_sm.gif

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.

pictures_of_letters.gif

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 thisnice 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.

Category Example
Old-styleLow contrast within strokes, weight variations at an angle, bracketed serifs (serifs joined to strokes with curve) garamond.gif
TransitionalHigher contrast than old-style, more vertical, finer serifs caslon.gif
Modern (Didone)Extreme contrast between thick and thin strokes, vertical axis, thin or hairline (and often horizontal) serifs bodoni.gif
Egyptian (Slab-serif)Unbracketed slab serifs, even strokes memphis.gif
Sans-serifLack of serifs (surprise!), generally uniform strokes, usually vertical, often geometric frutiger.gif
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.”

ant_outline.gif

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.

letter_spacing.gif

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.

line_height.gif

(Quote by Marshall McLuhan, fromUnderstanding 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.

xheight.gif

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.

See you in Lesson 2!

 

Typotheque’s Web Fonts Rock, But Old Machines Can’t Learn New Type Tricks

Font foundry Typotheque has introduced a new web font system that gives web authors a new set of font embedding options for their website designs. However, as cool as Typotheque’s new tools are, they can’t overcome some larger problems with the @font-face rule in CSS and the state of type on the web in general.

Typotheque, a Netherlands-based font foundry, recently unveiled a set of web licenses and an easy cut-and-paste solution for web developers looking to take advantage of the CSS3 @font-face support in modern web browsers. The solution is particular nice because it doesn’t require the overhead of loading JavaScript libraries like some other proposed solutions we’ve covered, such as TypeKit. Typotheque’s system requires only a CSS file and a simple @font-face stylesheet rule.

Also working in Typotheque’s favor is a web-only license, which is issued and controlled by the company, that’s considerably cheaper than licensing the actual font files.

Unfortunately, in the real world, @font-face’s results aren’t always what you expect. As BoingBoingrecently discovered when it tried a redesign using @font-face to embed custom fonts, CSS3′s @font-face rule doesn’t always render correctly on older PCs.

While it’s nice to see font foundries like Typotheque embracing both web licenses and simple embedding tools, the results are decidedly mixed. So long as your site’s users are running a modern OS like Mac OS X, Windows Vista or most Linux distros; and they have modern browsers like Firefox or most of WebKit-based browsers, the @font-face and Typotheque’s new embedding system work wonderfully. The only minor issue is a quick flash of unstyled text appearing when the page loads in Firefox, but that can be addressed with a simple JavaScript workaround.

However, for those users still using Windows XP, embedded fonts are not, by default, anti-aliased and results in jagged, ugly fonts that aren’t going to make you or your visitors happy.

To see how things looked in various browsers, we loaded Typotheque’s Fedra Sans font up in a test page at 72 pixels and then looked at it in various browser/OS combos:

Fedra Sans in various browsers. Click the image for a larger view.

As the image above demonstrates, the results are just fine in Firefox on Mac OS X and Linux, acceptable in IE7 in Windows XP and downright ugly in IE6 on XP. Given the considerable percentage of web users still browsing with IE6 in Windows XP, @font-face clearly isn’t going to work for every site.

Still, for those that just want to experiment with @font-face, Typotheque’s new system is the simplest, cheapest system we’ve tested. There’s even a free month-long trial available for testing purposes. For more details, head over to the Typotheque website.

Web Typography Tutorial

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!

So read on, and let what’s sure to be a long, beautiful relationship with type begin!

Google Chrome to Support the Web Open Font Format

Google’s Chrome browser plans to jump on the Web Open Font Format bandwagon. A note in the Chromium project’s bug trackersays that “it appears that we have decided to implement WOFF in Chromium.” Work on adding WOFF support to Chromium is already underway, though there’s no timetable for when the new features will make it into a shipping version of Google Chrome.

The WOFF was conceived by Mozilla as an easier way for web designers to include fonts in their designs. The idea is to let web authors include WOFF fonts in their page designs by linking to the font files in their code the same way they link to images and other downloadable files.

WOFF attempts to address some of the problems with CSS 3′s @font-face rule, which allows for downloadable fonts, but says nothing about the format of the fonts. As we’ve noted before, using @font-face can lead to radically different results in different browsers. Last year popular website Boing Boing launched a redesign using CSS3’s @font-face rule, but ran into problems when things didn’t render correctly on older machines.

Another concern is page load times. Because WOFF has built-in compression, adding extra WOFF fonts to your pages shouldn’t slow them down as much as a traditional OpenType or TrueType font file.

Since WOFF support was added to Firefox (in version 3.6), Opera and Microsoft have both pledged their support and the format has been submitted to the W3C for consideration as a standard.

The IE9 beta doesn’t yet support WOFF, but Microsoft is an official sponsor of the W3C proposal and theIEBlog has written about WOFF so we hope to see WOFF support before IE9 is finished.

With Google Chrome onboard, Apple’s Safari may soon be the only currently shipping browser without WOFF support.

Perhaps even more important than browser support is the fact that font foundries are getting behind the new spec. WOFF fonts aren’t secure, so the format won’t be used by foundries wanting to regulate the use of their work. However, over 30 major type foundries — including Adobe, House Industries, Hoefler & Frere-Jones and ITC, LinoType — are already endorsing the format.

While WOFF doesn’t solve all the problems of web fonts, it’s a huge step in the right direction. With Firefox, Opera, IE and now Chrome all supporting WOFF, designers may soon be able to add just about any font to any webpage.

Dealing With the Dreaded ‘Flash of Unstyled Text’

The use of custom fonts on the web is finally a viable option for designers.

Browser support for CSS’s @font-face rule is pretty solid — even IE 5 can be wrangled into displaying custom fonts loaded from your server. Services like Typekit, which licenses fonts from well-known font foundries, and free services like Font Squirrel are helping to smooth the licensing issues surrounding custom fonts on the web.

However, while browser support and licensing is getting sorted quickly, there’s still one big problem with web fonts — the dreaded “Flash of Unstyled Text,” or FOUT.

The problem (despite the name, it has nothing to do with Adobe Flash) stems from how browsers render a page: progressively, prioritizing the raw content, then grabbing the stylesheet and then grabbing any external font files. The actual FOUT effect can be seen in the wild, but it varies by browser.

Internet Explorer will load the font file as soon as it encounters the @font-face in your CSS, which minimizes FOUT. However, make sure to put your @font-face declaration above any script tags, otherwise IE will hold the entire page until the font loads.

Safari and Chrome (and other WebKit browsers) hide any text styled with @font-face until the font is fully loaded. This means your styled text content is invisible at first, and then pops onto the screen later, after the font file loads.

Firefox loads all your text normally and displays it using a fallback font. Then, a half-second or so later, that text is “upgraded” when the custom font data is loaded. The result is a jarring font change, much like older, Flash-based font solutions. Mozilla is currently treating this behavior as a bug in Firefox. Mozilla plans to adopt the WebKit-style rendering in the future.

Obviously none of these cases is ideal, and the little loading hiccup, no matter what form it manifests itself in, is noticeable even to the most oblivious of web users.

FOUT sucks. So, what do you do? There are a variety of techniques that can be used to minimize — and even eliminate — the FOUT.