Smashing Magazine » Typography

How To Choose The Right Face For A Beautiful Body

Dan Reynolds — Mon, 21 May 2012 13:23:55 +0000

What is it that makes a typeface into a text font, instead of a font for larger sizes? The answer differs slightly, depending on whether one aims for print or Web-based environments.

Nevertheless, there are certain features that most good text faces have in common. Familiarity with these helps to select the right fonts for a given project. This article presents a few criteria to help the process along.

Some of today’s most successful typefaces were designed to excel in very specific areas of use: Frutiger grew out of airport signage, Georgia and Verdana were among the first mass-market fonts created for on screen reading, FF Meta was conceived as a telephone book face, and even the Stalwart Times New Roman was tailored for the pages of the London Newspaper The Times. Many typefaces are also often fine-tuned for using in certain sizes.

It should be noted that in this article, when “text” is mentioned, it is in discussion of body text, or running text (in other words, text at a similar size to what you are probably reading right now, rather than much larger sized words).

Features Of A Good Text Typeface

The features outlined in this article are those that type designers keep in mind while developing new typefaces. It’s important to realize that these aspects of typeface design are different from the text treatment a graphic designer employs while laying out a book page or website—no matter what a typeface’s inherent rhythm and niceties are, setting a text is still something that must be done with great care in respect to readability. There are problems that good fonts themselves cannot solve—whether or not a text sings on the page or screen depends on factors like the width of the column, the amount of space between each line, the contrast between the foreground/background and a number of other factors.

Above, Bembo over the years: this typeface was a favorite of many book designers throughout the 20th century. At the top of the image is a scan of the original Bembo typeface, printed with letterpress. The digital version of the typeface—Bembo, seen in the middle, is too light for ideal text in print. A newer digitization was published in 2002—Bembo Book, seen at the bottom. This font is much darker, and is a better representation of the original Bembo idea. However, the middle version is still very elegant, and may still be used well in sub-headlines.

Every typeface has its own inherent rhythm, created by the designer who made the font. With typefaces that are intended for use in body text, it is primarily this rhythm that will make the typeface readable. But there are additional factors that go into the making of a good text face: the space between the letters, the degree of contrast in the letters’ strokes, as well as the x-height and relative size of the whitespace inside of the letters. Not every typeface that works well in text will apply all of these factors in the same way, but all good ones will have many of these features in common.

1. Stroke Contrast

When it comes to typefaces, the term “monolinear” is used to describe letters that appear to be designed with a consistent stroke thickness. Monolinear typefaces are low-contrast typefaces. Stroke contrast can be a helpful feature in small text sizes, but it is not paramount that a text face appears to be monolinear. Indeed, many newspapers employ high-contrast fonts; the question that must be considered is just how thick the thin strokes in high-contrast typefaces are.

The images in this section show different ends of the contrast spectrum: the Cycles types shown above are serifed, with a good deal of contrast. Sumner Stone’s Cycles typeface is an excellent choice for book design as its letter forms combine clarity with a rather high degree of stroke contrast and an almost timeless appearance. Five separate “versions” of Cycles are used in the above image; each block of text is set in its own optically-sized font.

Below, Avenir Next—also a great text face—is from another style of letter, and has very little contrast. I wouldn’t split good typefaces up into good contrast and bad contrast groups. Rather, some typefaces have a degree of contrast—be it too high or too low—that makes them less suitable for use in text. There is no definite rule on how much or how little contrast impacts a text face’s legibility. However, it is clear that both no contrast and excessive contrast can have adverse effects.

Geometric sans serif typefaces often appear to be monolinear stokes; their letters seem not to have any stroke contrast. In order to achieve this effect to the max, type designers have always made slight optical corrections. To look monolinear, a geometric sans needs some degree of thinning. In the image above, Planeta (left) is compared with Avenir Next (right). Both typefaces are more recent additions to the geometric sans category than stalwart faces (like Futura), or classic display designs (like ITC Avant Garde Gothic). Planeta has no visible stroke contrast, which must be a conscious decision on the part of its designer. While this does give it a unique style, it makes the face less suitable for text than Avenir Next, which is actually not as monolinear as it appears at first glance.

2. Optical Sizes

The Garamond Premiere Pro typeface family features different versions of each font. These variants are tailored for use in a certain size range. Above, the Display font (left) is compared with the Caption font (right). The Display font is optimized for texts that will appear in very large point sizes, while the Caption font has been optimized for very small text.

In her book Thinking with Type, Ellen Lupton writes:

“A type family with optical sizes has different styles for different sizes of output. The graphic designer selects a style based on context. Optical sizes designed for headlines or display tend to have delicate, lyrical forms, while styles created for text and captions are built with heavier strokes.”

The intended size of a text should be considered when selecting the typeface: is the typeface you want to use appropriate for the size in which you need to set it? Does the family include optical sizes (that is, different versions of the typeface that are tailored specifically for use at different sizes)? As with each of the factors mentioned in this article, the size at which a font is set can make or break your text.

In many ways, it is easiest to see the qualities necessary for good text faces by comparing potential selections with “display” faces. Like the term “text,” “display” refers to the size at which a specific font may best be used. In print media, as well as in many screen and mobile-based applications, the term “display” is often analogous with “headlines.” If a typeface that you are considering looks more like something that you might like to use for a headline, it won’t be the best choice for body text.

In the comparison image below, the Garamond Premiere Pro Display font has a tighter rhythm than the Caption font—not as much space is necessary between letters when they are set in large point sizes. Why should one consider type families with optical sizes, anyway? Well, as users bump up the point size of digital fonts, the space between letters increases in equal proportion. This inter-letter space slowly becomes too large, and makes a text feel like it is breaking apart. When a proper text font is set large, it may require some tighter tracking. Typeface families that offer optically-sized variants of their styles play a helpful role here.

In the image above, the first line of text—“Stanley Morison”—is set in the Garamond Premiere Pro Display font, while the lines of text underneath it are set in Garamond Premiere Pro Caption. Each font is balanced for its size, and they also harmonize well with one another. In another image (below), these fonts have been switched: the headline is now set in the Garamond Premiere Pro Caption font, and the text in the Garamond Premiere Pro Display. The letters in the Caption face look too clumsy when they are set so large, while the Display fonts’ letters appear uncomfortably thin in a “text” setting.

The amount of stroke contrast visible in caption-sized fonts is much lower than in display-sized fonts. If the Garamond Premiere Pro Display font (from the above image) was rendered in a smaller point size, its thin strokes would begin to break apart, making the text unreadable. But this would not occur with the Caption version.

Garamond Premiere Pro Caption can robustly set real text, even in poor printing conditions. How well a font will render in small sizes on screen depends on the operating system and applications in question. Font formats themselves also play a role; in certain environments, TrueType fonts with “hinting” information may vastly improve on screen display (see the “Hinting” section at the end of this article).

3. x-Height

Garamond Premiere Pro’s Display face (above left) is shown next to the Caption face (above right). Both fonts are set at the same point size. The Caption face features a much higher x-height than the Display font.

Many successful text faces feature high x-heights; this means that the ratio of the central vertical area of lowercase letters—the height of the letter x, for instance—is large when compared to the length of the ascenders and descenders. Depending on its design, a text face may have a low x-height and still be quite legible. But the benefit of incorporating a large x-height in a design is that it maximizes the area of primary activity.

A high x-height may also prevent some letters, like the a or the s, from appearing to become too dark; these two letters have three horizontal strokes inside the x-height space, which is a very small area in text sizes. In order for letters to maintain clarity and understandability, they must have a consistent rhythm, as well as include large, open forms.

4. The Spaces Inside of Letters

The images below illustrate just a few of the intra-letter spacing elements that should be understood and considered when choosing which typeface to choose for your body text. In order for the white spaces inside of letters to remain visible in small sizes, it is necessary for their counterforms to have a certain minimum mass, proportionally.

Counters

The image above shows text set in two members of the ITC Bodoni family: ITC Bodoni Seventytwo and ITC Bodoni Six typefaces. In the first line, “Randgloves” is set in a size mastered for 72pt display (ITC Bodoni Seventytwo), while “and jam” is in the Caption size (ITC Bodoni Six). These words are reversed in the second line. Note how the enclosed white space in the top portion of the e changes between the display and text optical sizes.

Apertures

“Apertures” are the gateways that whitespaces use to move in and out of the counterforms of a typeface’s letter. The above image highlights the wide apertures in four letters from Erik Spiekermann’s FF Meta typeface. These allow for the typeface’s letterforms to feel more open. In certain sizes and settings, wide apertures—and the large counterforms that are their result—will make a text more readable.

The top line of the image above is set in Helvetica, and the bottom line in Frutiger. While the counterforms inside the letters of these two typefaces are similar in size, Helvetica’s apertures are much smaller. Because of this, white spaces inside of Helvetica’s letters and between Helvetica’s letters are much more closed off from each other than in a typeface with more open counters—like Frutiger.

Other counterforms and problematic letters worth remembering include the c; if the apertures of a, e, s are very open, the c should follow this same route. Then there are lowercase letters like a, e, g, s that often have rather complex shapes—specifically, they each feature several horizontal strokes inside a small amount of vertical space. How do their forms relate to one another? How large is the typeface’s x-height? Do the ascenders and descenders have enough room, particularly f and g? Do the counterforms inside of roundish letters (e.g., b, d, p, q, o) have the same optical size and color as those inside of straight-sided letters like, h, n, m, and u? How different from one another are the forms of the capital I, the lowercase i and l, and the figure 1? Can the 3 and the 8 be quickly differentiated from each other? How about the 5 and the 6?

5. Kerning

In the sample above, kerning has been deactivated for the second line. The gaps between the letters T y and V o are too large when compared with the amount of space between the other letters in the text. The typeface used in the image is Carter Sans.

Despite the popular misuse of the term in graphic design circles, “kerning” does not refer to the spacing values to the left and right of the letters in a font. Rather, fonts contain a list of kerning pairs to improve the spacing between the most troubling lettering combinations. The importance of kerning in a font is the role it may play in maintaining an optimal rhythm. Just as kerning describes something much more specific than a typeface’s overall spacing—or the tracking that a graphic designer might apply to a text—kerning is not the rhythm of a typeface itself, but an element that may strengthen a typeface’s already existing rhythm. Not every typeface design requires kerning, and there are typefaces on the market that indeed may have too many kerning pairs—a sign that the basic letter spacing in the font could have been too faulty in the beginning.

6. Consistent Rhythm Along the Line

In the image above, compare the spaces between the letters of the Helvetica typeface (first row) with Frutiger’s (second row). Frutiger is a more humanist design, featuring a slight diagonal axis in its letters; many of them look similar to Helvetica’s, at least at face value. However, the space between Helvetica’s letters is much tighter.

While most of the images in this article feature typeface families that include Optical Size variants, many commonly used typefaces on the market today do not offer these options. This is why it is helpful to be able to identify text typefaces based on their features, rather than just on their names in the font menu. As mentioned earlier, it is primarily the typeface’s rhythm that dictates the readability of a block of text.

Take Frutiger and Helvetica, which are both commonly used in text, especially for corporate communication—Neue Helvetica is even the UI typeface in iOS and MacOS X 10.7. Yet, despite its popularity, Helvetica is not very effective as a text typeface; its rhythm is too tight. By rhythm, I’m not referring to tracking—or any other feature that a designer can employ when typesetting—but the natural flow of space between letters, and within them as well. Frutiger is a much more open typeface—the spaces between its letters are closer in size to the white spaces inside of the letters than in the case of Helvetica. Like all good text typefaces, Frutiger has an even rhythm—space weaves in and out of the letters easily.

7. Caveat: Signage Faces

To round off my discussion on text typefaces, I’d like to briefly mention some fonts that are often shown in rather large sizes: fonts for signage. Interestingly, many signage typefaces have design features very similar to typefaces created for very small applications. The Frutiger typeface, based on letters that Adrian Frutiger originally developed for the Roissy airport in Paris (now named after Charles De Gaulle), is quite legible in small sizes precisely because it is a good signage typeface. Despite their size, signage fonts serve a rather different purpose than Display fonts.

Additional Elements To Consider

After considering the criteria mentioned above, the next question that often comes up is, “does this font have oldstyle figures, or small caps and ligatures, etc.?” A font’s letters might look really great in text, but if they do not include additional elements and features, their use is somewhat minimized. I avoid using fonts with small character and feature sets where I can, because I feel that the lack of these “extras” may break the kind of rhythm I aim to achieve.

1. OpenType Features

Once you’ve established a consistent rhythm by setting your text according to the correct size and application, it would be a pity to inadvertently break that flow. Large blocks of tall figures or capital letter combinations do just that.

Even in languages like German, where capital letters appear at the start of many words, the majority of letters in a text planned for immersive reading will be lowercase letters. Every language has its own frequency concerning the ratio of “simple” lowercase letters like a c e m n o r s u v w x z to lowercase letters with ascenders or descenders—b d f g h j k l p q y. In international communication, language support is a key consideration when choosing a font, and other character set considerations may especially play a role.

Traditionally, the style of figures used in running text also have ascenders and descenders. These figures—often called oldstyle figures or text figures—harmonize better with text than the “uppercase” lining figures. These so-called lining figures either align with the height of a typeface’s capital letters, or are slightly shorter. It is no surprise that, when shipping the Georgia fonts for use onscreen and online, Matthew Carter and Microsoft made the figures take the oldstyle form. Many other typefaces that have long been popular with graphic designers, like FF Meta (seen above), also use oldstyle figures as the default style. In my opinion, lining figures are best relegated to text set in all-caps.

Long all-caps acronyms—like NAFTA, NATO, or USSR—also create an uncomfortable block in the line for the reader. Setting these letter-strings in small caps helps reestablish a specific typeface’s natural rhythm in reading sizes, as may be seen in the first line of the image below (set in Erik Spiekermann’s FF Meta).

Along with common ligatures like fi ff fl, small caps and the many figure options are the most common OpenType features found in quality text fonts. Aside from having both lining and oldstyle figures, OpenType-functionality can enable a font to include both tabular and proportionally-spaced figures, numerators and denominators for fractions, as well as superior and inferior figures for academic setting. Additional OpenType features (such as contextual alternates or discretionary ligatures), are more powerfully noticed in display sizes, and in some cases can even be distracting in text.

2. Hinting

The display of text on screen, particularly on computers running a version of the Windows operating system, may be fine-tuned and improved with the help of size-specific instructions inside of the font file. These instructions are commonly referred to as “hints.” A TrueType font (or a TrueType-flavored OpenType font), is capable of including hinting. However, not every font manufacturer goes to the effort of optimizing the onscreen appearance of its fonts for Windows—even those fonts specially created for use in text sizes.

All of the text in the above image is shown in the same font: Prensa, set at 18 pixels. The lowest row shows this at actual size in three different onscreen rendering environments. In the enlargements, the top row shows a close-up of rendering in Safari on MacOS X, which ignores the hinting data in fonts. The second row shows rendering in Internet Explorer/WindowsXP (Grayscale only, for this sample). The third row is from a ClearType environment—in this case, from Firefox on Windows7. Prensa is a typeface designed by Cyrus Highsmith at the Font Bureau; the Web font is served by the Webtype service.

Conclusion

There are many factors that play a role in typeface selection. Aside from just browsing through the available fonts that they have, or fonts that could be newly licensed for a project, designers regularly spend considerable effort determining the right typeface to complement a project’s content, or the message at hand. Understanding some of the thoughts that go into the making of text typeface—including how a typeface’s letters are fitted to each other to determine a text’s default underlying rhythm—helps lead to better informed decisions regarding what types are indeed apt, and which faces are better suited for other sorts of jobs. After having read this article, I hope you feel more comfortable with this kind of decision making, and that you will know what to look for with a font in the future.

Other Resources

For more information about choosing the right text fonts, you may be interested in the following books and Web resources:

1. Websites

2. Books

Note: A big thank you to our fabulous Typography editor, Alexander Charchar, for preparing this article.

(jvb) (il)

The Font Wars: A Story On Rivalry Between Type Foundries

Simon Loxley — Mon, 14 May 2012 14:09:34 +0000

I had thought terms like “intellectual property” and “intellectual theft” were of fairly recent provenance, so my eye was caught by the latter’s use in a headline of a 1930 edition of the US trade journal The American Printer.

The article it headed proved to be equally intriguing, a response by the president of American Type Founders (ATF) to a June 1929 article in the German journal Gebrauchsgraphik by the designer Rudolf Koch, calling the ATF a “highway robber of German intellectual property.” At issue was a typeface marketed by the ATF earlier in 1929 called Rivoli.

Koch and the German type foundry Klingspor asserted that Rivoli was no more than a copy of Koch’s 1922 design of Koch Antiqua, also later known as Locarno and released in the US as Eve. Klingspor had already taken legal action for piracy against the Viennese foundry Karl Brendler und Sohne for its lookalike Radio Antiqua but with no success.

Part of the sample of Wyss’ script offered by the ATF to back its claim that Koch Antiqua was not its designer’s intellectual property. Neither of the two styles of “g” resemble Koch’s, however, to take just one example.

Koch Antiqua, and uppercase letters of the italic.

Klingspor lost that case, the ATF argued, because far from Koch Antiqua being Koch’s or German intellectual property, both it and the Austrian face were based on the Lombardic penmanship of the Swiss calligrapher Urbanus Wyss, in particular from his 1549 book Libellus Valde Doctus. Klingspor could not claim theft of a design that was not its to begin with.

Whatever the truth of this, the most striking part of the ATF’s broadside was its free admission that the similarity between Rivoli and Koch Antiqua/Eve, far from being accidental, was quite deliberate, Rivoli having been created and released both as a spoiler for the popular Eve and as a “reprisal” face. Klingspor was partially owned by Stempel, whose 1925 catalogue contained what the ATF claimed were “confessedly” fourteen type series of US origin, including what they deemed pirated versions of their own designs.

The ATF’s comparison of the faces that accompanied its article, but not the truth, says David Pankow. What was purported to be Wyss’ script was, in fact, Brendler and Sohne’s Radio Antiqua, printed heavily on soft paper.

The ATF-Koch-Stempel face-off was part of a savage turf war fought by a company to defend its commercial position, with—arguably, only a decade after a World War—some national antagonism thrown in. (For the full story, see David Pankow’s “A Face by Any Other Name Is Still My Face: A Tale of Type Piracy” in Printing History New York, 1998, page 37.) The ATF remained relatively conservative in its designs, whereas on its own doorstep the New York-based Continental Typefounders’ Association was importing type in which was enshrined the latest European stylistic developments. The acerbity of the language on both sides was unrestrained, and it was exacerbated by the ATF’s suspicions that Continental was involved, too, stoking the fires of the argument.

Type design is a business that has long been bedevilled by piracy and plagiarism (conscious or not), licensing issues and scant or no legal protection for intellectual property. Some of the problems stem from the nature of the craft itself. Although, in theory, the number of ways you can position the points of, say, the capital “A” are myriad, the demands of legibility, style and fashion radically reduce the options, and alphabet designs all use the same raw material.

As designer Dave Farey described himself, facetiously but with an undercurrent of truth, “Nothing I have done is original. It’s all based on the 26 letters of the alphabet and the Arabic numerals.” Add to this the revivals and redrawings of classic faces, and the similarities are unavoidable. Type design is an art that is constantly echoing and alluding. Most people who work in the graphic arts are, in a big part of their design psyche, fans. We were probably inspired to get started in the first place by seeing other people’s work that we absolutely love. It’s unavoidable that some of that DNA will crop up or be used consciously in our own work. In the case of type revivals, you can at least credit your source in the type’s name; as designer Nick Shinn says on Typophile, “plagiarism means copying without recognition of the source.”

In today’s digital environment, do any of the attitudes and practices that marked the ATF quarrel persist? I asked Phil Garnham of London’s Fontsmith if he regards other font companies as rivals:

“I think there is definitely a healthy and friendly rivalry between today’s independent digital foundries. Over the past few years, as designers have become more aware of the power of type in branding, particularly the possibilities of bespoke type and with the boom in type design education at Reading University and Type Media at the Hague, fresh competition is popping up on a monthly basis, which is a great thing for type design. It keeps us all on our toes and looking for new possibilities within our beloved alphabets.”

And spoilers? Phil feels the tactic might still be out there, but for his own part, like musicians who consciously don’t listen to other people’s music when writing and recording, he tries not to look too much at other work: “I think that it keeps me detached from other people’s ideas, and allows me to pursue mine, free from any subconscious involvement.”

But even then, you can find that what you’ve done looks like something else. “Arguably, I think there are many designers tripping up in this way, even with the best intentions. I’ve been in this awkward position myself. You have to explore new proportions and alternative letterforms so you can bring something new to the market.”

Square leg: Horatio with its restyled “R” in the Letraset catalogue, available in three weights.

How close have people steered consciously? Dave Farey recalls from his time working for Letraset that among a selection of faces presented to the committee for inclusion in the dry transfer giant’s range was Harry, a design owned by the Visual Graphics Corporation (VGC). The committee loved it, but unfortunately permission hadn’t yet been obtained, and VGC refused. So Letraset produced Horatio. “I think the only thing we changed was the leg of the uppercase R,” Dave recalls, adding candidly, “Ours was worse.”

Heldustry, from the 1983 Compugraphic Type catalogue.

Clues could even be gleaned from the font names—or not. Customers requesting Helvetica from photosetting companies of the 1980s that used the Compugraphic type library might have been told, “We don’t have Helvetica, but we do have Heldustry,” which looked… well, similar. The catalogue that digital company Bitstream produced at the start of the 1990s was helpful to customers unable to find familiar names: its Staccato 222, for instance, was the “Bitstream version of Mistral”; “Lapidary 333 was the Bitstream version of Perpetua”; Venetian 301 the “Bitstream version of Centaur.”

Staccato, from the Bitstream catalogue, early 1990s.

Some More Face-Offs

Memphis and Stymie

Memphis, seen here in extra bold weight, and Stymie Bold. Memphis was designed by Emil Weiss.

1931 saw ATF squaring off with Stempel again, countering its Memphis slab serif with Stymie, the name being golf lingo for blocking your opponent’s line of play. ATF’s prolific Morris Fuller Benton based Stymie on his own Rockwell Antique, which was itself basically a repackaging of Litho Antique, whose owner (the Inland Type Foundry) had been taken over by ATF. According to Patricia Cost in her book The Bentons, Monotype then copied Rockwell Antique and called it, confusingly, Stymie Bold.

Janco and Banco

Rather than stealing the design, Excoffon exercised squatter’s rights in the territory… with style (above). The names were nearly identical—probably no coincidence.

French type legend Roger Excoffon’s employers, Fonderie Olive, was such rivals with Parisian foundry Deberny and Peignot that Excoffon examined with a magnifying glass a picture of its designer Marcel Janco at work on his new self-named type. “Then I rapidly made some sketches for a few letters in a commercial type, not identical, but of the same family… The rest is a success story. Banco was used throughout the world… It’s the most shameful thing I ever did in my career.” (You’ll find this story in Roger Excoffon et la Fonderie Olive, by Sandra Chamaret, Julien Gineste and Sébastien Morlighem, Ypsilon Editeur, Paris, 2010.)

Starling Burgess vs. Stanley Morison

A comparison of Starling Burgess’ design (Lanston no.54) and Stanley Morison and Victor Lardent’s work on Times, as it appeared in “Printing History 31/32” (1994).

According to a 1994 article by Mike Parker that appeared in Printing History, Times New Roman was an extremely close reproduction of a typeface designed years earlier by genius boat and car designer and maverick Starling Burgess, which lay unpaid for and abandoned at Lanston Monotype until the design of the new face for The Times newspaper became problematic. Although Morison had a reputation among some for being a slippery operator, the story as presented seems hard to credit: Font Bureau offers a Mike Parker design called Starling.

Futura and Twentieth Century

Close but no cigar: Twentieth Century (above), and Lanston Monotype’s response to Futura (below).

Buffalo, New York-based foundry P22 has in its Lanston Type Company collection Twentieth Century, “Monotype’s answer to Futura.” It describes Sol Hess’ redrawing as “close”; as an attractive optional extra, it has included digital recreations of some of Paul Renner’s original experimental characters for Futura.

Comic Sans and Chalkboard

Comic and Chalkboard: both ideal for warning notices.

Apple’s OS X doesn’t supply you with the world’s favorite, Comic Sans, but you do get Chalkboard, which inhabits pretty much the same terrain.

Helvetica and Arial

Hard to fully love perhaps, but Arial has certainly been well used, if only because it is the default setting.

Arial, designed in 1982 by Robin Nicholas and Patricia Saunders, seems to attract its share of ill will in “font hate” blogs these days on the grounds of it being Microsoft’s Helvetica lookalike.

Does It Really Matter?

For the user, does any of this matter? If you like a font and it fits your purpose, then its provenance is irrelevant. And if it’s a new or recent design, then it comes with little or no back story. In terms of design rationale, investigating the background of your choice is always useful. Who designed it? When and for whom—for a particular project or for a company? If for a project, would those associations jar with how you’re planning to use it now, and does that matter? If it was originally designed for Monotype, is the font you’re planning to buy from Monotype or from another foundry? What does Monotype offer as its version, and how does it compare? Stempel Garamond versus Simoncini Garamond, or Garamont?

Koch Rivoli: channelling the spirit of Rudolf Koch and Willard T. Sniffin.

And how has history served those original battling typefaces? Sebastian Carter in Twentieth Century Type Designers describes Koch Antiqua as “one of the most successful advertising faces of the inter-war period, still often used to suggest the vanishing luxury of ocean liners.” Although some of that usage might have been in reality Rivoli, Koch’s reputation as a type designer endures.

As does the name Rivoli, although its creator or draughtsman, the magnificently named Willard T. Sniffin, is less remembered. But UrbanFonts.com for one offers as a free font Koch Rivoli (a pairing of names that would have the German designer spinning in his grave), an uppercase-only design that takes inspiration from the thick-thin double stroke of Koch’s italic uppercase—and Rivoli’s.

Note: A big thank you to our fabulous Typography editor, Alexander Charchar, for preparing this article.

Applying Macrotypography For A More Readable Web Page

Nathan Ford — Wed, 02 May 2012 15:24:02 +0000

Any application of typography can be divided into two arenas: micro and macro. Understanding the difference between the two is especially useful when crafting a reading experience, because it allows the designer to know when to focus on legibility and when to focus on readability.

This article focuses mostly on a few simple macrotypographic techniques—with a dash of micro—and on how to combine them all to build a more harmonious, adaptable and, most importantly, readable Web page.

First, some definitions. Microtypography has to do with the details; setting the right glyph, getting the appropriate kerning and tracking, and making stylistic choices such as when to use small-caps. Micro techniques have received a lot of attention recently, as browser makers adopt new CSS attributes that allow for finer control over Web type. Microtypography deals mainly with legibility and can be thought of as the design of letters and words.

Macrotypography focuses on how type is arranged on the page. Most macro techniques have been achievable through CSS for quite some time, but because our understanding of the Web page is changing, the way we use these techniques must adapt. Macrotypography deals mainly with readability and can be thought of as the design of paragraphs and the page.

The Importance Of Readability

For the designer’s purpose, readability refers to the ease with which a body of text can be consumed, and it correlates closely to the reader’s eye strain. This should not be confused with legibility, which refers to the degree to which individual glyphs in text can be discerned. The techniques for creating a great reading experience are complementary to those for creating a great user experience (UX), and vice versa. They also both share the same symptoms of failure. Poor readability on a website can lead to confusion, frustration and ultimately abandonment, while a great reading experience is invisible, supportive and engaging.

As with UX design, every website design would benefit from some measure of concern for readability. For example, text-heavy websites—such as blogs, newspapers and magazines—should uphold readability as a priority, while websites for events and e-commerce might just need to tweak line heights and font sizes. Whatever level of importance you place on readability, you should undertake a continual process of refinement towards an effortless reading experience.

Techniques For Improving Readability

The foundation of great reading experiences on the Web lies in the study of book design. After all, books are where readable typography was honed. Personally, I hold The Form of the Book by Jan Tschichold as the ultimate resource for good taste in book design, and I am certainly not alone.

Many of the techniques we’ll cover here have been adapted for the Web page from lessons introduced in this book. Sadly, the book has been out of print for about 20 years (at least in the US), and a copy can cost around $150 on Amazon’s marketplace. I have created a digest of it, but if you want to read the full text, you could always try your local library or university (which is how I finally got my hands on it).

Now, let’s look at the various macro techniques—and a few micro techniques—to make your website’s content more readable. I have chosen an article that is typical of the kinds of reading experiences users encounter. I have removed the header and some branding elements, but it remains mostly as I found it.

In our example, important content (navigation, advertising, related links) lies on either side of the reading area. For optimum readability, a less obtrusive placement of these elements would be best, but this is not always possible. We will, therefore, not rearrange the layout, but work within it. Here is what we are starting with:

As we learn about each technique, we will apply it to our example. But keep in mind that this exercise is to improve only the reading experience, not the overall design.

Command Your Margins

Margins give the eye room to maneuver. They provide a buffer between the main content and ancillary elements—such as related links and ads—allowing the reader to focus on the text. Beyond this purely functional purpose, margins can also bring deeper harmony to the layout.

Margins comprise negative space; they afford the designer an opportunity to build a relationship between a body of text (the figure) and its surroundings (the ground). As Tschichold tells us, “Harmony between page size and the type area is achieved when both have the same proportions.” Now, the proportions of a page in a book are much different than those of most digital displays (especially ones in landscape orientation), so to adapt this concept to the Web, we can work towards a harmony between our text and its immediate visual container.

In Practice

On our example page, the margins are not very generous. Also, the main content is crammed in between two very loud columns. First, we can add more space to the right of the text, giving the reader room to go from the end of one line to the beginning of the next without being distracted by the secondary content on the right. And adding more margin to the left of the text allows the reader to easily find the start of the next line and to scan the article for topics they are interested in.

Margins can be set intuitively by increasing the amount on each side until the content feels comfortable. Applying this to our article element is easily achieved by adding padding in our CSS (rather than margin, in this case). For now, we will just double the padding on the left and right:

article {
   padding-left: 20px;
   padding-right: 40px;
}

In our adjustment of the margins, we can create still greater harmony between the copy and its surroundings, but first we must visualize an invisible container around the content. This will be our “page” with which to build harmony in the reading area:

The way to create harmonious proportion between text and its container is to give them the same shape. The content should have the same proportions—only smaller—as its containing element. Tschichold surveyed a mountain of book proportions and concluded that the most harmonious proportions for margins are roughly 2:3:4:6 (top:right:bottom:left) for the left-facing page (recto) of a book. Given that we do not have facing pages on the Web, we can make the margins symmetrical and adjust the ratio to 2:3:4:3 by shaving off a bit of the left margin. Web text does not need as much side margins as book text because Web pages do not need to accommodate the reader’s thumbs.

Though they may seem the obvious unit of measure, percentages for padding will only measure in relation to the width of our article element’s container, skewing our top, bottom and side proportions to an inappropriate degree. Therefore it’s best work with padding in ems or pixels until the reading area has the same proportions as its container. To keep things simple, let’s start with 2em for the top padding in our example. After applying our adjusted ratio from above, our article’s padding can be written as 2em 3em 4em 3em or 2em 3em 4em in CSS shorthand. Given the fluid nature of content on the Web, this is just an approximation of Tschichold’s proportions. For a typical body of text on the web—which is taller than it is wide—the margin should be generally less on top, even on the sides, and most at the bottom:

article {
   padding: 2em 3em 4em;
}

We can also move the lead image to the right. This allows the body copy to hold its shape better and allows for even easier scanning of the article. We can break this principle to draw attention to images and figures, of course, but for our example the image is too distracting on the left when placed early in the article.

If we want, we can bring the text forward on the z axis, putting even more focus on our copy and de-emphasizing the ancillary content by creating a visible container for our text. This is a tactic we can easily use in Web design that books do not need:

body {
   background: #fcfcfc;
}

article {
   background: #fff;
   border: 1px solid #eee;
   padding: 2em 3em 4em;
}

Our page already feels more balanced and less intimidating, but we can use more techniques in the body of the text to further enhance readability.

Choose Readable Fonts

Font selection is a micro concern, but it has a tremendous impact on the macro appearance. In Detail in Typography, Jost Hochuli best outlines this interdependence: “In typography, details can never be considered in isolation.”

The font for the body copy should be chosen for its on-screen readability, before any concern for style. The headings and pull quotes are perfect opportunities to flex your typographic creativity, but leave the long runs of copy to dependably readable workhorses such as Georgia, Arial and Myriad, which were all designed for optimal reading on a back-lit screen.

Fonts that are more readable on digital screens typically exhibit the following attributes:

Tall x-height;
Slightly wider em width, but not condensed or extended;
Mostly devoid of style;
Serifs for larger type, and sans-serif for smaller type.

All of these rules have exceptions, but they should be your guiding principles when choosing a font for the body copy. Here are some font stacks that I find give some flavor of style, provide appropriate fallbacks and are all highly readable:

"Proxima Nova Regular", "Helvetica Neue", Arial, Helvetica, sans-serif;
(As used right here on Smashing Magazine)
"Myriad Pro", Arial, Helvetica, sans-serif;
(As used on my website)
"Fanwood Text"", Georgia, Times, "Times New Roman", serif;
"PT Sans", "Trebuchet MS", Arial, sans-serif;

In Practice

Let’s apply Myriad Pro to the body text on our page:

article {
   background: #fff;
   border: 1px solid #eee;
   font-family: "Myriad Pro", Arial, Helvetica, sans-serif;
   padding: 2em 3em 4em;
}

Keep It Measured

In setting any block of text, we must consider its measure. Measure is defined by either the number of characters per line or the number of words. I use words because they are easier to count, and I try to follow Tshichold’s suggestion of 8 to 12 words per line. If you base your measure on characters, then 45 to 85 characters per line is ideal. Once the margins and widths have been set, proper measure can be achieved through two attributes in the CSS, font-size and word-spacing.

When deciding on a size, strike a balance between making the font small enough that the reader is not too distracted when jumping to the next line, but big enough that they do not have to lean in to read the text on the screen. For most fonts, 16 pixels works well. Other factors might lead you to making it larger or smaller, but 16 pixels is a great place to begin. As for word spacing, most browsers do a decent job of setting this for you, but if you are having trouble getting an appropriate measure, cheating this attribute slightly either way can be handy.

In Practice

On our page, let’s add a 16-pixel font size, and cheat the word spacing in just a tiny bit to achieve a proper measure (word-spacing is supported in all major browsers). You might instead want to use ems or rems here so that the layout remains flexible whatever the font size set by the user as their default.

Until we set a new line height, our page will look like a jumbled mess, so let’s just look at the code at this point:

article {
   background: #fff;
   border: 1px solid #eee;
   font-family: "Myriad Pro", Arial, Helvetica, sans-serif;
   font-size: 16px;
   padding: 2em 3em 4em;
   word-spacing: -0.05em;
}

Set An Appropriate Line Height

Once the font size is set, you can determine the appropriate line height. On the Web, we work in terms of line height, which by default is an equal amount of space above and below text on a line. Not to be confused with leading in print design, which generally refers to the amount of space below a line of text. The governing rule for line height (and leading) is, the longer the line length, the taller the line height should be. And vice versa: the shorter the line length, the shorter the line height.

Find an appropriate line height by first determining the point at which the ascenders and descenders of the lines of text do not touch, yet the lines are close enough that the reader requires no effort to find the next line. Then adjust until the height feels balanced with the line length. Some may leave the line-height attribute to the browser’s default, while some may set a global line-height on the body element. Both approaches make sense because the line height would then stay proportional to the element’s font size; but both also assume that the line width of the content will stay consistent, which could lead to situations that violate our governing rule.

In Practice

Let’s add a line height of 1.3 ems to our example, using ems so that our line height stays proportional to the font size, and see how the font size and line height work together:

article {
   background: #fff;
   border: 1px solid #eee;
   font-family: "Myriad Pro", Arial, Helvetica, sans-serif;
   font-size: 16px;
   line-height: 1.3em;
   padding: 2em 3em 4em;
   word-spacing: -0.05em;
}

It is important to note that readable line heights can be especially tricky to keep consistent in responsive layouts, as line lengths will vary based on device widths. To solve this issue, Tim Brown has proposed an idea he calls “Molten Leading,” which would allow line heights to increase proportionally based on the screen width. His post links through to a couple of Javascript implementations of this idea. In lieu of Javascript intervention, you can also manually find the screen widths at which the line heights become uncomfortable, use a media query to target that width, and set a more readable line-height in the CSS.

Find The Proper Paragraph Styles

We need to figure out which paragraph style best fits the content. Jon Tan has done a fantastic job of outlining various styles and how to craft them with CSS. The appropriate style for a piece of content varies based on the flavor of the content and the rhythm of the paragraphs. I have written about my preference for using indents, rather than line breaks, when setting long-form text. This helps to keep the flow between ideas, but it can be distracting when the paragraphs are short or the line length is long. Deciding what constitutes the perfect paragraph for your content is up to you.

In Practice

Our page is a news article, where the flow between paragraphs is dictated more by chronology than by ideas, so line breaks are still appropriate. We could easily apply indents, if appropriate, to the paragraphs with one simple CSS rule:

article p + p {
   text-indent: 2em;
}

We specify p + p rather than just applying the rule to all p tags because we want to indent only those paragraphs that follow other paragraphs. Ones that follow headings, images and so on should not be indented.

Instead of indenting, though, we just want to shrink the line breaks a bit so that each paragraph is not so disconnected from the last. For our page, let’s use half of the line height:

article p {
   margin-bottom: 0.5em;
}

Balance The Text’s Contrast

One final consideration for content is text color. Contrast is a major contributing factor in eye strain and so greatly impacts readability. Low contrast between text and background causes more squinting and blinking among readers, a sure sign of strain. Black on yellow has the highest contrast, but we have been conditioned to view this as a sign of warning or alarm, thus increasing anxiety among readers. Black on white is high in contrast, too, but too harsh for extended reading on back-lit screens. For long-form text, I have found dark-gray text (around #333) on a white or light-gray background (no darker than #EEE) to be optimal. This is a gross simplification of color theory to suit the purposes of this article. To learn more about color, Mark Boulton has written a great primer on color theory for the Web; you can also find many great examples in Smashing Magazine’s series on color.

In Practice

Our article already has a white background (serving as a boundary for the margins), set against a wider light-gray background. We should probably keep the white, and lessen the darkness of the text to #444. We can then use #000 on the headings to give them slightly more emphasis:

article p {
   margin-bottom: 0.5em;
   color: #444;
}

article h1 {
   color: #000;
}

The Result

We now have a much more readable page that invites users into the content. We could employ many more techniques across the entire website, but we have focused here on the main content block. Harry Roberts has written a great overview of these techniques and more for Smashing Magazine, which will give you a deeper understanding of everything covered here.

With a clean reading experience, people will better absorb the ideas being presented and will undoubtedly come back for more—that is, if your content is worth reading… but I can’t help you there.

Excellent Reading Experiences On The Web

Readability is not a new concept, of course. If you are just discovering what makes for a good reading experience, then congratulations, and welcome to all the discomforts of recognizing cramped and neglected type on the Web. It’s not all pain, though. Plenty of well-considered blocks of content are to be found. Let’s look at a few great ones and a couple that could be great with slight tweaks.

Please note: In the interest of showcasing only the reading experience, we have cropped each page to a scrolled view of the main content.

24 Ways
The reading experience on 24 Ways is quite nice. The text contrast is well balanced, the measure is not too long, and the font size is generous. At all responsive breakpoints, the design is a perfect example of a page with sufficient and balanced margins around the main reading area.

Desktop view

CNN
Long-form articles on CNN are good examples of how readability can work well on news websites. The layout does not show a visible container for the article—which in this case might have been distracting on a page already laden with so much content—but the margins are generous. Also, the line breaks for the paragraph styles are completely appropriate, because most online news stories are collated and updated from many sources and are not linear ideas. The font size (currently 14 pixels for the body copy) could stand to be a bit bigger, though.

Contents
The tablet view of Contents magazine is a wonderful experience all around. The measure is perfect, the line height and font size play together nicely, and the paragraph styles are perfectly suited to the content. The measure does get too long at desktop sizes, but with all of the other factors working so well, the effect on overall readability is negligible.

Tablet view

Desktop view

Elliot Jay Stocks
Elliot does quite a few things well on his website. The measure is right, the font (Skolar) is very readable and set at a comfortable size (16 pixels), and the line height is just tall enough to accommodate the link style. Generous margins create harmony between the main content and its container, while the side margins are uneven, making the page look like the recto of a book and giving the layout a unique character.

Esquire
Most articles on Esquire are great, but the reading experience is merely good. The margins are ample, the font is readable, and the contrast is high. All of these go a long way towards establishing good readability, but a few simple tweaks would make it great. Increasing the right padding would shorten the measure, which is a bit too long as it is. The font size could also be increased by a couple of pixels. And given that most Esquire articles are a linear progression of ideas, I would suggest paragraph indents rather than line breaks.

The Guardian
The design team over at The Guardian pays attention to crafting great all-around experiences. Readability is no exception. Measure, contrast and paragraph styles all work together to create a focused and comfortable reading experience in the midst of what could be an overwhelming amount of content.

A Working Library
A Working Library is one of the best reading experiences on the Web. Every aspect of readability discussed in this article has been well considered and executed. The harmony between text and its container is pitch perfect.

Refining Towards The Ideal

With the examples above, we have tried to show how readability can excel in a few different digital environments: blogs, news websites and online magazines. Some of these website do not have many of the constraints (such as ads and related content) of more commercial websites, so it could be argued that these designs exist in a vacuum, without pragmatic application or real-world pressures. We need these shining examples, though, to help us find the ideal reading experience for each project; and once we know that ideal, we should do our best to reach it.

In a recent talk on “What Is Reading For?” the famous typographer and poet Robert Bringhurst stated, “Books are and have to be utilitarian objects. They have to be used.” The same could be said of Web pages. Ideal reading experiences create better user experiences. Our job as designers is to refine the aesthetic qualities of the Web’s content in order to speed the process of consumption, thereby facilitating deeper understanding. Tired eyes all over the Web are counting on us.

(al)

A Closer Look At Font Rendering

Tim Ahrens — Tue, 24 Apr 2012 14:03:00 +0000

The Web font revolution that started around two years ago has brought up a topic that many of us had merrily ignored for many years: font rendering. The newfound freedom Web fonts are giving us brings along new challenges. Choosing and using a font is not merely a stylistic issue, and it’s worth having a look at how the technology comes into play.

While we cannot change which browser and OS our website visitors use, understanding why fonts look the way they do helps us make websites that are successful and comfortable to read in every scenario. Until recently, there were only a small handful of “Web safe” fonts we could use. While offering little variety (or means of expression), these fonts were very well-crafted and specifically adjusted—or even developed—for the screen, so there was little to worry about in terms of display quality.

Now that we have a great choice of fonts that can be used on websites, it becomes clear that the translation of a design into pixels is not something that happens naturally or consistently. OS makers apply different strategies to render how typefaces are displayed, and these have evolved greatly over time (and still continue to do so). As we now look closer at fonts on screen more than ever before, we realize that the rendering of these glyphs can differ significantly between systems and font formats. What’s more, it has become clear that even well-designed fonts may not look right on Windows if they are missing one crucial added ingredient: hinting.

This article presents the mechanisms of type rendering, how they were developed, and how and why they are applied by the various operating systems and browsers—so that when it comes time to choose a font for your next project, you know what to look out for to ensure the quality of the typography is consistently high.

Rendering Strategies

Ideal shape, black-and-white and grayscale rendering

Rasterization

In digital type, characters are designed as abstract drawings. When a text is displayed on screen, this very precise, ideal shape needs to be expressed with a more or less coarse grid of pixels. As screens turned from mere preview devices for printing output into the actual medium we read in, more and more sophisticated rendering methods were developed in order to make type on the screen easy and pleasant to read.

Black And White Rendering

The earliest method of expressing letter shapes was using black and white pixels, sometimes referred to as bi-level rendering. Printers are still based on this principle, and thanks to their high-resolution, the result is a very good representation of the design. On screen, however, the small number of available pixels does not transport the subtleties of the drawn shapes very well. And although we might not be able to see the individual pixels, the steps found in round contours are noticeable.

Grayscale Rendering

In the mid-1990′s, operating systems started employing a very smart idea. Although screens have a rather low resolution, they can control the brightness of each pixel. This allows more information to be brought into the rasterized image.

In grayscale rendering, a pixel that is on the border of the original shape becomes gray, its brightness depending on how much it is covered by the ideal black shape. As a result, the contour appears much smoother, and design details are represented. The type on screen is no longer merely about being legible—it has its own character and style.

This principle—also called antialiasing—is the same that is used when photos are resampled to a lower resolution. Our eyes and brain interpret the information contained within the gray pixels and translate it back into sharp contours, so what we perceive is fairly close to the original shape. A similar effect is at work when a relatively coarse newspaper image that can appear nicely shaded if we hold it far enough away (or similarly, in the art of Chuck Close). Recently, Gary Andrew Clarke took this to the extremes with his “Art Remixed” Series.

Subpixel Rendering

Apparently colored pixels increase the resolution.

The third generation of rendering technology is characterized by apparently colored pixels. If we take a screenshot and the edges appear red and blue when enlarged, then we know that we are looking at subpixel rendering.

On LCD screens, the red, green and blue subpixels that control the color and brightness of the pixel are located side-by-side. Since they are so small, we don’t perceive them as individual colored dots. Having a closer look at the “red” pixel marked by the white dot reveals the strategy: all subpixels are switched on or off individually, and if the rightmost subpixel of the “whitespace” happens to be a red one, then the corresponding full pixel is technically red.

Subpixel rendering on an LCD screen.

The benefits of this technique become clear if we desaturate the image. Compared to plain grayscale rendering, the resolution has tripled in horizontal direction. The position and the weight of vertical stems can be reflected even more precisely, and the text becomes crisper.

Current Implementations

For the display of text, almost all browsers rely on system rasterizers. When looking at Web font rendering, the key distinction we have to make is the operating system. However, there are differences between the browsers in terms of the support given to kerning and ligatures, as well as the application of underline position and thickness, so we cannot expect perfectly identical rendering in all browsers (even on one platform). What’s more, on Windows, the browser can have the font rendered by either of the system technologies—GDI or DirectWrite.

Before we look at these in detail, lets first get an overview of where each one is to be used:

Rendering modes used by Windows browsers.

Windows

On Windows, the font format has a significant impact on the rendering. The crucial difference is between PostScript-based and TrueType-based fonts, and not the way these are brought into the browser—JavaScript vs. pure CSS, raw fonts vs. “real” Web fonts, etc. We will see identical rendering as long as the underlying font is the same.

File formats can give us a clue as to what underlying rendering technology is being used, although it’s best that one doesn’t completely rely on the naming conventions. For example, EOT and .ttf files will always contain TrueType, whereas .otf fonts are typically PostScript-based. But then there’s the wrapped format WOFF, which can contain either “flavor” of font format. So we don’t know which one it contains (and therefore, what kind of rendering may be used), just by looking at the file name. Unless you’re using EOT or .ttf files, and can be sure it’s a TrueType, more investigation when purchasing fonts is always recommended.

TrueType and PostScript fonts differ in the mathematics used to describe curves—something that rasterizers don’t care about too much—it only makes a difference for the type designer when editing the glyph shapes. What is more relevant is the different approach to hinting. PostScript fonts only contain abstract information on the location of various elements of each letter (and rely on a smart rasterizer to make sense of this), whereas TrueType fonts include very specific low-level instructions that directly control the rendering process. Curiously, however, the effective differences in rendering are not due to these differences in concept, but rather stem from Microsoft initially deciding to apply their new rendering engine only to TrueType fonts.

Windows: TrueType Fonts

TrueType font rendering with Windows grayscale.

On Windows XP, text is rendered as grayscale by many browsers. Although not as crisp as the subpixel rendering used by Mac OS, the letters are nicely smoothed and look great in large sizes.

TrueType font rendering with Windows GDI ClearType.

ClearType is Microsoft’s take on subpixel rendering. It was first made available for GDI, the classic Windows API. Although available in Windows XP, it is not used by all browsers. In Windows 7 and Vista, ClearType is the default, which makes it the most widely used rendering technology (if we were to consider all internet users). However, it is important to note that this applies only to TrueType-based Web fonts—GDI-ClearType is not applied to PostScript-based fonts.

One curious property of this rendering technology is that along with adopting the advantages of subpixel rendering in horizontal direction, Microsoft gave up smoothing in vertical direction entirely. So ClearType is effectively a hybrid of subpixel and black-and-white rendering. This results in steps within the contour, which is particularly noticeable in large sizes. These jaggies at the top and bottom of the curves are unpleasant, but unavoidable—even the best hinting cannot make them disappear.

For type in large sizes, ClearType is a step backwards in rendering quality. The gains in horizontal precision are not significant, while the rough contours spoil the overall result.

TrueType font rendering with DirectWrite.

The future is bright, at least in terms of Windows font rendering. In DirectWrite (the successor of GDI), Microsoft added vertical smoothing to ClearType. This new rendering mode (so far used by Internet Explorer 9), gives us smooth and precise rendering in all sizes. The main difference to Mac OS that remains is that it still tries to align contours to full pixel heights, which leads to even better rendering given that the font is well-hinted. What’s more, DirectWrite allows for subpixel positioning, which gives the characters exactly the spacing that they have been designed with, improving the overall rhythm and evenness of the texture.

Windows: PostScript Fonts

PostScript font rendering with GDI grayscale.

In GDI-based browsers, PostScript-based Web fonts are displayed in grayscale. Unlike the prevalent GDI-ClearType, this gives smooth contours. And unlike TrueType hints, PostScript hinting is easier to create, even automatically.

PostScript font rendering with DirectWrite.

DirectWrite not only gives smoother outlines, it also applies subpixel rendering to PostScript fonts. Unlike TrueType rendering, however, it allows for more gray pixels in order to reflect stroke weights more realistically. That makes it well-balanced, and similar to Mac OS rendering.

At some point in the future—browser makers and users will not switch as quickly as we wish—DirectWrite will succeed the older Windows rendering methods, and we will indeed be spoilt for choice between TrueType- and PostScript-based Web fonts.

Windows: Unhinted Fonts

Unhinted font rendered with grayscale.

In the old Windows grayscale mode, completely unhinted fonts look surprisingly good. Since the font does not “align itself” to full pixels via hinting, and the rasterizer does not enforce this either, we have a rendering that is similar to that of iOS. Unfortunately, unhinted fonts are currently not an option, as the next example shows:

Unhinted TrueType font in GDI-ClearType rendering.

As noted in many discussions on Web font rendering quality, GDI-ClearType is extremely dependent on good hinting. Horizontal strokes have to be precisely defined by means of hinting, otherwise they might be rendered in an inappropriate thickness. Even in larger sizes, hinting is crucial. Unhinted fonts will show “warts” sticking out where contours are not correctly aligned to the pixel grid, like in the example above.

Unhinted font rendered with DirectWrite.

In DirectWrite, unhinted PostScript and TrueType-based Web fonts show virtually the same rendering. Text fonts of either flavor will still need good hinting in order to keep the strokes crisp and consistent. Display fonts may even get away with sloppy or no hinting, since this does not show much in large sizes.

Mac OS X

Font rendering in Mac OS X.

On Mac OS, all browsers use the Quartz rendering engine. TrueType and PostScript fonts are rendered in exactly the same way, since hinting—the biggest conceptual difference between the two formats—is ignored. The subpixel rendering on Mac OS is very robust, so this platform is typically the one we need to worry about the least. The rasterizer doesn’t try to understand the strokes and features that make up a font, as everything is represented by more or less dark pixels. Since the letter shapes are not interpreted, they cannot be misinterpreted. Quartz rendering is reliable because it doesn’t try to be smart. As a side note, Apple does seem to apply some subtle automagic to enhance the rendering, but this is entirely undocumented and beyond our control.

In some cases, however, this leads to less-than-ideal results. In the above example, the large size “T” has a fuzzy gray row of pixels on top because the theoretical height is not a full pixel value, and Mac OS does not force its alignment. Unfortunately this cannot be controlled by the font maker. However, the blurriness occurs only in certain type sizes. So typically, choosing a slightly different font size fixes the problem. With a bit of trial-and-error, one can find a type size that looks comfortable and crisp.

Another difficult-to-control phenomenon is that on the Mac, type tends to be rendered too heavy. This difference is most noticeable in text sizes, where the same font can look a bit “sticky” on Mac OS while appearing almost underweight on Windows.

iOS

Font rendering in iOS.

The rendering on iOS follows the same principles as on Mac OS—the main difference is that it currently does not employ subpixel rendering. The reason might be that when the device is rotated, the system would have to re-think and update the rendering because the subpixels are physically oriented in a different way, and the makers wanted to minimize CPU use.

Conclusions

Website visitors use a great variety of systems and browsers. Some are not up-to-date, and sometimes it’s not even the user’s fault, but rather a company’s policy to stick with a certain setup. My personal opinion is that we should try and give them the best rendering we can, instead of blaming OS makers, or demanding users to switch to better systems.

On Mac OS and iOS, we hardly have any control over the rendering, which is acceptable (since it’s generally very reliable). One problem is that fonts generally render too heavy. Maybe some day, Web font services can improve the consistency by serving slightly heavier or lighter fonts depending on the platform.

On Windows, hinting matters—especially for TrueType-based fonts (the only Web fonts Internet Explorer 6–8 will accept). Apart from that, one significant control we have over the rendering is the choice between TrueType and PostScript. Except for very well-hinted fonts in smaller sizes, the latter is equal or superior in rendering, and easier to produce. Even though DirectWrite is making Windows rendering more pleasant, it will not remove the necessity to provide well-hinted fonts.

Practical Application: Improving Display Font Rendering

Some Web font providers (such as Typekit or Just Another Foundry), have started serving display fonts in PostScript-based formats.

JAF Domus Titling in different rendering environments.

While the GDI ClearType jaggies are unavoidable for IE 6–8, all other scenarios produce nice, smooth results. This also means that we will still need fonts that have decent TT-hinting—the browser share of IE6–8 is still too big to deliver fonts that don’t at least render in a clean fashion.

Bello—by Underware on Typekit—served as PostScript-based Web fonts (right), which gives smoother rendering than TrueType (left).

Typekit has also started to implement a hybrid strategy by serving display fonts as PostScript in order to trigger smoother rendering in Windows GDI. This requires some decisions to be made on the basis of visual judgement.

“How do you define a display font?”, you may ask, and it is indeed difficult to draw the line. Some of the foundries offer high-quality, manually hinted TrueType fonts that look great in text sizes (and it would be a pity to lose this sophistication by converting them to PostScript). Some text fonts may well be used in very large sizes. So ideally, we would have to offer them in two different formats. However, increased complexity of the UI (as well as back-end handling) have so far kept us from doing this.

Future Developments

More and more type designers are becoming aware of the technical issues that arise when fonts are used on the Web, particularly TrueType hinting. As the Web font business grows, they are willing to put some effort into screen-optimizing their fonts. In the near future, we will hopefully see a number of well-crafted new releases (or at least updates to existing fonts).

With increasing display resolutions— and more importantly, improving rasterizers—we will slowly have to worry less about the technical aspects of font rendering. GDI-based browsers will certainly be the boat anchor in this respect, so we won’t be able to use TrueType fonts that aren’t carefully hinted for yet another few years. Once this portion of Web users has become small enough, the process of TrueType hinting (which is time-consuming and requires considerable technical skills), becomes less crucial. While most Web fonts currently on the market are TrueType-flavored, I am expecting that the industry will largely switch to PostScript, which is the native format nearly all type designers work in (the fonts that are easier to produce).

Other Resources

DirectWrite Text Rendering in Firefox 6, Mozilla Blog
JAF Domus Titling as Web font, Just Another Foundry
New from Typekit: Improved font rendering on Windows, Typekit Blog
The Benefits Of OpenType/CFF Over TrueType, Typblography

(jvb) (ac) (il)

Note: A big thank you to our fabulous Typography editor, Alexander Charchar, for preparing this article.

When Typography Speaks Louder Than Words

Carolyn Knight, Jessica Glaser — Fri, 13 Apr 2012 14:01:54 +0000

Clever graphic designers love to use typography to explore the interaction between the look of type and what type actually says. In communicating a message, a balance has to be achieved between the visual and the verbal aspects of a design.

Sometimes, however, designers explore the visual aspect of type to a much greater extent than the verbal. In these cases, the visual language does all the talking. This article explores when the visual elements of typography speak louder than words.

Cal Swan, author of Language and Typography, makes this point well when he says, “These two distinct areas often come together in practice as there is clearly a very strong relationship between the conception of the words as a message and their transmission in visible form.”

To avoid any misunderstanding, let’s clarify what the terms “visual language” and “verbal language” mean. In professional graphic design, visual language refers to the meanings created by the visual appearance of both text and image. In this article, the term “visual language” refers to the character and significance created by carefully selected typography. Verbal language is the literal meaning of words, phrases and sentences.

In this first of a two-part series, we will look at the powerful effect that typography has in taking control of meaning. We will discuss a range of examples, from verbal language that inspires and shapes visual treatment to visual language that dominates verbal meaning. The implications of typographic choices in meaning and interpretation will also be examined. And we will show how the same message can be presented in a number of ways to convey and encourage a diversity of responses.

We all have different cultural backgrounds and experiences that affect our perception of type one way or another. So, regardless of the designer’s skill and effort, a number of uncontrollable aspects remain, including the viewer’s perception, expectations, knowledge, experiences and preferences. And while accounting for all such unpredictable responses to type is impossible, awareness is critical.

For starters, let’s look at an interesting piece from an ad campaign by Greenpeace:

The name style from Greenpeace’s campaign to raise awareness of the impact of deforestation.

In this ad, you are confronted with the familiar name style of one of the world’s favorite chocolate bars, the Kit Kat. The type style and letterform proportions and certainly the color, shape and angle all create an instantly recognizable connection with the Kit Kat brand — so much so that you would be forgiven for seeing the name Kit Kat before reading and taking in the actual written message. Your familiarity with the brand is an instant draw, and appreciating the change of message might take you a second look.

Manipulating Feelings and Reactions

The visual language established when designing with type can bring into play not only emotions, but also physical responses. The following examples are simple illustrations of the varied and emotive effects and highly dominant control that can be achieved by changing the visual language of a message, while still presenting the same verbal language.

This first of a pair of illustrations shows a single large bold word, set in lowercase and closely kerned. The positioning in the frame makes the word dominant and loud, and the message comes across as enthusiastic, friendly and confident. The person speaking is pleased to see you and is coming towards you with a big smile on their face.

The second illustration contrasts dramatically with the first, despite featuring the exact same greeting. The font, case, scale, color and positioning all suggest a considerably more distant and hesitant meeting. In fact, you would be forgiven for thinking that the person speaking here is not at all sure they even want to acknowledge you and would have preferred to ignore you completely.

Reading these examples aloud helps us instantly appreciate the different effects of visual language. If you read the first example out loud, it would be a loud enthusiastic call that exudes genuine delight, friendliness and openness. Reading aloud the second example, the exact same word, it would be delivered in a much quieter tone, an almost hesitant voice, lacking the assurance and delight of the first. There is an infinite range of typographic alternatives that achieve subtle or dramatic changes in volume and tone of voice.

Making The Most Of Visual Language

Verbal language is often used to inspire and shape design and typography in order to get a message across, with the goal being to make the most of the viewer’s reaction. Carefully mixing a design’s implication with literal meaning can lead to a memorable outcome. The following designs are great examples of the effects that can be achieved by employing verbal language that has helped to inspire a visual treatment.

Our first illustration is taken from the work of renowned American graphic designer Herb Lubalin, who was described in a monograph about him by Gertrude Snyder and Alan Peckolick as being “a tenacious typographer, whose graphic concept employed copy, art and typography, and he used available production methods to underline the drama inherent in the message. Idea preceded design.”

Given the subject of this article, this quote is especially fitting. It shows Lubalin as a designer who valued the combined communicative power of language, typography and composition. The book goes on to explain that he used production methods not just for effect but also as a way to emphasize the meaning and message of a project. In Lubalin’s time, these decisions would have entailed manual labor, posing greater limitations than we face today. Finally, this quote confirms that, for Lubalin, concept was of paramount importance and always came before design.

One of his many entries in the Visual Graphics Corporation’s 1964 competition features a carefully selected quote by US editor and writer Caskie Stinnett.

One of Lubalin’s many typographically expressive designs that have become iconic and inspiring to generations of graphic designers. (Image: Peter Gabor)

Using delicate and well-considered composition of typographic detailing, Lubalin has succeeded in making an unpleasant message seem attractive and pleasing. The quote states “A diplomat is a person who can tell you to go to hell in such a way that you actually look forward to the trip.” The focal point of this statement, being told to “go to hell,” is shown in an elaborate and elegant calligraphic form, enabling this mildly offensive statement to be mistaken for something that could be looked forward to with great anticipation at first sight.

The work of hand-lettering designer Alison Carmichael provides a range of current examples that beautifully illustrate the powerful effect of typography when it takes control of meaning. One such design is her award-winning self-promotional ad for the Creative Circle. Carmichael’s hand-lettering is engraved and inked in an elaborate style on the lid of an old school desk. At first sight, we seem to be looking at a beautiful, possibly historic, work of gothic lettering; seconds later, reality strikes and the rather unpleasant meaning of the text becomes clear.

Award-winning self-promotional ad by Alison Carmichael for the Creative Circle.

Type Tarts is a UK initiative established to raise awareness of the plight of workers trafficked into the sex industry. Contributing designers are asked to send type-oriented “Tart cards” for exhibition. Many London prostitutes advertise their services by displaying promotional cards in phone boxes. Even in the age of the Internet and mobile phones and in the face of police crackdowns, these cards have achieved a cult following, being highly praised and collected as art.

Both examples below use expressive typefaces and type manipulation to visually reinforce the meanings of the provocative text. In the context of the campaign, figuring out the meaning of the cards is easy enough.

“Nice and Tight” by Duncan Bancroft

“Big and Bouncy” by Peter Fletcher

Another stunning example of the visual language of type is by American designer Jason Munn, well known for his highly acclaimed music posters. This example for Liars is mainly typographic, with sections of each letter cleverly removed so that the viewer doesn’t get the full picture. What is the truth? The choice of typeface is also significant; its extreme contrasts of thick and thin strokes point to the contrast between truth and lies.

Jason Munn’s poster for the US band Liars

The designs above use type to reinforce the meaning of their statements. Meanwhile, the British Battleaxe Collection’s visuals for a proposed range of type-based tea towels feature quotes from strong UK female comedy characters. These designs are doing something slightly different; type is used primarily to reinforce the agenda and assertive tone of the speakers.

British Battleaxe typographic tea towel design, inspired by the voice of the lead character in the BBC sitcom Keeping Up Appearances. (Credit: Bright Pink Communication Design)

The example above features a quote from the BBC sitcom Keeping Up Appearances. The words themselves are spoken by the program’s main character — the eccentric, social-climbing and bossy Hyacinth Bucket, a lady in her 60s with grand aspirations. Typographically, the letterforms have been selected and grouped to emphasize the desires of the character. The words “I want” and “my” stand out because of a dramatic change of scale. “Superiors” is emphasized with capital letters, whereas “your” is reduced in size and given lowercase letters, thus downgrading the importance of whom she is talking to, in keeping with the character’s bossy nature and tone of voice when speaking to her milkman.

In this design, the typeface has been dictated by the character’s tone of voice. The serif typeface with its stylish italics and capital letters captures the meaning and cultural context of this statement from a “woman of a certain age.”

Typography is used to communicate tone of voice, personality, age, gender and mood, and it can be easily manipulated. If, instead of this serif font that so successfully represents this woman’s personality, we used a slab serif, suddenly the character changes, as does the emotional impact of the statement. Judging simply by the font, the narrator is no longer definitively female; she is no longer in their mid-60s, and her mood is not merely pompous, but could be described as verging on angry. It’s a great example of how quickly the tone can shift with a simple change of typeface.

A different typographic treatment of this tea towel clearly manipulates the tone of voice and possibly even changes the gender of the speaker. (Credit: Bright Pink Communication Design)

The Power Of Typography Cannot Be Underestimated

All the examples discussed in this article demonstrate that typographic treatment works alongside verbal language to create, enhance and alter meaning. While the aesthetic value of design is always important, the significance of type in influencing meaning should not be underestimated.

The role — and, in fact, the obligation — of the designer in establishing a tone that adds meaning to the verbal message is a matter of regular debate. Many graphic designers and academics argue that the designer has a responsibility to add “flavor” to their work, not only helping to convey and enhance meaning, but also making the message enjoyable and encouraging to “read” and also memorable.

In the second part of this article, we’ll continue looking at the relationship between visual and verbal language. We’ll touch briefly on the structure and semiotics of language, as well as showcase some remarkable examples, all helping to explain why subtle typographic changes make all the difference.

Further Resources

The Herb Lubalin Study Center of Design and Typography
Herb Lubalin Archive at Cooper Union, Flickr
Reading Images: The Grammar of Visual Design, Gunther Kress and Theo van Leeuwen.

(al) (il)

Image credits of image used for Smashing Magazine’s frontpage.

Note: A big thank you to our fabulous Typography editor, Alexander Charchar, for preparing this article.

Drop Caps: Historical Use And Current Best Practices With CSS

Laura Franz — Tue, 03 Apr 2012 16:16:51 +0000

The practice of using a large letter to mark the start of a text has been around for almost two thousand years. Illustrated caps increased usability by marking important passages and guiding readers through the text. Unlike their historic counterparts, drop caps on the Web don’t add value in terms of usability or readability—and they are hard for Web developers to control, often rendering differently across browsers.

Yet, front-end designers and clients often want to use drop caps as decorative elements. How should we implement them? Just as scribes, artisans, and early printers had a variety of methods for creating initial capitals, we Web designers have multiple methods to choose from. We can use an image of a letter, create a class to enlarge and place a letter, or use a first-child:first-letter to enlarge and place the first letter of the first paragraph. But which method should we use? Which method remains consistent across browsers? Which is most accessible?

Initial Caps In Manuscripts

Examples of initial caps have been found dating back to the 4^th century CE. Early codex books (books with pages, as opposed to scrolls) did not have word spaces, sentence breaks, or paragraph breaks. The written word was not “read” the way it is now. Written text represented sounds; sounds held meaning. “Readers” lived in a primarily oral culture and verbalized the sounds to help them remember ideas and information already committed to memory.

Historically, initial caps were not just decorative elements. Scribes used them to mark where a new section—a new idea—started in the text. This in turn helped “readers” find their place in a text.

Even as late as the 15^th century, monks and scribes used initial caps to aid in visually “chunking” texts. Figure 1 shows a manuscript (lettered by hand) bible from 1407. The initial cap (P in the word Petrus) contains a picture of St. Peter, and is thus historiated; it relates to the text by showing a recognizable figure or scene. It is also illuminated; it is decorated with gold in order to bring the light of God to the reader.

Historiated caps not only helped mark the start of a new idea in the text, they acted as place markers for significant places in the text. Images related to the story served as memory aids for priests and monks who “read” the texts by flickering candle light.

But look closely (Figures 1 and 2) and you’ll see a far more subtle “initial cap.” The manuscript contains word spaces but does not contain a space between sentences. Thus, the letterer added strokes of red to the first letter of each sentence, giving visual separation to sounds represented on the page.

Figure 1: Illuminated, Historiated Cap in a Latin Bible, 1407. Lettering by Gerard Brils, Belgium. (Image: Adrian Pingstone)

Figure 2: Detail of Latin Bible, 1407. Lettering by Gerard Brils, Belgium. Note the subtle use of color to emphasize the start of a new sentence. (Image: Adrian Pingstone)

Initial Caps In Printed Books

Of course, not all initial caps were as sexy as the image of St. Peter illuminated with pure gold. Initial caps were also used for mundane purposes: like indicating the alphabetical order of ideas. Routine today, alphabetizing was not originally used to organize information in books. Figure 3 shows a page from the table of contents of an incunabula (an early printed book). The initial caps were written in after the book was printed. The quality of lettering is not as beautiful as the St. Peter example above, but the letters serve an important purpose for the reader.

Figure 3: The last page of a table of contents from an early printed book. 1476. Initial caps added after the book was printed. (Image: used by permission of University of Glasgow, Special Collections)

Early printed books were often designed to replicate manuscripts. Printers left space in and around the text—so owners could hire an artisan to illustrate initial caps and borders. Figure 4 is an example of one such book; no initial cap was ever added. Note the initial space and guide letter provided for the illustrator. Even without the final initial cap, the text is readable (if you read Latin).

Figure 5 is a printed Bible from the same time and place (Venice, 1480). After it was printed, artisans supplied rubricated (written in red), decorated, and illuminated initials—thus continuing the formal tradition of the manuscript book.

Not all printed books required an artisan to finish the initial caps. Printers designed and created modular initial caps almost from the beginning. Figure 6 shows two inhabited caps (the illustrations do not represent a specific person or scene) set side-by-side, each starting a different translation of the New Testament. The inhabited caps and border where printed along with the text.

Figure 4: The printer left an initial space with guide letter. After printing, an artisan could be hired to add an initial cap. Venice, 1479. (Image: used by permission of University of Glasgow, Special Collections)

Figure 5: Printed Latin Bible. An artisan added various initials after the book was printed. Venice, 1480. (Image: used by permission of University of Glasgow, Special Collections)

Figure 6: The first complete published text of the Greek New Testament. The inhabited caps and border were printed with the text. Basel, 1516. (Image: used by permission of University of Glasgow, Special Collections)

The role of written texts changed starting in the mid-1600’s, and initial caps fell out of favor. Newspapers allowed readers to share current ideas and information, scientific inquiry provided a basis of rational thought, and the typographic page simplified. The relationship between type and image continued to shift—primarily influenced by industrialization (which in turn influenced the art of printing, the speed at which goods could be produced and transported, and the development of a literate middle-class).

Drop Caps On The Web

Today, initial caps are no longer necessary; they are used primarily as decorative elements. Used for centuries in religious and scholarly texts, initial caps are associated with and communicate an “old” or “traditional” feeling. Thus, when we want to design a Web page that feels traditional, elegant, or historic, we find ourselves wanting to use drop caps.

There are four common methods for creating drop caps in HTML and CSS. But which one is best?

In an attempt to answer that question, I tested all four methods across 82 different browser-version-operating system combinations—including smart phones. (If you’re interested, you can read a list of the combinations and why I chose them). In an attempt to identify which methods are accessible, I also tested them using VoiceOver on the mac, with Safari 5.1.1.

Which method is best? The answer is… not clear-cut.

Method 1: Image Replacement

If you want a drop cap that shows up consistently across all operating systems—including smart phones—there isn’t one. But using the Image Replacement method (Figure 7) comes close. Using an image for the drop cap holds up beautifully across 79 of the 82 combinations tested. It shifted placement on Opera Mini 5.1 (Android 2.2), and Mobile Safari 4.0.5 (iPhone 4, iPhone 3GS).

Figure 7: An inhabited initial cap similar to those used in the 1516 Greek New Testament shown in Figure 6 above. [1] Using an image for the drop cap holds up beautifully across 79 of the 82 browser-version-operating system combinations tested. [2] It shifted down slightly on Opera Mini 5.1 (Android 2.2). [3] It shifted up on Mobile Safari 4.0.5 (iPhone 4, iPhone 3GS), resulting in an awkward space below the image. (Drop cap illustration: Bruce Maddocks)

HTML for the “Image Replacement” Example

Fine typography does not …

Note that I used two classes for the span. This allowed me to use one class (drop) to style the space, and use another class (f) to specify the image of the letter.

CSS for the “Image Replacement” Example

.drop{
    display:block;
    float:left;
    width:72px;
    height:72px;
    margin-top:5px;
    padding-right:8px;
    text-indent: -9000px;
    }
.f{
    background: url(images/f_small.jpg) 0 0 no-repeat;
    }

Note that I set the width and height of the space to the same dimensions as the image used to represent the drop cap. The text-indent attribute is used to place the actual letter outside the visible area of the space. We don’t want to see the HTML letter, but it’s important to include it so browsers without CSS enabled will show the entire word.

View the original Image Replacement example HTML document.

Method 2: Letter Over a Background Image

Placing a letter over a background image is a bit less successful (Figure 8). It works consistently across 77 of the 82 combinations tested. It posed a problem on the same three browsers as the Image Replacement method above—Opera Mini 5.1 (Android 2.2), and Mobile Safari 4.0.5 (iPhone 4, iPhone 3GS)—as well as Windows Vista IE7 and Windows XP IE7. Granted, PC users increasingly use Windows 7 with IE8 or higher, so the last two browsers may not be a problem.

Figure 8: A decorated initial cap similar to one used in the 1480 Printed Latin Bible shown in Figure 5 above—created using a background image. [1] Placing a letter over a background image holds up beautifully across 77 of the 82 browser-version-operating system combinations tested. [2] The drop cap lost styling on the Opera Mini 5.1 (Android 2.2). [3] The letter and image shifted up on Mobile Safari 4.0.5 (iPhone 4, iPhone 3GS), resulting in an awkward space below the image. [4] The letter was cut off on Windows Vista IE7 and Windows XP IE7.

HTML for the “Letter Over Background Image” Example

Another way to …

CSS for the “Letter Over Background Image” Example

.cap{
    display:block;
    float:left;
    width:72px;
    height:52px;
    font-size: 500%;
    color:#ffffff;
    margin-top:5px;
    padding-top:20px;
    margin-right:8px;
    text-align:center;
    background: url(images/flower.jpg) 0 0 no-repeat;
    }

Note that I added a padding-top in this version so the letter doesn’t touch the top edge of the background image.

View the original Letter Over Background Image example HTML document.

Method 3: Span Class, No Image

Creating a class for the drop cap (without a background image) is even slightly less successful (Figure 9). It works consistently across 76 of the 82 combinations tested. It posed a problem on the same five browsers as the Letter with a Background Image method above—Opera Mini 5.1 (Android 2.2), Mobile Safari 4.0.5 (iPhone 4, iPhone 3GS), Windows Vista IE7 and Windows XP IE7—as well as Windows XP IE6. Again, PC users increasingly use Windows 7 with IE8 or higher, so the IE6 browser may not be a problem.

Figure 9: A simple initial cap similar to those used in the 1480 Printed Latin Bible shown in Figure 5 above. [1] Creating a class for the drop cap without a background image holds up across 76 of the 82 browser-version-operating system combinations tested. [2] The drop cap lost styling on the Opera Mini 5.1 (Android 2.2). [3] It shifted up on Mobile Safari 4.0.5 (iPhone 4, iPhone 3GS), resulting in an awkward space below the image. [4] The letter was cut off on Windows Vista IE7, Windows XP IE7, and Windows XP IE6.

HTML for the “Span Class, No Image” Example

Historically,…

CSS for the “Span Class, No Image” Example

.dropcap{
    float:left;
    font-size:400%;
    margin-top:14px;
    margin-right:5px;
    color:#8C8273;
    }

Note that I added a margin-right of 5px in this version. The letter H worked well with this amount of space. The margin-right may need to change depending on the shape of the letter being used as a drop cap.

View the original Span Class, No Image example HTML document.

Method 4: First-Child:First-Letter

When it comes to consistency, using a p:first-child:first-letter is the least successful (Figure 10). It posed problems with the same 6 combinations as the Span Class, No Image method above—Opera Mini 5.1 (Android 2.2), Mobile Safari 4.0.5 (iPhone 4, iPhone 3GS), Windows Vista IE7, Windows XP IE7 and Windows XP IE6—and had inconsistent placement in the remaining 76 combinations tested. When setting the original drop cap placement for Firefox, 31 combinations remained properly aligned. The drop caps in the remaining 44 combinations were too high.

Figure 10: A rubricated (red) initial cap similar to those used in the 1476 and 1480 early printed books shown in Figures 3 and 5 above. [1] Using first:child-first:letter to create the drop cap resulted in proper placement in 31 of the 82 browser-version-operating system combinations tested. Note: the original placement was determined viewing the page in Firefox. [2] The drop caps in 45 versions were too high, resulting in an odd relationship between the drop cap and the text. [3] The drop cap lost styling on the Opera Mini 5.1 (Android 2.2). [4] It shifted up on Mobile Safari 4.0.5 (iPhone 4, iPhone 3GS), resulting in an awkward space below the image. [5] Again, the letter shifted up (Windows Vista IE7, Windows XP IE7), allowing one of the lines of text to move over and creating an awkward relationship with the text. [6] The letter lost all styling (including space) in Windows XP IE6.

HTML for the “First-Child:First-Letter (Firefox)” Example

Historically, initial letters…

CSS for the “First-Child:First-Letter (Firefox)” Example

p:first-child:first-letter{
    float:left;
    font-size:400%;
    margin-top:7px;
    margin-right:5px;
    color:#992E00;
    }

View the original First Letter, FireFox example HTML document.

Testing for Accessibility: VoiceOver

Before deciding which of the four methods is best, I wanted to test them all for accessibility. Getting type to look good sometimes means choosing presentational markup over semantic markup—which can affect how well a screen reader reads a Web page.

Using VoiceOver on the mac (Safari 5.1.1), only the First-Child:First-Letter method was read correctly. The other three methods use a class to separate the drop cap from the rest of the text; VoiceOver verbally separates the initial letter from the rest of the word (e.g. “H”… “istorically”).

Thus, the method that is least successful visually is most successful in terms of accessibility. So I decided to do some more testing before choosing a best method.

Method 4 Revisited: First-Child:First-Letter—Placement Based on Both Firefox and Windows 7 IE8

Using a p:first-child:first-letter is still the least consistent method. It posed problems with the same 6 combinations as the First-Child:First-Letter method above—and continued to have inconsistent placement in the remaining 76 combinations tested.

But when I increased the size of the drop cap and set the original placement based on simultaneously considering the results in both Firefox and Windows 7 IE8, the shift in placement didn’t feel as random (Figure 11). Some drop caps align with the baseline of the second line of text (Figure 11:1). Some align with the top of the first line of text (Figure 11:2). There is too much space below the drop caps that align to the top—creating a white square that pops out and calls attention to itself—but if one is a stickler for accessibility and semantic markup, this method could work.

Figure 11: When working with first-child:first-letter, simultaneously consider multiple browsers when placing the drop cap. [1] The revisited drop cap, viewed in Windows 7 IE8. The letter aligns nicely with the baseline of the second line of text. My original first-child:first-letter drop cap (in red) didn’t line up with anything when viewed in Windows 7 IE8. The placement looked random. [2] The same revisited drop cap when viewed in Firefox. The drop cap continues to come in lower, but due to carefully chosen font-size and margin-top, it continues to align with the top of the first line of text. My original first-child:first-letter dop cap (in red) was perhaps more successful. It didn’t have the white space below it when viewed in Firefox. The first-child:first-letter method is not perfect, but might be a good choice when aiming for accessibility.

HTML for the “First-Child:First-Letter (revisited)” Example

Historically, initial letters…

CSS for the “First-Child:First-Letter (revisited)” Example

p:first-child:first-letter{
    float:left;
    margin-top:7px;
    font-size:70px;
    margin-right:5px;
    color:#3D3529;
    }

View the original First Letter, Revisited example HTML document.

Letter Shapes And Letterspacing

Letters have different shapes (round, triangular, open, and square) which means they have different amounts of visual space around them (Figures 12 and 13).

Figure 12: The letters A and T naturally have more visual space than the letters O and M. Font designers adjust letterspacing so letters appear more even in text; the A and T are “tightened” in the final font.

Figure 13: Letter shapes and letterspacing change from font to font. Various Os have different visual space.

A well-designed font takes into account the varying amounts of visual space. Triangular and open letters are designed with tighter letterspacing (space is taken out). Square letters are designed with looser letterspacing (space is added). This approach to spacing is great in text; if type designers didn’t adjust spacing in a font, we’d end up with big gaps of space in the middle of words! But unfortunately, adjusted letterspacing creates problems in drop caps.

Letterspacing and the “Span Class, No Image” Method

Figure 14 shows various letters set as drop caps using the Span Class, No Image method. In Figure 14:1, the letters O and T look great, but the other four letters (C, A, K, L) are all a bit too tight to the text. In fact, the A and L look like they belong with the second line of their texts! (“A use various…” “Lit’s an open…”) Due to their open or triangular shapes, C, A, K and L have slightly tightened letterspacing in the font. This makes them look tight when used as drop caps, even though all the letters are set with the same right-margin: 5px.

In Figure 14:2, the letters are more comfortably spaced with their texts. Each letter has a unique class styled with an appropriate margin to each. Right margins range from 5px to 8px.

Figure 14: Different letters need a different amount of right margin. [1] The O and T have appropriate space around them. The other letters are too tight to their texts. [2] Using a unique class for each letter, right margins have been adjusted. The change is subtle, but the L no longer looks like it belongs with the second line of text!

HTML for the “Span Class Letterspacing” Example

Once upon a time,...

And when she tested...

The drop caps used...

Can you use...

Kittens don’t...

Later she realized...

CSS for the “Span Class Letterspacing” Example

.dropcap_a, .dropcap_c, .dropcap_k, .dropcap_l,.dropcap_o, .dropcap_t {
    float:left;
    font-size:370%;
    margin-top:14px;
    color:#8C8273;
    }        
.dropcap_o,.dropcap_t{
    margin-right:5px;
    }
.dropcap_k {
    margin-right:6px;
    }
.dropcap_a, .dropcap_c {
    margin-right:7px;
    }
.dropcap_l{
    margin-right:8px;
    }

View the original Span Class Letterspacing example HTML document.

Letterspacing and the “First-Child:First-Letter” Method
Letter shapes and letterspacing create similar problems in drop caps set using the First-Child:First-Letter method. In Figure 15, there is a generous space between the O and its text. The A, on the other hand, is too tight and looks like it belongs with the second line (“A various letters…”). Look at the O again; the curved bottom of the letter adds visual space and makes it look like it’s floating higher than the A and T in relation to the text.

The T has the best spacing—it’s tighter than the O and looser than the A—but creates an odd enclosed white space between the stem (the vertical stroke) of the T and the text. This happens when using the First-Child:First-Letter method because we have less control over the vertical placement of the drop cap (remember, we have to compromise size and placement to achieve the best results across browsers).

Figure 15: Two methods that apply identical spacing to every drop cap. [1] Using first-child:first-letter creates inconsistent visual space if different letters are used as drop caps on a web site. [2] Using an image behind the drop cap creates a consistent visual space for the drop caps to inhabit.

Unfortunately, we can’t adjust the letterspacing; it’s not possible to create 26 unique versions of first-child:first-letter and style them using only HTML and CSS. (If anyone has figured out a solution, please share it with us in the comments.) Thus a website using the First-Child:First-Letter method will be riddled with awkwardly spaced drop caps.

Letterspacing and the “Image Replacement” and “Letter Over an Image” Methods

Both the Image Replacement method and the Letter Over an Image method (Figure 15:2) have appropriate spacing regardless of the letter used. These methods set a consistent width to hold the image; variations in letterspacing take place within the image border—not between the drop cap and the text.

But what if you want to use the image replacement method to insert images of drop caps that don’t have a consistent width?

Figure 16 shows various letters set as drop caps using the Image Replacement method; without a background, the drop caps no longer have a consistent width. In the left panel (Figure 16:1), the letter M looks great, but the letters O and I have awkward spaces between the drop cap and the text. This variation in spacing is not due to letterspacing in the font; it occurs because the letters themselves have different widths. In the right panel (Figure 16:2), the letters are more comfortably spaced with their texts. Each letter has a unique class styled with an appropriate width. Widths range from 41px to 85px.

Figure 16: Letter width can also affect the amount of visual space around a letter. [1] The M has appropriate space around it. The O and I are narrower, so the space provided is too wide. [2] Using a unique class for each letter, widths have been adjusted.

HTML for the “Image Replacement, No Background” Example

Once upon a time...

Initially, she made sure...

Many shapes were...

Note that I used two classes for each span. This allowed me to use one class (drop_o) to style the space, and use another class (o) to specify the image of the letter.

CSS for the “Image Replacement, No Background” Example

.drop_o, .drop_i, .drop_m{
    display:block;
    float:left;
    height:72px;
    margin-top:8px;
    text-indent: -9000px;
    }
.drop_o {
    width:73px;
    }
.drop_i {
    width:41px;
    }
.drop_m {
    width:85px;
    }
.o{
    background: url(images/didot_o.jpg) 0 0 no-repeat;
    }
.i{
    background: url(images/didot_i.jpg) 0 0 no-repeat;
    }
.m{
    background: url(images/didot_m.jpg) 0 0 no-repeat;
    }

Note that I set the height of the space to the same dimensions as the image used to represent the drop cap. The widths are wider than the images; width provides a margin of space between the drop cap and the text.

View the original Image Replacement, No Background example HTML document.

The Best Method: Merging Tradition And Technology

Balancing issues of consistency, accessibility, and letterspacing, I recommend using either Method 1: Image Replacement or Method 2: Letter Over an Image. Both hold up well across most browsers tested; both methods allow Web designers to create elegant, decorative drop caps.

If you absolutely do not want to use images for your drop caps, then I recommend using Method 3: Span Class, No Image.

Drop Caps Do Not Promote Readability

Some may disagree with my recommendation and say that First-Child:First-Letter is a better choice due to accessibility issues; it was the only method to work properly with VoiceOver.

I understand that argument – I usually aim for accessibility. But when it comes to drop caps, I find the screen reader’s “incorrect” verbalization is ironically closer to the experience a sighted reader has. When reading text with a drop cap, we always “read” the letter, then the partial word, and then have to piece the two together. (Try it with Figure 16 above. Do you read “O” and then “nce” and then do a bit of mental gymnastics to read the word “Once?”)

The visual separation caused by using a drop cap interferes with word recognition for everyone. Drop caps are decorative elements. When we use them, we are setting a tone—often at the expense of readability.

Beautiful Drop Caps Can Be Inserted into the HTML Automatically

One could argue that First-Child:First-Letter is still a better choice because it eliminates the need to insert syntax in the HTML for every drop cap. Using first-child:first-letter, drop caps are created automatically.

But there’s another way to automatically create drop caps. With a little javascript you can insert span classes (with or without images) into your HTML. You can even create multiple unique classes (e.g. 52 classes, two for each letter) and articulate which class—or classes—to apply.

Jason Lynes of NorthTemple.com provides a clearly written case study on using jQuery and CSS to insert Image Replacement drop caps. Lynes’ case study highlights an article for the LDS Church. I’m not inviting conversation about the content of the article; I am providing the case study as an excellent tutorial on “automating” drop caps with jQuery and CSS.

I’ve tested Lynes’ method – I used it to create a page of Span Class, No Image drop caps. It works like a charm and degrades beautifully (drop caps revert to plain text on browsers that are not javascript enabled). View my original Span Class, jQuery example HTML document.

Beautiful Drop Caps Take Time and Effort

Figure 17: Another look at initial caps from (clockwise from top left) 1407, 1476, 1480, and 1479. [1] Two of the initial caps are painted with care. [2] The other two are examples of “quick solutions” to initial caps: a set of hastily written caps and an initial space set aside for an artisan to fill in.

Deciding to use drop caps on a website means making a conscious choice to use a primarily decorative element. Unlike initial caps in manuscripts and incunabula, a drop cap on the Web doesn’t add value in terms of usability or readability; its main purpose is to look good. And making a drop cap look good—whether in a manuscript, an incunabula, or on the Web—takes time (Figure 17).

Even if we automate our drop caps with jQuery, we need to do the preliminary work—make images, test letterspacing, and set up 26 (or 52) unique classes. Creating beautiful, high quality drop caps may sound like a chore, but we are continuing a respected tradition that is almost two thousand years old. When we look back through history, we see the best initial caps have always taken time and effort.

Weird And Wonderful, Yet Still Illegible

Alastair Johnston — Wed, 21 Mar 2012 15:17:26 +0000

First a question (or perhaps a Freudian jab at your subconscious): What does this shape represent?

Could it be a trowel, a duck, an ornamental motif, or a seed-pod? I know, Aladdin’s Lamp! What if I told you it was an alphabetic character? What alphabet would you assign to it? Cham? Telugu? Perhaps it has the cursive quality of South Asian letterforms, created on bamboo strips (or palm leaves) and written with the pen held in one’s fist… doesn’t it?

It has been said that “we read best what we read most”. This quote was used as a type specimen in Emigre magazine in the late 1980′s by Zuzana Licko. It was written in defense of her typefaces, whose elemental shapes—designed with the strictures of the early HP laser printer in mind—challenged the commonly held notions of what made typefaces legible.

The paradigm shift—wrought by the personal computer, Postscript and desktop publishing—should have had a massive impact on the shapes of our typographic characters, just as the advances of the World Wide Web further changed the way we viewed words (even though letterforms change at the pace of the most conservative reader). Thus, radical innovations like Kurt Schwitters’ Systemschrift, (a phoenetic alphabet from 1927), are doomed to fail.

Our writing, which is derived from either Roman or Gothic forms (and sometimes both), is historic and non-systematic, said Schwitters. His “optophoenetic” approach was to make the shapes of the letters more accurately reflect how they sounded. But in order for it to work, massive re-education would be required.

Kurt Schwitters’ “Systemschrift”, an attempt at developing a phoenetic alphabet.

Licko was paraphrasing Sir Cyril Burt who wrote, “almost everyone reads most easily matter set up in the style and size to which he has become habituated.” (A Psychological Study of Typography, Cambridge, 1959, p. 18). So we do not necessarily respond to “beautiful” type. You may find Centaur elegant, but others will find the spiky serifs distracting. For this reason, rather dull typefaces (like Times Roman), come to dominate our graphic landscape. My purpose here is to examine some failed attempts at creating economy, or furthering the cause of legibility.

Is Blackletter Unreadable?

For hundreds of years English was written and read in blackletter. Today we struggle with such works, such as in the piece below printed by Richard Faques at the “Sign of the Maiden’s Head” (St Paul’s Churchyard, London, 1530). The Roman character gradually supplanted blackletter in the 17th century. It was referred to by the English printers as White Letter, due to the lighter massed effect on the page. In the 19th century, during the period known as the Gothic Revival, blackletter was reintroduced as a novelty in English printing.

Our modern Roman alphabet is a hybrid reflecting the handwriting from two periods in the development of Roman letters. It combines the Capitalis Quadratus of 1st century Roman inscriptional lettering—which are our “capital” letters—with their devolved state as manifested in the 11th century in the monasteries (that had flourished in France under Emperor Charlemagne). These became our minuscules, or lower-case letters.

Charlemagne himself desired to learn to read and write, but said that “a hand accustomed to the sword could only form the simplest shapes.” By this time, war with the Arabs had cut off the supply of reeds, but relief was on the way with the introduction of papermaking (cheaper and more amenable to writing than parchment was), and goose or crow quills were substituted for reeds. These, in turn, gave way to steel pens, introduced in the 18th century (and popularized in the 1830′s), which also had a strong impact on the way we read and wrote.

Copperplate scripts, learned from writing manuals, featured steeper angles and added virtuoso flourishing. Handwriting, just like music, was considered a useful art suitable for instructing young ladies.

Script type based on the hand of its cutter, Robert Granjon—a wonderful example of the everyday handwriting of 16th century Protestant Europe.

As letterforms were introduced by scribes, they were soon emulated by the founders of type. In 1557, French punch-cutter Robert Granjon cut a typeface based on his own handwriting, hoping to supplant the popularity of italics (first introduced by Aldus in a 1501 Virgil), which he himself had made widespread. His Gothic script (today called Civilité, after the children’s conduct book in which it was used) unfortunately did not catch on, although it accurately reflected the everyday handwriting in Protestant Europe at the time.

The problem for Granjon was printers were equipped with blackletter (batârde) for vernacular works, Roman type for works in Latin, and if they wanted variety, (say for poetry), they used italic. Beautiful as Granjon’s vernacular script is, it was not essential. On top of this, the extra sorts (30 ligatures, 24 alternates for terminal letters, etc.) made it difficult for typesetters. But the introduction to Gautier de Châtillon’s Ten Books of Alexandreidos (Lyon, 1558) lauds the type:

“The novelty and strangeness of these letters will certainly surprise the reader, but I dare say he will be as much delighted by their cleanness and elegance. In point of beauty and legibility these letters are not outdone by others, and they are familiar to us because they imitate the written hand. What is printed looks like writing, and it may be hard to tell the pages printed with type.”

— Translated by Harry Carter, in Carter & H. D. L. Vervliet, Civilité Type, Oxford, 1966, p. 16.

As If Written By Hand

Roman letterforms evolve slowly, gradually reflecting the medium in which they are written. The Rustic letterforms of the ancient Romans, often written with a stylus on a wax tablet, were fluid and more condensed than the capitalis quadratus, but less cursive than letters written in ink with a reed (on parchment or papyrus). In 1741, Joseph Manni, a Florentine printer (and the first of our misguided visionaries) produced a unique edition of Virgil based on a manuscript of the poems (Codex antiquissimus) found in the Medici Laurentian library.

With an eye on retro-style, he cut new versions of “A”, “U” and “Y”, and sorted them with his Roman capitals to create a likeness of the original—sacrificing detail, but giving an overall approximation of the look of this ancient manuscript. He refers to them on the title-page as “Typis descriptus”, or descriptive types. Daniel Berkeley Updike had said of it: “The work displays that amazing audacity at arriving at a striking effect, notwithstanding inaccurate details and economy of method, which was typical of Italian printing of the time.” (Printing Types, Harvard, 1937, vol 1, p. 171)

Florentine printer Manni cut new versions of A, U & Y to evoke a 1st century manuscript.

A later typographic copy of a manuscript form was made by the celebrated Caslon foundry in 1785 (run by William Caslon III). Talbot Baines Reed’s assessment is that it “is of no particular merit though faithfully enough rendering the contemporary clerkish hand.” (A History of the Old English Letter Foundries, 1952 Edition, Faber & Faber, p. 245). The type had to be heavily kerned (which caused frequent breakage, as it was cast on angular bodies) might work in some contexts, such as a circular letter, or brief documents intended to look hand-written.

But it certainly did not work for continuous text. Nevertheless, that was how it was put to use by J. P. Cooke, a London printer, in his edition of Mary Potter’s Poetry of Nature (1789). The poems are in fact prose reworkings from the legendary Highland Bard Ossian, hailed as “The Scottish Homer”, but who was actually a fabrication of the poet James MacPherson. Cooke added titles in blackletter capitals to really confound his readers.

The decorative qualities of the blackletter caps work well individually with the plainer lowercase letters, but when grouped together, all-cap titles in blackletter become a tangle of confusion. The copperplate script, however, was popular with founders (less so with printers, because of the breakage) and was still being manufactured up until the mid-19th century.

Script typeface cut by the Caslon foundry in 1785 that caused many problems as it had to be heavily kerned and led to frequent breakage.

So The Blind Can Read

Before Louis Braille (1829) there were several attempts to devise a raised letterform to teach the blind to read. Valentin Haüy met Baroness Von Paradis in 1780 and “was surprised to find in her apartments several contrivances for the instruction of the blind; for instance, embroidered maps, and a pocket printing apparatus.” (Charles Timperley’s Encyclopedia of Literary & Typographical Anecdote, London, Henry G. Bohn, 1842, p. 751).

Haüy’s Essai sur l’Education des Aveugles (Paris, 1786) was a strange effort. Printed by Clousier, printer to Louis XVI (the last King of France), the book was typeset by blind children as part of Haüy’s plan to allow them to be a useful part of society, by having them set and print work for themselves to read. His fundamental blunder was he approached the problem from the angle of a sighted person, assuming that conventional alphabets offered the best hope.

The highly decorative, non-kerning, upright script form he chose (popular in France at the time) would impede even the nimblest reading fingers. In the printed version the letter-spacing and swash cap headers also would slow you down. One minor benefit to the compositors was that since the work was produced by embossing, the young typesetters worked with right-reading types.

Two More Clues

OK, remember our quiz? Here are two more clues… what are these: Ladies’ shoes, or just squiggles?

Attempts At Cleverness

Like Manni’s attempt, economy of method was the tool employed by Philip Rusher, who also falls into our “misguided visionary” category. He proposed to save space, and thereby paper, by eliminating descenders, since only five letters in our alphabet—g j p q y—have them. But he made a serious tactical error; to demonstrate his new type he chose to reprint a popular novel, Samuel Johnson’s Rasselas, Prince of Abissinia (Banbury, 1804). Apart from the fact that it is an unremittingly dull story with little incident and a dim grasp of locale, most of the story is set in Egypt—and that word, with its three descending letters in an awkward huddle, pops up frequently.

Notice something missing…?

The type was later used by Rusher’s nephew in 1852. Rusher even obtained a patent for “various improvements and alterations in the form of printing types … so as to diminish the trouble and expense of printing, and to render it more uniform and beautiful.” But clearly they were anything but uniform and beautiful.

The letters g, y and p are found in an awkward huddle.

An early, somewhat tongue-in-cheek, study of legibility is James Millington’s Are We to Read Backwards? This book was published by the remarkable Leadenhall Press of London (1884). The press was run by Andrew W. Tuer, an antiquarian who also enjoyed the look of old books, so his typography is quite anachronistic for that time period.

However, there is a great printer’s jest in his frontispiece which shows how books look in a railway carriage as the reader is bounced & rattled along (The frontispiece is from Millington’s introduction to English as She is Spoke, published by Field & Tuer the year before—a French-Portuguese phrase book, translated into English with a French dictionary!).

A printer’s joke—the page on the left simulating the reading-on-the-train experience.

Several “improved” alphabets are shown. Plate 5 (as shown below) is boustrophedon type, which would save eye movement in reading, but caused brain strain as well as posed problems for typesetters when they had to fix an error. Plate 7 (with no ascenders or descenders, to save space), has an almost folkloric quality to it, suggesting lettering done by amateurs.

An attempt to reduce eye-movement resulted in more problems than it solved.

A typeface lacking ascenders & descenders creates a visual jumble.

Non-professional lettering is a common source for experimental alphabets. In the 1930′s the American artist Ben Shahn was documenting The Great Depression in the rural South for the Farm Security Administration. He adapted the primitive signs he’d photographed to create his own distinctive letter-forms, seen in posters and dust-jacket designs. These in turn have been digitized into the FF Folk typeface family by Maurizio Osti in 1995 (below right).

There is a problem with the typographic adaptations of quirky lettering, and that is each character is always going to look the same. When two or three “O”s appear in close proximity, they tend to become monotonous. An artist will vary letter-forms, not just to avoid predictability, but to make pairings work better together. Even without numerals, Granjon cut 138 sorts for his first Civilité type seen earlier in this article. FF Folk has two versions for each letter, and three weights to obviate the problem.

Ben Shahn dustjacket, inspired by Southern US folk signs, and a modern typeface based on Shahn’s lettering.

Unreadable Letters In Readable Sentences

But let’s go back to our riddle. The answer is, if you haven’t guessed already, the letters “e,” “n” and “r” in Hoyt Script.

Handwriting flourished—no pun intended—in the 19th century, before the perfection of a new gadget called the typewriter (1873). And people experimented with different nibs, including one called the stub-pen, whose effect was as blunt as it sounds. Simultaneously, a major change was underway in the production of typefaces. Having learned how to grow matrices from a cast character or piece of type (to pirate typefaces), the ingenious Americans soon discovered that instead of cutting steel punches, they could simply carve a character out of a piece of soft type-metal.

This created an electrotype matrix, taking hours out of the laborious process. Typeface production accelerated, and there would be a boom in the 1880′s for the introduction of new types. James West adapted these optimized methods of production. He worked for many founders in his career, including Miller & Richard (in his native Edinburgh), Caslon and Figgins (in London), and George Bruce (in New York). In the 1880′s he worked for the Cleveland typefoundry and cut many scripts with intricate connecting strokes for them, beginning with Carpenter Script, based on the handwriting of a “Mr. Carpenter” (who worked for Robert Hoe & Company, the press manufacturer).

Released in 1883, the letters of Hoyt Script are individually unreadable, but when brought together are lively and overflowing with personality.

This script was so popular that Cleveland induced West to cut more scripts, and Hoyt Script was patented in February, 1883. It’s seen here above in Cleveland’s 1883 specimen book, where as you perhaps can see, it’s recommended as “an excellent representation of stub-pen writing.” Individually the characters are completely unreadable, but en masse, they create a unique and lively typeface, overflowing with personality.

Ideal for selling ladies’ shoes, Aladdin’s lamps, or whatever you fancy.

Note: Granjon, Manni, Potter, Haüy & Rusher books are reproduced courtesy of the Robert Grabhorn Collection on the History of Printing & Development of the Book at San Francisco Public Library. All other images from the author himself.

Editor’s Note: A big thank you to our fabulous Typography editor, Alexander Charchar, for preparing this article.

(jvb) (il)

Respect Thy Typography

Espen Brunborg — Wed, 14 Mar 2012 02:00:35 +0000

Good typography shouldn’t have to rely on ornamental crutches to stand tall. Yet despite all the tools and knowledge available to us, we readily embrace a flourishing, decorative typography, with cheap tricks used in a misguided attempt to make it “pop”. This ancient art may rapidly be gaining popularity, but are we paying it the respect it deserves?

Take a snapshot of the visual culture that surrounds you—magazines, movie posters, packaging, websites—how much of it relies on typography? How much of the typography around you is actually well considered? Chances are you’ll find a handful of beautifully crafted typographical designs competing with an avalanche of visually “rich”, image-heavy creations. Typography is then relegated to the role of “necessary evil” in order to display text, or ill-considered typographic pieces, where the meaning of MS WordArt has been interpreted a smidgen too literally… Why?

Looking Back

It’s fair to say that the global webdesign community is experiencing a typographical renaissance. Revolutionary technologies like Typekit, Fontdeck, the introduction of the @font-face tag, and online licensing for professional typefaces are all encouraging type enthusiasts around the Web to transcend the shackles of common type. Furthermore, clever use of CSS and JavaScript are allowing us to mimic a range of typesetting techniques (though admittedly some basic typographical controls are still frustratingly infantile).

But with such power comes great responsibility. And even though modern tools give us the opportunity to do so many things, doing a great deal of these things isn’t always a recipe for beautiful design. Just because we have many options opening up to us doesn’t mean we need to employ every single one of them in the hope of developing a design that stands out—and most likely for all the wrong reasons.

That’s not to say typographic design can’t be ornamental, complex or even illustrative. But centuries of working with movable type has left us with principles on which to base our typography, and it’s our duty as designers to understand them (at least if we’re aiming to break them). A good place to start is to look at what those who came before us have done—even the briefest throwback into the annals of typography and design history will help.

Consider Milton Glaser’s “I love New York” logo from 1977, commissioned as part of a marketing campaign by the New York State Department of Commerce. Glaser, who did the work pro-bono, wisely avoided skylines, figures of people holding hands, or flowery ornaments by using only a simple heart shape to represent the key word of the mark: love. We all know the subsequent success of the logo, as it has been brandished on millions of white t-shirts, inspiring countless knock-offs since its inception.

And if the heart-symbol of Glaser’s work seems too pictorial in this context, how about Robert Indiana’s “Love” sculpture? Originally created for a Museum of Modern Art Christmas card in 1964, this iconic piece of type shuns imagery altogether, relying only on the power of letterforms (arguably based on Clarendon) to ignite our compassion.

Lovely examples of modern typographic icons.

Milton Glaser’s post-9/11 update of his own masterpiece.

Of course, this kind of admiration for type didn’t just start with 60’s advertising. Typography is a craft going back thousands of years—to the birth of writing, if you wished to go deep enough—and has evolved and developed a great deal since that time. Theories have been postulated and developed as to how to best communicate through letterforms, especially when an idea needs to be transmitted as easily as possible. As Bringhurst explains while introducing the first chapter of his timeless “The Elements of Typographic Style”: Typography exists to honor content.

Beatrice Warde’s well known essay “The Crystal Goblet” beautifully explains the role of the typographer and his or her type, and she reinforced this point during an address given in 1930 to the British Typographers Guild in London. Advocating the idea that type was not there to be admired, or even noticed, that it existed only with the purpose of communicating an idea, she proclaimed; “I have a book at home of which I have no visual recollection whatever as far as its typography goes; when I think of it, all I see is the Three Musketeers and their comrades swaggering up and down the streets of Paris.” I wonder how many us have the same consideration for content when we browse through MyFonts or Typekit in search of the perfect typeface.

One of the many great designers who echoed Warde’s ethos was Jan Tschichold. His most well-known work is found in the legacy he created during his time working for Penguin (1947-1949), refining and redesigning the former book covers and creating the rulebook for the Penguin covers that followed him.

Notice the absence of decorative elements in this series of Penguin covers by Tschichold.

Looking at these covers one will see that the focus is unequivocally on the communication of a book’s title and author, and the result is truly magnificent. The covers are not beautiful because of particular ornaments or images, or even the individual shapes of the letters, but for their clarity of message. It’s not by accident that a clarity of (and focus on) typography has stuck with Penguin until the present day, which is beautifully demonstrated by David Pearson’s designs for the “Great Ideas” series from 2004, 2005 and 2008.

Though the style may be different, the focus on typography still embodies the spirit of Tschichold.

Challenging The Rules

The approach advocated by modernist typographers is one of clarity and legibility. Scientific methods (let’s call it early “A/B testing”) were utilized in the quest to find the perfect typeface—not in terms of aesthetic, but rather efficiency for communicating—and rigid systems were developed to achieve ideal reading conditions. In the strictest sense, typographic beauty is not to be gained from the letters or ornaments themselves, but should come as a natural result from an “invisible” type that unselfishly honors the words and content.

However, movements of any kind invariably inspire counter-movements, and the modernist ethos was to be thoroughly challenged towards the end of the last century, most notably by David Carson (b. 1954), Peter Saville (b. 1955) and Neville Brody (b. 1957). While earlier designers sought to communicate the messages they were setting as clearly and cleanly as possible, these young contenders wished to push the boundaries of legibility and normality, so that the emotion and idea wasn’t delivered via what the words represented, but how the words were seen as objects separated from their meaning.

These three designers were to shape the face of contemporary typography with their groundbreaking work spanning magazines, newspapers, film titles (Carson and Brody) and record sleeves (Saville). They helped pioneer experimental typesetting in the 80′s and 90s’, throwing the modernist rulebook out the window, yet retaining the communicative authority for letters and words.

Nowadays it’s easy to argue that their use of type did indeed include a great deal of flourish and extras. But seen in the context of the post-modern era, it’s clear that this was not simply an attempt to “beautify” their work. On the contrary, the disrespect for clarity and to embrace “grunge” were design statements opposing the impersonal coldness of the modernist designers… they were adding emotion to the words they were communicating, which also reflected the cultural movement of the time.

Jan Tschichold might have turned in his grave at brash expressions such as these, but the power of typography seemed stronger than ever. Their work showed that there is an infinite number of ways that typography can be used to communicate a message.

Clockwise from top left: Saville’s cover for Hard-Fi: Once Upon a Time in the West, Carson’s High Priority spread for NY magazine, Nike ad by Neville Brody.

The conscious tenet arising from such examples is an appreciation, by the designer, of how typography can be emotionally valuable. Each of the above examples evoke something—whether heartfelt, or slightly adrenalin pumping, it can be concluded that this is often the role of illustrative typography: to move the heart, and not just yell at the mind.

From Movable Type To Type That Moves

Regardless of the word count, the typographic experience can be as emotional as any pictorial masterpiece. This notion is beautifully exemplified by the “Coming Together” campaign for FontAid by The Society of Typographic Aficionados (SOTA) in support of relief efforts following the 2010 disaster in Haiti. The project—a font consisting of hundreds of ampersands designed by contemporary typographers—showed that despite the common saying that “a picture speaks a thousand words”, sometimes all you need is a handful of letters… or indeed, just a single character.

The “Coming Together” typeface shows us the power of a single character.

Other, less sentimental examples of moving (literal as well as metaphorical) type are masterfully displayed on the blog of Trent Walton, a true magician in terms of utilizing modern technologies to add depth to his typography. When spelling out the title Workspace, a particularly illustrative typographic treatment conjures up images of your very own—or perhaps your dad’s very own—workspace, complete with holes in the wall for hanging up indispensable tools (“I really needed that magnetic stud finder”).

In another example, Unitasking, the “I” in the headline doubles as an illuminated “1” when it is interacted with, emphasizing the message of the article. Granted, neither example can be described as “pure” typography. But note how the extensive use of technology with typographic tricks can be used to illustrate the message, infusing it with added emotion, rather than for decorative purposes.

Movable, interactive typography with nostalgic undertones.

Laborious use of CSS trickery adds value to the message.

Stefan Sagmeister is another designer (actually, another legend) fascinated by the concept of emotional typography and how design can touch our fellow human beings, and he’s unafraid to use unconventional means of communication. For a 1999 AIGA lecture poster he literally carved all the copy into his own body using a razor blade (well, his studio mate did the carving) before photographing himself, the result being so disturbingly powerful that it’s difficult to look away.

But it’s not all gore, of course. As part of his “Things I have learned” series he created a type-only billboard for Experimenta Lisbon, spelling out his message in capital letters: “Complaining is silly. Either act or forget”. Simple enough, right? Not quite. Using no ink what so ever, Sagmeister and his team created a gigantic stencil and exposed huge sheets of newsprint to the scorching sun over a period of weeks.

The letters (covered by the stencil) would remain white as the newsprint yellowed, and by the time the billboard went up the statement was easily read by onlookers. The subsequent effect was, as you may have deduced by now, that the letters would slowly fade away as the previously non-exposed newsprint would yellow to the same color as the background. Thus the message to “act or forget” was emotionally strengthened with every passing day.

Sometimes typography can be effective without trying to be beautiful.

Using the sun’s ultraviolet rays to slowly fade away the message.

At this point we’ve come a long way from the clear, simple typography of Tschichold. I’m sure many of you are questioning whether the latter examples, in comparison, rely too much on visual tricks to get their messages across. Indeed, I opened this article by challenging the over-use of ornaments and decoration in order to enhance our typography, and yet aren’t Walton’s and Sagmeister’s work examples of just that? Not quite.

Despite heavy use of non-typographic elements, there are no unnecessary flourishes to be found, nor are there any signs of unrelated decoration (though, to be pedantic, Walton’s use of surface textures may be superfluous). In truth, both designers are adding value by choosing techniques and expressions that purposefully match the content and create an emotional frame in which to deliver the message, thus highlighting it’s impact.

Contemporary experimentalists like Walton and Sagmeister might contradict traditional typographic principles, yet they play an important role in the global, ongoing design conversation by constantly discovering new and unconventional means for typographic expression.

Spread The Word. Literally.

In all honesty, type is not just movable, it has the power to move—and it’s up to us to carry this legacy forward and into the digital frontier, that is inevitably our future. By learning from past examples of excellence, we can challenge the status quo of mediocre typography and misplaced stock photography, and start to push things forward. We don’t always need to do too much (well written copy is, after all, your very best friend), and we certainly don’t have to use all the tools in our drawer every time.

But we can continuously look for new ways to add value, as long as we make sure our typography doesn’t communicate anything other than the intended message. Sometimes that means heavy use of CSS, making creative use of sunshine, or experimenting with size and position. Other times—perhaps most times—it means keeping things simple, letting the words do the talking and letting the typography work itself gently into the background.

Remember, despite the plethora of typographical tools we now have at our immediate disposal, we’re the latest chapter of a long history of typographic craftsmanship—typographers painstakingly arranged letters by hand for centuries before the computer (or even phototypesetting) came along. We should honor the hard work that has been put in by those who came before us. We can do this by recognizing typography as an essential part of our work (be it for Web or print), learn about the principles (especially if you’re aiming to break them) and consider all the factors that make for great communication through letterforms.

If right now you are thinking “but my boss will never let me do what Sagmeister does!”—don’t sweat it, most projects don’t allow for typographic experimentation. But that doesn’t mean you can’t hone your skills—there’s plenty to be gained from taking pride in the small things, and making sure you get the details right. If your brief dictates uninspiring imagery, put your effort and pride into perfecting the accompanying typography. Is the line-length appropriate? What about font-size, line-height, and hierarchical contrast? Does the typeface echo the sentiments of the message? Maybe if you get all the small things right, the bigger things will come easier once that suitable project comes your way.

So roll up those sleeves, consider the meaning of the words you’re setting, and pay some respect to the centuries of evolution behind the typeface you’re using today, and just as importantly, the craft of typography as a means of expression. By all means use images, but just remember that you don’t always have to—typography can be just as meaningful by itself, even without the alluring magic of word-art.

(jvb) (il)

A Thank You to our fabulous Typography editor, Alexander Charchar, for preparing this article.

Japanese, A Beautifully Complex Writing System

Shoko Mugikura — Mon, 05 Mar 2012 15:56:20 +0000

As a Japanese person living in Europe, I’m sometimes asked: “Japanese is a difficult language, isn’t it?” Those asking are often surprised when my answer is a simple: “No, actually, it’s not.”

While it is true (at least to many Westerners) that Japanese is an exotic language, when compared to learning other European languages, it may seem harder because it has no relation to their own language. But from my own experiences of learning English and German (and also from seeing some European friends learning Japanese), I can say with confidence that learning spoken Japanese is, in fact, not so difficult. The grammar is in many ways simpler than most European languages. Take for example the fact that we don’t have cases, grammatical genders, nor articles. However, reading and writing in Japanese is… well, not so simple.

While discussing typography we most often focus on English language problems, which is only natural considering that the majority of design material is written in English. However, a lot can be gleamed by looking at how other languages are used as part of communication and design — it helps to lend context and a different point of view.

Japanese Scripts

Modern Japanese is written in a mixture of three basic scripts: Kanji — which are Chinese ideographic symbols — as well as Hiragana and Katakana — two phonetic alphabets (syllables). There are a few thousand Kanji characters, while Hiragana and Katakana have 46 each. Although there is a basic rule for when to use which script, there are many exceptions, and what’s worse is that words written in Kanji have often multiple pronunciations, depending on the context or conjunction. This is hard enough for native speaker to get right every time, so I almost feel sorry for those non-natives who are learning to read and write Japanese.

From top to bottom: Kanji is mainly used for the lexical elements: nouns, verb stems, adjective stems, and so forth; Hiragana has rounded letter shapes, which are mainly used for the grammatical elements of sentences such as particles, auxiliary verbs, and suffixes of nouns; Katakana has an angular letter shape, which is most often used for foreign words and also for the purpose of emphasis.

Some say that the “tragedy” started when Japan decided to “import” the Chinese writing system, inscribing it into their own language in the 3rd century.

Since Japanese is as different from Chinese as it is to any other language, simply using the Chinese writing system was not sufficient, and a more appropriate way of writing Japanese was sought out. Some Chinese characters began to be used not for their meaning, but purely for their phonetic value. So by the 9th century, Hiragana and Katakana scripts were derived from simplified Chinese characters that were used to write Japanese phonetically.

The story doesn’t end there. As if using three scripts isn’t enough, we write in both horizontal and vertical orientation.

Horizontal? Vertical? The Unique Case Of Japanese Typography

“Vertical or horizontal?” — when setting a piece of text in Japanese, this is a question that Japanese designers constantly need to ask themselves. Being able to use both vertical and horizontal writing orientations is something so normal for us native Japanese speakers that most of us won’t even stop to wonder why this is possible, or even when and how it was first introduced.

The identical piece of text set vertically (right) and horizontally (left). When it is set vertically it’s read from top to bottom, as the lines go from right to left; when it is set horizontally, it is read from left to right, like in European languages.

In general, these two writing orientations have a clear usage: vertical for something “Japanese”, “traditional”, “novels and other humanistic writings”; horizontal for “contemporary”, “business documents”, “scientific & foreign language related writings” and so on. When a main text is set horizontally, the binding is on the left-hand side, and pages progress to the right, like books in Latin scripts. Traditional books in vertical setting are the other way around, with the binding at the right hand side, and pages progressing to the left. So when you handle a Japanese book, don’t confuse the front with the back!

A typical page layout of a Japanese paperback novel using a vertical setting. Ogai Mori (1913), “Abe Ichizoku”, Shincyo-bunko.

Needless to say, traditional calligraphy is always done vertically. With their organic flow, characters are often connected and have different heights and widths — which makes it impossible to disconnect and align them horizontally. Calligraphy by Keiko Shimoda, 2011 (tsukushidesign.com)

Horizontal setting is preferred for scientific texts, mathematical texts and language related books, where words and phrases in foreign scripts and signs are often included, as they are more easily incorporated horizontally. The example (above) is a Japanese-English dictionary. (Pocket Comprehensive English-Japanese / Japanese-English Dictionary, 2000, Obunsha)

Where the efficient use of space is important — namely newspapers and magazines — both orientations are often combined. Although it may appear a bit chaotic, or even random to foreign eyes, these two directions are usually used in a systematic way as a means to indicate different text elements on a page. For instance, a main text is often set in a vertical setting, but headings and captions may be set in a horizontal setting.

A typical newspaper layout — the main text is vertical but headings, diagrams, tables, and captions are placed horizontally.

The same newspaper as above, but highlighting the vertical text (orange) and the horizontal text (blue). © The Nikkei (May 8th, 2009)

In a way, it’s comparable to “typographic variants” which are found in Latin typography — in Latin script text one may use bold, italic, or a different font to differentiate things such as pull quotes from the main text, whereas in Japanese we can do this by using a different orientation. Publications which accommodate non-linear or complex text (as opposed to linear text, such as novels) seem to benefit in particular from having these two orientations, which allow the layout to be highly flexible, and also to create strong visual impact.

The extreme cases of “space-efficiency-oriented typography” are informational-heavy pieces of text, such as diagrams and signage — also exploiting the two directional orientations. The Tokyo Metro map (Fig 10) is a good example of this — as you can see, both orientations are used accordingly, so that everything fits best within the limited space.

Tokyo Metro map

Tokyo Metro route map. The large type on the top is the station name which is placed horizontally. The name of the metroline may be horizontal, but the name of the stops are placed vertically.

It’s true that in many cases they look quite chaotic and sometimes even aesthetically questionable to eyes that are used to “orderly” design. But it’s easy to appreciate the visual impact and energy they create — they remind you that effective, appealing informational design does not always have to look “neat and tidy”.

Letters from my friends: when it comes to handwriting, orientation is up to a personal preference or simply one’s “mood”. But when you are writing a more official letter, or writing to somebody who is much older than you, it’s probably safer to opt for vertical orientation.

What’s Happening On Screen-Based Media?

Since the introduction of horizontal writing in the Japanese language, print-based media and signage have been employing both of these writing orientations effectively, and in ways that complement one another. But what’s been happening to screen-based media? With a few exceptions — such as word-processing machines made exclusively for the Japanese text output, or subtitles for film and TV screens, which tend to use either depending on the background image — horizontal orientation has been the dominant choice.

The prime example of this is the Web: horizontal orientation has been used almost exclusively. For the past 15 years, I have hardly come across a website that uses vertical setting. Mobile phone screens also use a horizontal orientation. I believe this may be due to the relations of hardware, operating systems and user interfaces that have become the norm, all of which have been designed to work with horizontal writing. It feels somewhat awkward to see vertical writing while all the other elements on the screen, such as the menu bar and UI elements, are horizontal.

Needless to say, the technical limitations (the support of a vertical setting by browsers is a fairly recent introduction) have largely contributed to this too. Perhaps underestimated, maybe the biggest factor for not using vertical setting for screen-based media could well be the mental association with horizontal orientation being used for something “modern” and “contemporary”.

The Nihon Keizai Newspaper website. Although the printed newspaper employs a vertical setting for the body texts, the web-version uses a horizontal setting.

So far, even with content as Japanese as a tea ceremony, a website will use a horizontal setting. (Accessed Jan. 20th, 2012)

Will Vertical Writing Orientation Die Out?

Will vertical writing orientation die out from screen-based media? Or can it make a comeback, when the technological environment allows us to use vertical settings more easily? Many e-book apps on smart phones and tablets have already started using vertical settings. With its intuitive way of navigating the screen along with the lack of external input devices (and apps being able to have more flexible/responsive layout), vertical writing seems to be incorporated much more comfortably.

I’ve spent some time reading these e-books — and pleasantly surprised at how easy they are to read. Apart from the fact that you need to scroll the screen horizontally, it’s just as comfortable as reading “normal” or horizontally set text. In fact, it’s even better for some types of publications like novels, or Manga. Our association towards this type of content when compared to the vertical setting is pretty strong; it would somehow feel “wrong” to see them set horizontally.

Amazon’s Kindle has yet to support the Japanese language, but apparently they’re on their way to doing so. If they seriously want to attract Japanese readers, it would be unthinkable for them not to support vertical setting.

Soseki Natsume’s “Sanshiro” (1908) e-book on iPhone.

Kotobuki Shiriagari’s “OSHIGOTO” (2010) e-book on iPhone.

The situation also seems to be slowly changing on the Web — some interesting attempts have been made in order to familiarize ourselves with Web pages that have vertical setting. One such example is Taketori, which works just like Google translate — you can type in the URL of a Web page you wish to see in vertical setting, and Taketori does it for you. There’s also a piece of software called Kagetaka, which can switch any Web text into a vertical orientation.

Personally, I’m not too sure how well vertical setting will be supported by the users of normal Web pages, unless the way we navigate Web pages is re-developed, or a new type of browser with more innovative UI appears. Even though I complained earlier about the difficulty of the Japanese writing system, I do appreciate its diversity and flexibility, while making use of its three scripts and two orientations allows us to express subtle nuances of content — and we have been benefiting from that for decades.

I thought it would be a shame if we lose these methods of textual articulation in an age of screen-based media. But what has been happening for the last couple of years on touch-screen mobile devices (as well as the Web) can reassure us that both writing orientations may happily co-exist and collaborate on screen in the future, just as they have done off-screen for the last hundred years.

Feel free to share your thoughts in the comments section below.

(jvb) (il)

New High-Quality Free Fonts

Smashing Editorial — Mon, 09 Jan 2012 14:32:27 +0000

Every now and then, we look around, select fresh free high-quality fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually time you should be investing in your projects. We search for them and find them so that you don’t have to.

In this selection, we’re pleased to present Homestead, Bree Serif, Levanderia, Valencia, Nomed Font, Carton and other quality fonts. Please note that while most fonts are available for commercial projects, some are for personal use only and are clearly marked as such in their descriptions. Also, please read the licensing agreements carefully before using the fonts; they may change from time to time.

Free Fonts

Homestead
Homestead is a very distinctive Slab Serif typeface that leaves a lasting impression with its geometric forms and a modern, progressive look. The family is available in 6 weights: Regular, Inline Display, One, Two and Three. Released by the Lost Type foundry with the “name-your-price” pricing scheme. Homestead can be used freely for any personal or commercial use.

Bree Serif Regular
This typeface is the serif cousin of the playful, charming and versatile type family Bree which was designed by Veronika Burian and José Scaglione back in 2008. Actually, Bree is also the typeface used in the Smashing Cartoons. An italic font weight of Bree Serif should be available very soon. Released under the liberal OFL license (via Typografie.info).

Lavanderia
Lavanderia is a script font based on lettering found on Laundromat windows of San Francisco’s Mission District. It features numerous OpenType features such as swashes, titling alternates, figures, stylistic alternates, ligatures. It is available in three weights, with Uppercase, Lowercase, Numerals and Punctuation sets. Designed by the talented type designer James T. Edmondson and released by the Lost Type Co-Op foundry. Free for personal and commercial use.

RBNo2
This new gothic sans serif font was inspired by the late 19th century industrial fonts that contained german roots regarding straightness and geometry. Combined with other sans serifs, slab serifs and serif fonts, it catches the eye when used in headlines and short copy texts. Alternate versions turn the font into a perfect partner for modern, technical and contemporary impressions as well as high-quality, luxury and timeless environments. Free to use in commercial and non-commercial projects. Designed by Rene Bieder.

Cassannet
Cassannet is a geometrical art deco typeface available in Regular, Bold and Outline weights, based on lettering seen on Cassandre posters. This typeface contains ligatures, capitals, numbers, small capitals and also titling alternates. You can pay a random amount of money or alternatively send out a tweet or a Facebook post to download the fonts for free.

Valencia
Valencia is a condensed, art-deco inspired typeface that includes five weights, ranging from hairline to black, with matching obliques for each weight. The typeface has a nice corporate vintage look which makes it a great fit for large headlines and prints as well as any collateral or stationery. Valencia’s distinctive appearance stems from its low horizontal crossbars and its full-circle curves. Released by the Lost-Type Co-Op foundry with the “name-your-price” pricing scheme and hence freely available for personal and commercial use.

Jura
Jura is an elegant serif typeface with narrow proportions and distinguishing details. The rounded, wedge-shaped serifs offer a contemporary feel and also achieve to maintain legibility even with its range of small sizes. This typeface is available in four weights: Regular, Italic, Bold and Bold Italic and is available for free download and use.

Nomed Font
Nomed Font is a free typeface that can help you achieve a modern and sophisticated look in your designs. The triangular geometric shapes may be a bit hard to read but that’s exactly the highlight of this particular style, and it makes the typography unique and original.

Carton
This typeface, designed by Nick McCosker, is a strong yet sensitive slab-serif inspired by letterpress. Its sturdy appearance makes it a perfect fit for posters, headings and taglines, in both classic and contemporary contexts. Released by the Lost Type Co-Op under the “name-your-price” pricing scheme.

Novecento (Registration on MyFonts is required!)
This typeface is an uppercase-only font family with some pretty impressive geometric forms that have been inspired by historical European typographic tendencies. It was designed to be used mostly for headlines, visual identities or short sentences — both in big and small sizes. The family contains 471 glyphs and 32 font weights whereas six of the font weights of the wide-version (Light, Book, Normal, Medium, Demibold and Bold) are available for free download and use.

Fjord
Fjord is serif typeface that has specifically been designed for book publications. It is intended to be used in long texts and in relatively small print size. Fjord features sturdy construction, prominent serifs, low-contrast modulation and long elegant ascenders as well as descenders relative to the ‘x’ height. Fjord performs well in sizes starting from 12px and higher; nevertheless, it can also be a distinctive font choice for larger text headlines and in corporate design. This serif typeface include Cyrillic and Greek characters and is available at Google Web Fonts. It has been released under the SIL Open Font License, 1.1. Feel free to take a look at the designer’s free font Armata as well.

Hero
Hero is a crisp geometrical typeface applicable for any type of use: print, Web, logos, posters, booklets. This typeface contains 162 characters and is free for personal and commercial use. Available in the OpenType format for PC and Mac.

Otama e.p.
Here’s a quite confident typeface to use for expensive and fashionable designs. Strong steams and thin serifs shows similarities to the well-known traditional Didot typeface. This typeface is free for personal and commercial use.

Ribbon
This typeface is a geometric display face which includes OpenType features for an alternate alphabet. The family contains sets for Uppercase, Numerals and Punctuation. Released by the Lost Type Co-Op under the “name-your-price” pricing scheme and designed by Dan Gneiding. If you decide to buy the font for $30 or more, you will get a beautiful Ribbon Specimen Book as well.

Movavi
Movavi is a sans serif font that is available only in the font weights Black and Black Italic. Obviously, the typeface wouldn’t work for body copy, but it might work nicely in short headings or “groovy” art works. Available for free download and use on PC and Mac.

Satellite
Satellite is a geometric sans serif font designed by Matt Yow. The typeface can be a great fit for short headlines, short body copy or slogans. Released under the SIL Open Font License.

Open Sans
Open Sans is a very clean font family by Ascender Fonts. It includes ten styles (Light, Regular, Italic, Semibold, Bold, Bold Italic, Extrabold) and each one consists of more than 900 glyphs: Latin, Greek, Cyrillic, many of the regular diacrytic letters as well as “hanging” numbers. Also available at Google Web Fonts and released under the Apache License version 2.

Mosaic Leaf
The glyphs of this expressive typeface are built out of leaves of different sizes. Mosaic Leaf also contains numbers, punctuation and currency symbols. The .zip-package contains PDF, OTF and TTF files; the fonts support Western and Central European encoding, and also Baltic, Nordic and Turkish. The typeface is free to use in commercial and non-commercial projects. Designed and prepared by Lukasz Kulakowski and Zbyszek Czapnik.

Amaranth
Amaranth is a sans serif font family of four basic styles (regular, italic, bold, bold italic) with individually shaped letter forms that makes typeface more playful. Suitable for both Web and print, longer texts and headings. Available at Google Web Fonts and licensed under the SIT OpenType License. Image credit and source: dersven.

Siruca Pictograms
A pictogram open source font made as a part of Siruca signage system designed by Fabrizio Schiavi. The font contains many picograms related to sport, signage, home, social meetings, free time activities and business.

Erler Dingbats
For the first time in the entire history of Unicode standard, the full encoding range for dingbats is now covered by a complete, contemporary quality font. FF Dingbats 2.0 features more than 800 glyphs and is mainly a tool for professional designers and has been created for everyday communication purposes. It includes a wide range of popular symbols and pictograms such as arrows, pens, phones, stars, crosses and checkmarks, plus three sets of cameo figures on round backgrounds. Free of charge. (via fontblog)

Further Free Fonts

SD Sansimillia
SD Sansimillia is a playful, yet elegant typeface suitable for many different applications. Originally cut for a local advertising brand, SD Sansimillia is inspired by the Antenna Family built by Cyrus Highsmith in 2007 as well as Erik Spiekermann’s FF Din Family cut in 1994. It is issued in regular, bold and black weights.

Mimic Roman
Mimic Roman is a modern sans serif face with evenly balanced strokes and a counter on a slight angle, giving it a 1950s retro look.

Roboto
Roboto Family is a linear sans serif font, available in 8 different styles of which each includes more than 900 glyphs — Greek and Cyrillic, too. This font was designed by Google for Andorid and is licensed under the Google Android License.

Mate
An elegant serif font designed by Eduardo Tunni. This typeface was primarily designed to be used in longer body copies in printed material. It is simple in structure and has sharp as well as generous counter-shapes which create a medium texture that calls for page color. It can also be used as display typography and is available at Google Web Fonts.

Last Click

Shape Type
If you are passionate about typography and have fun experimenting with glyphs, then you will certainly like the rather unusual type-design game created by the interaction designer Mark MacKay. The idea of this JavaScript-based letter-shaping game is simple: you get 10 modified letters from various classic typefaces, and you have to try to make them right by dragging curves along their axes. It’s an engaging way to explore what makes or breaks a glyph.

Font-Bot Project
It is time for your favorite font to stand its ground. The idea is to build robots out of a type face, showcase them and hope others put together a potential opponent. Once there are two font-bots ready to compete against each other, only thing left would be to “let the battle begin!” Participating is not hard, the rules are clear: all robots must be built of type alone (letters A to Z). Let’s see if your font has what it takes to defend its corner. Fight!

Further Resources

Lost Type Co-Op
The Lost Type Co-Op is a Pay-What-You-Want Type foundry. Users have the opportunity to pay whatever they like for a font; you can type in ‘$0′ for a free download. 100% of all funds from these sales go directly to the designers of the fonts themselves, respectively.
The League of Moveable Type
The open-source type movement for bringing high-quality tyepfaces to the Web. The creators of the project keep releasing quality fonts every now and then so be sure to stay tuned!
Google Web Fonts
A growing directory of hundreds of free, open-source fonts optimized for the Web. Google also provides ready-to-use snippets for integrating the fonts to your website.
Typography and Free Fonts on Smashing Magazine
An overview of typography-related articles and free font round-ups on Smashing Magazine.

We sincerely appreciate the time and effort of all type designers featured in this post. Please keep in mind that type design is a time-consuming craft which truly deserves reward and support. Please consider supporting type designers who create and release amazing typefaces for all of us to use.

(vf) (il)

Smashing Magazine » Typography

How To Choose The Right Face For A Beautiful Body

Features Of A Good Text Typeface

1. Stroke Contrast

2. Optical Sizes

3. x-Height

4. The Spaces Inside of Letters

5. Kerning

6. Consistent Rhythm Along the Line

7. Caveat: Signage Faces

Additional Elements To Consider

1. OpenType Features

2. Hinting

Recommended Typefaces For Readability

Conclusion

Other Resources

1. Websites

2. Books

The Font Wars: A Story On Rivalry Between Type Foundries

Some More Face-Offs

Memphis and Stymie

Janco and Banco

Starling Burgess vs. Stanley Morison

Futura and Twentieth Century

Comic Sans and Chalkboard

Helvetica and Arial

Does It Really Matter?

Applying Macrotypography For A More Readable Web Page

The Importance Of Readability

Techniques For Improving Readability

Command Your Margins

In Practice

Choose Readable Fonts

In Practice

Keep It Measured

In Practice

Set An Appropriate Line Height

In Practice

Find The Proper Paragraph Styles

In Practice

Balance The Text’s Contrast

In Practice

The Result

Excellent Reading Experiences On The Web

Refining Towards The Ideal

A Closer Look At Font Rendering

Rendering Strategies

Rasterization

Black And White Rendering

Grayscale Rendering

Subpixel Rendering

Current Implementations

Windows

Windows: TrueType Fonts

Windows: PostScript Fonts

Windows: Unhinted Fonts

Mac OS X

iOS

Conclusions

Practical Application: Improving Display Font Rendering

Future Developments

Other Resources

When Typography Speaks Louder Than Words

Manipulating Feelings and Reactions

Making The Most Of Visual Language

The Power Of Typography Cannot Be Underestimated

Further Resources

Drop Caps: Historical Use And Current Best Practices With CSS

Initial Caps In Manuscripts

Initial Caps In Printed Books

Drop Caps On The Web

Method 1: Image Replacement

Method 2: Letter Over a Background Image

Method 3: Span Class, No Image

Method 4: First-Child:First-Letter

Testing for Accessibility: VoiceOver

Method 4 Revisited: First-Child:First-Letter—Placement Based on Both Firefox and Windows 7 IE8

Letter Shapes And Letterspacing

Letterspacing and the “Span Class, No Image” Method

The Best Method: Merging Tradition And Technology