Good typography has always been a defining aspect of effective Web design, and this holds true especially for websites in which the emphasis is on presenting a large amount of content — specifically, articles, news and stories. Whether for a magazine or international newspaper, the designer of any website that distributes a lot of content has always had to consider typographic details as seriously and thoroughly as a print designer would.

In 2009, we conducted a survey of then current typographic practices. Since then, responsive design techniques have clearly gained momentum and established their place in the landscape of CSS layout. With the advent of mobile, new modes of browsing websites and reading text have emerged.

Online publications have had to reevaluate how their content is presented on mobile devices. Web typography is as rich, versatile and accessible as ever before. Yet new opportunities introduce new complexity; and with new implementation challenges, we are all spurred to reconsider our practices.

Now, three years later, we’ve reviewed the original study and explored how Web typography has changed over these years. We spent countless hours between February and April of this year collecting new data and exploring common developments and trends in Web typography.

How Did We Conduct The Study?

We have compiled relevant data from over 50 well-respected websites to address these questions. For this study, we selected a wide variety of international newspapers, magazines and blogs, all of whose typographic choices should have been carefully and thoroughly weighed. We chose publications and organizations that have a very large readership (such as The Boston Globe and The Financial Times) as well as specialized magazines with smaller yet often more demanding readerships (such as A List Apart and UX Booth).

These websites focus primarily on text-based content rather than on generic environments such as Instapaper and Readability. As such, they need to be highly legible in order to ensure that users continue visiting and reading on their websites. Because readability of content is (or rather should be) the main design goal of these publications, the techniques they follow could be considered good practices. However, the results presented in this study should be taken with a grain of salt.

Issues We Were Interested In

The questions asked in our first study nearly four year ago remain relevant but need to be complemented by questions about the challenges of mobile devices. How widely has responsive design been adopted by publications, if at all? Has there been any change in the typographic choices of big and small publications? How many weights of a large font family should we deliver to mobile devices? How large should the font size of body copy be? How should the font size change on a responsive website? Optimizing readability could require changing the font’s style, size and spacing according to the viewport’s width and height.

The second article in this series will address the growing diversity of eBook readers and mobile apps whose purpose is to give users a pleasant, improved or enhanced reading experience — from desktop readers down to smartphone readers. We were curious about the specifics of design and typographic choices that make reading articles in these applications more pleasing than reading on the original websites.

Note: For the sake of continuity, we have stayed close to the format of the original study from 2009. This article is meant to update the data, and hopefully detect new trends and reach new conclusions.

Typography In Online Publications

After carefully analyzing the style sheets in the publications in this study, we compiled a comprehensive spreadsheet of typographic points and collected the relevant data. You can view a spreadsheet of the raw data, which contains more data than was pertinent to this article.

Not limiting ourselves to the questions in the original study, we will broach issues that have arisen since then as a result of responsive design techniques, and we’ll examine whether such techniques are being applied at all. This led us to the following questions:

1. How popular are serif and sans-serif typefaces in body copy and headlines?
2. Which fonts are used most frequently?
3. What is the average font size (on narrow, mid-sized and large screens)?
4. What is the average ratio of the font sizes of headlines to the font sizes of body copy?
5. What is the average line height of body copy?
6. What is the average ratio of line height to font size in body copy?
7. What is the average ratio of line height to line length in body copy?
8. What is the average amount of space between paragraphs?
9. What is the average ratio of paragraph spacing to line height in body copy?
10. How are links styled?
11. How many characters per line are common in body copy?
12. How often are links underlined?
13. How often are font fallbacks used?
14. How often are responsive design techniques implemented?
15. Which ratios of display sizes are discernible?
16. How do websites deal with the performance of Web fonts?

To answer these questions, we collected more than 40 data points, all of which can be found in the aforementioned spreadsheet. We can extract several rules of thumb from this data. We wouldn’t recommend acting on the data from this study blindly; the statistical data, however, will no doubt yield useful insights.

Popular Serif And Sans-Serif Fonts

“Which typeface to use?” Obviously, this is one of the most important questions a designer has to answer when considering Web typography. The typeface will set the tone for the entire website, and a poor choice could send the wrong message or thwart the intended atmosphere. The argument for either serif or sans-serif hasn’t been won yet. Interestingly, looking back to the results of the 2009 study, sans-serif typefaces seemed to be more popular in body copy and headlines. The last four years have seen a tiny shift away from that.

Serif and sans-serif are almost equally popular in headlines.

The motivations of designers likely haven’t changed much. Serif fonts apparently stand out in headlines, but arguments have been made for serifs’ ability to guide the reader and for its readable structure in body copy as well. Still, contrasting a serif body with a sans-serif headline or vice versa can improve the overall visual appeal and readability of a website.

The data suggests that serifs have gained in popularity in recent years, leading almost to a reversal in common usage in the last four years, at least where body copy is concerned.

Serifs have strongly gained in popularity in body copy.

• Half of the websites analyzed use serifs in their headlines, the other half sans-serifs. The two most popular typefaces are Georgia — used on such websites as The Guardian and the Financial Times — and Arial — found on Zeit.de and the BBC’s website.
• Only 37% use a sans-serif typeface for body copy.
• The most popular serif typefaces for headlines are Georgia (14%) and Chaparral Pro (6%).
• The most popular serif typefaces for body copy are Georgia (20%) and Chaparral Pro (4%).
• The most popular sans-serif typefaces for headlines are Arial (10%) and Freight Sans Pro (4%).
• The most popular sans-serif typefaces for body copy are Arial (14%) and Helvetica (6%).
• However, 66% of headline typefaces and 39% of body copy typefaces are found in only one instance.

So, in summary we can state that nearly two thirds of the websites analyzed use serifs for body copy, and Georgia and Arial are still the most common primary typefaces. However, our most surprising find is that a majority of websites use non-standard fonts as their primary typeface — 39% of body copy and 66% of headlines. This development is truly interesting, because it shows that typography has become an important element in establishing brand identity and character. These numbers indicate growing typographic diversity on the Web — which we should probably expect anyway.

A majority of websites use non-standard fonts as their primary typeface.

The growth of “bulletproof” font-delivery services such as Typekit and Fontdeck likely explains the increasing variety of primary typefaces. Fallback typefaces are predominantly standard core Web fonts. Times, Times New Roman, Georgia, Helvetica and Arial are most often used in CSS font stacks. Mobile platform fonts such as Droid Sans, Palatino and Cambria are almost never used.

Ironically, a consequence of the resurgence in serif typefaces is that Times and Times New Roman, which had almost been written off as too old-fashioned in the last study, have made kind of a comeback as the two most popular fallbacks. Roughly 11% of headline and body copy fallbacks have Times, and another 11% have Times New Roman.

There is much literature on typography in Web design, most of which discusses the applications of serif or sans-serif typefaces. Increasingly, the argument for better readability combined with artistic value supports a judicious use of both styles. Douglas Bonneville discusses the benefits and best practices of combining serifs and sans-serifs, and Simon Pascal Klein discusses the intricacies of font families and makes further typographic considerations in his article “Achieving Good Legibility and Readability on the Web.”

The Great Discontent combines both the Stratum and Meta Serif Web Pro fonts to generate a dynamic yet respectable feel.

Compared to the previous study’s results, Verdana and Lucida Grande are the big losers. Verdana is used only twice as a primary font, and neither is used more than once as a fallback font. Chaparral Pro and Helvetica have risen in prominence. The increasing diversity and individuality in design is due to both the increased use of font foundries and the wider range of Web fonts.

One discovery of the previous study, that “alternative” fonts are more common among headline typefaces, is still proving accurate. No doubt, the general belief that experimentation is best applied to small details still stands. The look and feel of a page can be adjusted just enough by changes to the font family of headings, rather than by drastic changes to body copy. However, the overall use of alternative fonts for body copy has increased dramatically, creating a much richer and more diverse typographic landscape on the Web.

Light Or Dark Background?

The previous study concluded that a large majority of websites favored dark on light color schemes. Not much has changed, although the websites surveyed this time are more varied in their light background tones.

An Event Apart demonstrates the readability of a subdued color scheme.

Several websites have a less aggressive contrast of an off-white or even beige background with dark-gray text. The off-white is often chosen to lower contrast. The designers in this case have clearly opted for a comfortable, lengthy reading experience.

Black text on a white background is a common pattern for body copy. The contrast is easy on the eyes and is, at least among these websites, the status quo.

Average Font Size For Headlines

Generally, the font size of headlines is chosen according to the typeface of the body copy. Still, it’s interesting to see what common ranges designers prefer for body copy and headlines. In this study, the headlines for large display sizes average at roughly 38 pixels. Of course, we made sure that the text always displayed at the actual size, without any zoom.

The most popular sizes range from 20 to 32 pixels.

You can easily notice the increase in font size since the last study. Not only did the average increase by more than 10 pixels (!), but the range of headline sizes starts further up, at 20 pixels, and tops out at an impressive 212 pixels in the case of The Great Discontent. This publication is an exception, with its magazine-like headlines and smaller font sizes for headings.

We’re going further up. The Great Discontent shows an impressive 212 pixels font size.

Average Font Size For Body Copy

With readability as the determining criterion, the average pixel size of body copy has increased in four years as well. Back then, most of the websites were between 12 and 14 pixels in font size. Now, 14 pixels is as popular as 16 pixels; each is used on 13 websites.

14 pixels is also The Verge’s font size. While some websites offset the first paragraph of an article with a larger font size, many, like The Verge, follow a uniform size.

Ratio Of Headline to Body Font Size

We’ve updated our rule of thumb based on the current average ratio between headline and body font size. Don’t follow this rule blindly; rather, just keep it in mind as you make decisions in your projects.

Headline ÷ Body Copy = 2.5

According to our study, on average, the ratio between the headline and the body copy is around 2.5. The traditional scale (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72) and the Fibonacci sequence (16, 24, 40, 64, 104) are still relevant, of course, and represent a more naturalistic approach. The golden ratio (1.618) might also yield an organic effect, too.

Optimal Line Height For Body Copy

Leading (or line-height in CSS) will always depend on your font size and measure (or line length). But in general, the longer the measure, the longer the leading should be. Therefore, presenting a chart of the most popular leading values in pixel units wouldn’t make sense here. More appropriate for you would be to use a relative unit, such as an em or percentage value, that determines the ratio between leading and measure and between leading and font size.

This latest study reveals the following:

• line height (pixels) ÷ body copy font size (pixels) = 1.46
  Classic typography books recommend 1.5, a value backed up by this and our last study. Very few websites use anything less than that. The number of websites that go above 1.48 decreases as you get further from this value.
• line length (pixels) ÷ line height (pixels) = 24.9
  The average line length (570 pixels, excluding margins and padding) has grown comparatively less than font size and line height have since 2009 (the latter averaging 22.9 pixels). The average line lengthened by approximatively 5% (from 538,64 pixels in 2009), while the average line height has increased from 12 pixels in 2009 to 13 pixels in 2013.
• space between paragraphs (pixels) ÷ line height (pixels) = 1.39
  In the first study, it turned out that paragraph spacing (i.e. the space between the last line of one paragraph and the first line of the next) rarely equaled the leading (which would be the main characteristic of a perfect vertical rhythm). According to our results, paragraph spacing is around 1.39 × the paragraph leading. Paragraphs are more clearly delineated with this increased ratio, thus increasing readability.

Multiplying the value of your body’s font size by 1.46 would give you the optimal line height, which you could then adapt to your font style. Multiplying this new value by 24.9 should give you the optimal line length. Note that the layout would also need gutters, margins and padding to let the body copy breathe.

Characters Per Line

As explained by Robert Bringhurst, the classic rules of Web typography dictate that the optimal number of characters per line is 55 to 75. Our data shows that at their actual size (i.e. with no zoom and at the default font size), most websites average 83.9 characters per line at a widescreen resolution (in our case, a browser width of 1100 pixels).

While this average fluctuates quite significantly when the browser is at various other widths — between 83 and 86 characters per line at display widths of 700, 950 and 1600 pixels — only in smaller views of 500 pixels this average comes close to the classic rule. At that width, the average lies around 77 characters per line.

This is most likely the result of an attempt among designers to balance the font size with the amount of text displayed on narrow screens. With more characters displayed per line, the font size would have to become small, making the reading experience a bit more difficult on the eyes.

The highest number is, of course, much higher, but in general most designers stay in the range of 75 to 90 characters. In the most extreme cases, SB Nation has 55 characters per line, and Polygon averages 118 for the introductory paragraph. A more exact average could be derived by averaging several lines. But such an in-depth analysis probably would not vary greatly from the average that we calculated here. Still, the discrepancy between the number of characters at different widths is peculiar.

Polygon displays more characters per line in the introductory paragraph than in the rest of the article. However, the font size of that paragraph is larger as well.

Web Typography And Responsive Design

A burning issue we wanted to explore was the impact of of responsive design in Web typography today. The results were surprising: 22 out of 52 (i.e. 42%) of the websites we analyzed show (minor or major) changes when the browser size changes. Considering that responsive design has been around for two years, that number is quite impressive. We calculated the number of characters per line, the body font size and the headline font size at five browser widths (and experimented with the height as well): 500, 700, 950, 1100 and 1600 pixels. The font sizes for those three metrics do not differ greatly across the screen sizes — except at the 500-pixel view.

Unexpected, though, were the visual changes that occurred as we resized the browser. Changes in layout, image scaling, content and font size were evident to varying degrees on 22 websites. The changes are as minimal as images being scaled down to suit the display width. In some cases, however, the websites display other minor and expected changes. At the 500-pixel view, for example, the menu is often replaced by an icon; design components are moved from a multi-column layout to a single column; and both images and fonts are scaled.

No sign of responsive design was evident on 30 websites, including major publications such as The Financial Times and The Economist. At least some, if not all, of these websites seem to opt for a separate mobile website or application. The Financial Times immediately invites mobile visitors to use its FT app. At the moment, large online publications seem to prefer to invest in an app than in responsive design. If this trend continues, then the question becomes, how much will users be annoyed by being prompted to download an app for every single publication they’re interested in.

Despite this, we were happy to find that the layouts of the large majority of websites do not break when being zoomed in.

Some Numbers on the Implementation of Responsive Design

42% of websites implement responsive design changes, including for layout, image scale, content and font size.

At a display width of 500 pixels:

• Average line height: 28 pixels
• Average font size of body: 15 pixels
• Average number of characters per line: 77

At a display width of 700 pixels:

• Average font size of headlines: 36 pixels
• Average font size of body: 15.6 pixels
• Average number of characters per line: 82.7

At a display width of 950 pixels:

• Average font size of headlines: 37.9 pixels
• Average font size of body: 16.1 pixels
• Average number of characters per line: 84.8

At a display width of 1600 pixels:

• Average font size of headlines: 40.7 pixels
• Average font size of body: 16.2 pixels
• Average number of characters per line: 86.8

These averages might be somewhat skewed because of the mixture of responsive and non-responsive websites. But they show how little the body font size and characters per line change over varying widths. The only exception is the 500-pixel width, which have a lower number of characters per line.

Performance Considerations

While embedded fonts are slowly becoming a de facto standard in Web design, they also introduce overhead in performance because, well, they have to be loaded. Chris Coyier recently discussed the idea of loading Web fonts only on large screens to avoid the performance hit. You could also load Web fonts into AppCache or LocalStorage first and show them on subsequent page loads.

Moreover, you could use Google’s WebFont Loader to ensure that the content is displayed in fallback fonts even before the Web fonts have loaded, and then switch to the Web fonts once they have completely loaded (this is what we’re implementing in this very moment).

Our study shows that Web fonts are indeed a heavy bottleneck in performance, with 5.7 font files being loaded on average, totalling an average of 133.5 KB of extra bandwidth. In cases such as a page being loaded on a slow mobile connection, the user would initially see no text other than the underlining of links (apparently due to the use of the border-bottom property). Only once the fonts have loaded would the text be visible — and even then, elements would appear one by one (headings, then subheadings, then body copy). We can avoid this suboptimal experience by properly adjusting the CSS font stack, as Richard Rutter explains in his talk “Responsive Web Fonts” (slidedeck).

Other Findings

• 45% of websites underline the links in body copy. The others do so only on hover or not at all.
• 71% of websites highlight links with color. The rest do not or only on hover.
• 99% of websites left-align text.
• No website uses hyphenation.
• 84% of websites use the same fonts in the print and standard style sheets.
• The loading weight of home pages averages around 1.346 MB. Article pages are marginally less, at around 1.146 MB.
• The websites average 119 HTTP requests!

Conclusion

This study has revealed a set of common practices in Web typography. These results should not be interpreted as law. They should not be interpreted as “best” practices; rather, just as rough guidelines that we encountered in current Web design.

For example, the performance hit introduced by Web fonts and the (huge) number of HTTP requests should be reduced as far as it’s possible, while the content-out approach in responsive design would dictate how the font size would need to adjust depending on the settings in which it’s used. These findings are no doubt just a snapshot of current trends and may very well be outdated in a year’s time.

• Serif fonts are more popular than sans-serifs for both headlines and body copy. There is, however, a trend to mix sans-serifs and serifs to contrasting effect.
• The most common fonts for headlines are Georgia, Arial and Chaparral Pro. But the majority of websites are individualized and use less common fonts.
• The most common fonts for body copy are Georgia, Arial and Helvetica. But, again, the majority of websites are individualized and use less common fonts.
• The most popular font size for headlines is between 29 and 32 pixels.
• The most popular font size for body copy is between 14 and 16 pixels.
• headline font size ÷ body copy font size = 2.4
• line height (pixels) ÷ body copy font size (pixels) = 1.47
• line length (pixels) ÷ line height (pixels) = 24.8
• space between paragraphs (pixels) ÷ line height (pixels) = 1.43
• The optimal number of characters per line is between 55 and 75, but 75 to 90 is more popular.
• Body text is left-aligned. Hyphenation is not used at line endings. And links are underlined and/or highlighted with bold or color, sometimes only on hover.
• Mobile devices are mostly adapted to via responsive design, although some publications opt for a dedicated app.

The decision of whether to modify any typographic element always lies with the designer. Most of the results shown in these websites are likely the outcome of much trial and error. When designing a new website, you might want to stay close to these parameters, but with adjustments to suit your layout. Feel free to review the study’s spreadsheet for the raw data.

As we mentioned at the beginning, the second article in this series will deal with the intricacies of eBook readers and mobile apps. We don’t necessarily expect very different results. However, apps do offer more interactivity to the user. It will be interesting to see how much developers take advantage of the range of possibilities in mobile apps. Because there is not yet an inordinate number of readers on the market, we’ll accumulate data on as many readers as possible.

More Studies On Smashing Magazine?

Interested in more studies? Let us know what you’re interested in, and we’ll see what we can do!

What kind of studies would you like to see on Smashing Magazine?

(al)

© Jan Constantin for Smashing Magazine, 2013.

In my previous article on Smashing Magazine (“Understanding the Difference Between Typography and Lettering”), I wrote about how understanding type terminology can help us better appreciate the arts of typography and lettering. This article again deals with terminology, probably more specifically than most designers are used to, and the title gets to the heart of what I’m communicating in this article.

Everyone knows their serifs and sans, slabs and scripts, but most classifications go much deeper than that. Type classification, while helpful, is often convoluted, confusing and even controversial. This article, distilling some of the complexities into a more understandable format, lands somewhere in the middle between the basics and genuine type nerdery — the perfect level for a practicing designer.

Why Classify Type?

There’s a certain intellectual delight in knowledge, particularly knowledge about one’s field of work and study. More importantly, perhaps, there is a way in which seemingly impractical knowledge of one’s profession lends more credence to the designer. That being said, what you’ll read here is by no means impractical. It really comes down to solid design choices.

Sets film in 1920′s uses typeface from 1975.

A good grasp of type history will help you avoid typographic anachronisms, which, although often lost on the general public, do not escape the notice of many designers, as demonstrated in Mark Simonson’s article on the 2012 Oscar winner for Best Picture, “The Artist,” and his other typographic scrutinies of popular movies and media.

It’s not exclusively about the history of type, however. Type classification is also helpful in pairing typefaces for projects, sometimes based on historical proximity but also by noting similar features that unify the typefaces, such as axis or x-height. In some cases, by finding enough disparity in the small features, very different typefaces become complementary.

Most importantly, perhaps, this article will not only familiarize you with general type history and commonly used terminology, but also help you learn to look for and recognize important characteristics of type and the inexhaustible minutiae that make typefaces unique, as well as arm you with useful descriptors of type styles.

Type Classification Systems

Over the past century, quite a few classification systems have been proposed. Most are generally believed to be subjective and incomplete, and many of them use the same terms for similar but slightly different classes. The impossibility of a truly complete classification system has led many people to dismiss any attempt to classify typefaces — there are simply too many variables to make anything close to a practical, comprehensive system. Essentially, classification describes typefaces; it does not define them. It’s not inflexible, and is more of an aid than a rule. However, for the reasons given above, I believe there is value to be found in it. Below are a few examples.

The primary “official” classification system currently is the Vox-ATypI system. Originally put together in 1954 by Maxmilien Vox, it was adopted in 1962 by the Association Typographique Internationale (ATypI), which made a minor change at the 2010 conference (appropriately, held in Dublin) to include Gaelic as an extra category. It classifies typefaces in 11 general categories, with some subdivision. Its Wikipedia article provides an excellent overview.

The British Standards Classification of Typefaces, adopted in 1967, is also based on Vox’s original classification. It is slightly simplified and has remained essentially unchanged since its adoption.

Bringhurst, in his Elements of Typographic Style — perhaps the standard in typographic textbooks today — categorizes typefaces loosely after periods of art history; for example, Baroque, Rococo, Romantic, etc. A book designer himself, Bringhurst focuses on text typefaces and practically ignores display type.

Others are much more general. An early system by French typographer Francis Thibaudeau, which provided the base for Vox’s later more thorough classification, includes four broad categories: Antiques (sans serifs), Égyptiennes (slab serifs), Didots and Elzévirs (faces with triangular serifs).

Gerrit Noordzij, while at the Royal Academy of Fine Arts in the Hague, held that typography was essentially an extension of handwriting, teaching typography using loose categories of letters that might be written with a broad-nib or pointed-nib pen, as well as interrupted or uninterrupted strokes, with varieties of both serifs and sans falling into each category.

These are just a few of the ways people have classified type over the years. In this two-part article, I will condense the various methods slightly and present what is at the very least generally accepted as legitimate (as there will always be a few out there who refuse to give up a particularly unusual classification method, or who decry any method at all).

Classifying Serif Typefaces

In part 1 here, we’ll cover serif styles, following the natural progression of type history, and thus move into sans and other categories in part 2.

Humanist

Starting off, naturally, at the beginning of type history, we’re in the middle 1400s, during the Renaissance. The movement, led by Italian cultural hubs such as Florence and Venice, was drawing Europe away from medieval practices, and typography was one part of that. Rather than using the blackletter, or Fraktur type, that Gutenberg used, printers began to create type mimicking the Latin writing hand of the philosophers and scribes of the time, beginning around 1465.

A 1905 textbook illustration of Renaissance printers

These typefaces are variously called Humanist or Venetian due to the zeitgeist and geography of the Renaissance. A number of distinct characteristics define Humanist typefaces.

Primarily, Humanist faces were very calligraphic in nature, and one way this manifested itself was in the strong axis, most apparent in the bowls of characters and the lowercase “o,” a characteristic borrowed from the angle at which a right-handed writer holds a pen. Another interesting way this showed itself was in the notably angled crossbar on the lowercase “e.” Other calligraphic influences are clear, such as inconsistencies in stroke weight and the way serifs are formed.

Other defining characteristics include a small x-height and a lower contrast between thick and thin strokes.

Not all Humanist typefaces are from the Renaissance era, however; many Humanist revivals have been created in more recent years, such as Centaur (1914) and Adobe Jenson (1996). Adobe Jenson, used in the specimen above, is based on the work of Renaissance printer Nicolas Jenson, a prominent printer and type designer who moved from his native France to Venice and contributed significantly to print and design history. There are even Humanist sans faces, but we’ll get to those in part 2. Although an influential period in type history, the Humanist era served primarily as a transition to newer styles of typefaces and was relatively brief.

Other examples of Humanist typefaces include Guardi, Arno, ITC Berkeley and Stempel Schneidler.

Garalde

In the Old-Style faces, often called Garaldes, we see type really beginning to come into its own. I call them Garaldes here because the term “Old Style” is at times used to include Humanist, Garalde and Transitional typefaces; simply calling this group “Garalde” helps to retain its identity.

Aldus Manutius and Claude Garamont

This period in type history lasts from the late-15th century all the way until the early 1700s, and the type created in this period has shown remarkable longevity. “Garalde” itself is a hybrid term borrowed from the names of two notable type designers of the era, French punchcutter Claude Garamont and the Venetian Aldus Manutius. The category is occasionally called “Aldine” after Manutius.

There are many similarities to the Humanist faces, but things are moving in a particular direction, as we’ll see with the consecutive categories of Transitional and Didone. You can see the type designers treating type as different from the written word, losing some of the idiosyncrasies of handwriting that the Humanist designers retained, while carrying over others. The axis of the stress straightens, and while it still has an angle, it is subtler. The serifs become more carefully formed, and characters are designed more proportionately. One of the most obvious differences is the crossbar of the lowercase “e,” which, while remaining angled in the Humanist typefaces, drops to a horizontal position in the Garaldes. Also, the difference between heavy and light stroke weights increased, and everything became more precise, perhaps due to the progress in technical aspects of making type.

A huge amount of type was created in this era, and much of it is commonly used today, either digitized versions or new revivals. Common examples of the Garalde faces include Caslon, Sabon, Palatino, Galliard and Janson — not to be confused with Jenson, the Humanist typeface. In fact, Janson, named after Dutch punchcutter Anton Janson, is now thought to be the work of Miklós Kis, a Hungarian, produced during an apprenticeship in Amsterdam.

Transitional

Work was begun on the first Transitional typeface in 1692, long before people had left behind making Garaldes. In fact, William Caslon was creating typefaces based on Old-Style Dutch type as late as the 1720s. Because this part of type history is also significant, many have asserted that “Transitional” is an inadequate name for it, and this category may also be termed Neoclassical or Realist.

Louis XIV and the Romain du Roi

In the late-17th century, Louis XIV, as part of a general renovation of France’s Imprimerie Royale (the governmental printing works), commissioned the French Academy of Sciences to create a new typeface. The Romain du Roi — literally the “King’s Roman” — was designed using a strict grid, and its development was an arduous process, involving a committee that included a mathematician and an engineer. Although commissioned in 1692, the entire family of 86 fonts was not completed until 1745.

John Baskerville (left) and Pierre Simon Fournier (right)

Two of the biggest names in type during this period were John Baskerville and Pierre Simon Fournier. Baskerville, an entrepreneur who dabbled in multiple businesses, developed quite an interest in printing and eventually designed his own type in order to improve on Caslon’s work. This did not please most of the printing world at the time, and Baskerville endured harsh criticism, despite having such luminaries as Benjamin Franklin as friends and advocates of his work. You may have read of the humorous encounter in which Franklin outwitted a critic of Baskerville. Numerous revivals, both metal and digital type, that draw on Baskerville have been made.

Fournier was among the printers who praised Baskerville’s type, reserving particularly high compliments for his italics. Fournier was highly respected in his lifetime, and despite having consulted royalty both within France and internationally on type design and having established printing houses, Fournier is primarily remembered today for introducing the point system as a way to measure type sizes. Pierre Fournier, uncannily sharing a name with an acclaimed 20th-century cellist, also had an interest in music and developed a new style of typography for musical notation.

In the Transitionals (or Neoclassicals), we see certain trends continuing. The axis is now nearly, if not completely, vertical. The weight difference between the thickest and thinnest points is now exaggerated. The serifs are less bracketed and flatten out. Details become very refined.

Eric Gill’s Joanna, Melior, Clearface and Mrs. Eaves — a Baskerville revival named after Sarah Eaves, Baskerville’s wife — all fall into this category.

Didone

As strange as it seems, what we call modern typefaces first appeared in the second half of the 1700s. Therefore, I will call them by their less absurd name — and who can argue that saying “Didone” is not more fun than saying simply “Modern”? Bringhurst terms them Romantics.

Through the 18th and 19th centuries, France witnessed a small printing dynasty in the Didot family. Over multiple generations, the family made major contributions to printing. One of the most remarkable members was Firmin Didot, who, with Giambattista Bodoni, ushered in and now acts as a namesake for this part of type history.

Firmin Didot (left) and Giambattista Bodoni (right)

In large part inspired by Baskerville, Didot and Bodoni pushed the limits of type design. They explored a similar style and were both meticulous craftsmen, consequently igniting a fierce rivalry. Bodoni (1740–1813) gave himself entirely to his craft. He was renowned for the beauty of his type specimens, and, a technically brilliant punchcutter himself, he designed some 298 typefaces. Didot (1764–1836), on the other hand, retired in 1827 to pursue political office and literature in his later years, writing tragedies and literary critiques.

If Baskerville’s stroke contrast was exaggerated, then the Didones’ are in the extreme. The heavy strokes are very heavy, and the light are a hairline. The stress is again completely vertical, and the apertures — places where the character opens — are generally very tight. Combined, these make for a very awkward visual rhythm, and Didones are always a poor choice for chunks of text. Rather, they work best at large sizes, as titling and display type, because the features emphasize the elegance of individual characters and do not blend well. Adobe’s New Caledonia, which softens some extremes and thus works for longer bits of text, is a possible exception.

Aside from the obvious Bodoni and Didot faces, in their dozens of variants from nearly every foundry, Basilia, Aviano, Walbaum, Ambroise and Scotch Roman are exemplary moderns.

Slab Serif

This article wouldn’t be complete without a mention of slab serifs. These are among the easiest to identify because of their very obvious appearance. Originally created for advertising, posters and other large media, slab serifs, alternatively called “Mechanicals” (in VOX-ATypI) and “Égyptiennes” (by Thibaudeau), were the first types expressly designed as display type. Vincent Figgins is credited with the first slab serifs, the earliest specimen dating to 1815, and his work inspired a diversity of critiques variously commending and lambasting the new style.

Abrupt serifs, usually in heavy weights, and a no-nonsense attitude are the trademarks of this style.

Clarendons, a notable offshoot of the original slab serifs, are a slightly tamed slab style, often in less extreme weights and using bracketed serifs. They have a lighter, friendlier character than the Neo-Grotesque slabs (i.e. those with unbracketed serifs and geometric construction).

H&FJ’s Sentinel (2009) and David Berlow’s Belizio (1998) are examples of recent Clarendons.

And That’s It… For Now

If you have made it this far in the article, congratulations! You are now in possession of a solid basic understanding of type classification, at least as far as serif typefaces take you, and you are able to recognize the important distinguishing features that make typefaces unique. Following the line of type history, we’re now in the middle of the 19th century, and we have the entirety of sans serifs and some discussion of display faces ahead of us. We’re really only halfway through, so if you’ve enjoyed it, you can look forward to part 2!

For now, here’s a little exercise to test your comprehension of what we’ve covered in this article so far. Take a look at these specimens and comment on how you’d classify them. Keep in mind that classification is an aid, rather than a hard and fast system, so don’t be shy — let us know where you’d place these typefaces!

Identify each typeface by its number (1 to 6) if you are classifying it in the comments. Extra points if you can identify the individual typefaces! I’ll be joining the discussion with the answers later, although I am sure you’ll have figured them out soon.

(al)

© Joseph Alessio for Smashing Magazine, 2013.

Layout, for both print and screen, is one of the most important aspects of graphic design. Designs that extend across multiple pages or screens, whether containing large or small amounts of type, must be carefully controlled in a way that is enticing and is easy for all to access. Careful control of visual hierarchy is a key aspect of the design decisions we have to consider.

In this article, we will look at how frequently type needs to be broken down into different levels, such as topic, importance and tone of voice. We will explore how this can be achieved visually by relying on several things: texture and tone, seeing the designer as reader, combining typefaces, using color, employing multiple types and, of course, using the grid. Seeing the complexities that can be expressed through typography is fascinating — not to say that images cannot help to order content, but simply that the most significant elements are expressed typographically.

The Designer As Reader

Letterforms make words, and words have meaning. While scale, tone, texture and composition will always be relevant, people’s recognition of the meanings of actual words has to be considered when designing with type. Reading through and trying to understand the copy used in a project is vital to deciding the order and relative importance of information. It is also valuable for the designer to identify highly topical subject matter, words and letters that make intriguing connections, challenging language and even shocking statements that are likely to attract attention.

In order to improve the target audience’s understanding of the design and facilitate their interaction with it, the designer needs to step into their shoes and interpret the hierarchy that they’re given, perhaps augmenting it or suggesting alternatives.

Rebecca Foster’s poster for the Young Vic theatre in the UK demonstrates a dramatic use of language, with a clever double meaning.

The Anthony Nolan Trust was set up in the UK in the 1970s to find bone marrow matches to help in the fight against leukemia. This poster and Web page, designed by Johnson Banks, reflect these matches by connecting the same letter in two different words.

Being able to interpret the connotations of different typefaces is valuable. For example, large, bold full-caps sans-serif typefaces are highly visible, but they are frequently used to warn of danger, and they dramatically increase the significance of certain words within the overall design.

More decorative typefaces can be attractive but might be more difficult to read, causing the reader to move on to simpler letterforms and words in the layout. Choosing typeface will inevitably affect the visual hierarchy but not necessarily in a straightforward way; all of the visual implications of a typeface need to be considered.

Little Miracles has an unusual design, featuring a strong, condensed sans-serif typeface, which is not often used to convey the delicate flavors and health-giving properties of an organic energy drink.

Another example: In Alison Carmichael’s design, the beautiful large white script set against pink is a deliberate challenge to read, causing you to quickly move on to the amusing crux of the message, typeset in a condensed, bold sans serif.

Texture And Tone

Hierarchy based on type is usually shaped by relationships of visual texture and tone; that is, letterforms, words and lines of type come together to form different tonal values and varying characteristics of patterns or texture. Depending on these tonal values and the scale and texture, the viewer will be attracted to a greater or lesser degree. Typeface, point size, tint, weight, letter spacing, line spacing and general spatial distribution are also important because they affect the density of type and, therefore, the lightness and darkness and the texture and tone.

These combinations similarly affect the kind of “pattern” or texture that is created. Logical, perhaps even mathematical, enlargements and reductions are a good place to start, but ultimately, as is so frequently the case when designing with type, visual judgment often brings the best results.

Texture and tone control the order in which the user reads the text. Although the main quote and the text in the gray box are not at the top of the page, they will be seen first, and consumption of the remaining type will be governed by nuances of tone, texture and positioning. Larger view. (Design: Bright Pink)

Position and orientation in a layout can have far less of an impact than depth of tone or typographic texture. A piece of type can be arresting wherever it is positioned, providing it has sufficient visual strength. If the information that follows is given lower tonal values, then a visual hierarchy will have been established, regardless of positioning.

We cannot ignore the Western convention of reading from left to right and top to bottom and, in particular, the Western viewer’s instinctive response to return to the left edge; these can be extremely valuable tendencies. However, carefully selected textures and tones should be the overriding influences on hierarchy.

Of course, all typographic textures and tones are relative to each other and to other elements on the page. Some of the most powerful uses of layout stem from choices of scale and composition. A lot of surrounding space can really make type stand out.

Above are three treatments of two words, “sports” and “badminton.” (Images: Bright Pink).

In the first image, despite “sports” being set in large black condensed all caps, “badminton” is prominent because it is surrounded by white space. The second image continues the same principles, but by making “badminton” white and setting it against a black bar, it becomes even more noticeable. However, by adding emphasis to “badminton,” a little confusion could be created. Where is the reader drawn first? Keeping the intended hierarchy clear is vital. In the third image, the drawing almost swallow up “sport,” leaving it hardly visible and giving “badminton” clear prominence.

Combining Typefaces To Create Hierarchy

In this section, we’ll discuss the value of combining typefaces to generate interest and excitement, to reinforce identity and to support hierarchy. The key to creating hierarchy is contrast, which can come from simple changes in weight, scale, positioning, color, tone or font. Although this might sound easy, it can be complex. For example, altering line spacing or inter-character spacing can certainly add character, but it could also increase or decrease the tone of the type.

So, despite using what seems to be a completely different typeface, you might not be having the effect you imagine. As with many other situations when working with type, visual judgment is crucial.

Two contrasting typefaces, Baskerville and Futura, have been combined. Larger view. (Design: Bright Pink)

In the above image, changes to line and inter-character spacing have reduced the contrast. The larger and seemingly more impactful type is very similar in tone to many of the other levels of information in the design, and so figuring out which element has greater importance becomes more difficult.

A simple and very general starting point for creating contrast is to combine one serif font with a sans-serif partner. Fonts with multiple weights prove to be the most useful. Faces from the same family also sit well together. Pairing two serif or two sans-serif fonts together would not be impossible, but would be much more demanding and time-consuming to pull off.

There are no shortcuts to combining fonts, and at the risk of sounding repetitive, visual judgement of texture and tone is key. If two different fonts need to have the same prominence, again, visual judgement is the best guide. Look carefully at the size of type, because simply using the same size can be problematic when x-heights and ascenders and descenders vary.

Museum and gallery websites are excellent demonstrations of complex hierarchy. Typefaces are combined to reinforce an institution’s visual identity, and different fonts are often adopted as part of the identity of special exhibitions. These websites also have complex grids and structures, making careful typographic choices even more important.

The websites for the Victoria and Albert Museum and the National Portrait Gallery (both in London) and the Guggenheim (in New York) are all hierarchically complex, and all use typefaces carefully to create order, structure and appeal.

Colorful Type

Color has numerous roles to play in creating hierarchy, adding a dimension to the order of information. Bright and vibrant colors tend to attract us, while softer paler colors can be used to subdue detail. Certain colors have different associations in different cultures. You’ll need to carefully select not only the hue, but also the tone of a color.

An excellent way to test prominence and priority created by combinations of color is to view a design in grayscale. Inevitably, if the background’s tone is dark, it will merge with darker shades and throw out lighter colors, and vice versa.

Frost Design uses color to dramatic, contrasting effect in this ad for General Pants Co. With “Paint it black” written in bright pink and red, color is used both ironically and to attract.

In this second ad from Frost Design, red is cleverly used for certain letterforms, guiding the viewer to read them first and extract a second level of meaning from the phrase.

Quantity Of Type

So far, we have looked at relatively few words and letterforms. Exciting hierarchies and visual interest, order and aesthetics can be created, regardless of context, when text is considerably less limited, including even multiple paragraphs, headings, captions and quotes. Again, the “designer as reader” comes to the fore, because selecting the appropriate order and hierarchy for the task in hand is essential.

The designer may not be particularly interested in the subject matter of a design, but they still have to ensure that the audience is attracted to it, sticks with it, enjoys the interaction and progresses in the intended manner. The reader needs to be tempted by digestible amounts of information, treated in a variety of considered styles, and put together from a coherent palette.

It could be argued that the design above has five or six levels of typographic hierarchy, but all are coordinated and serve to attract and guide the reader enthusiastically through the information, without making the process too complex. Larger view. (Design: Bright Pink)

Why Grids Are So Practical

Grids play a useful role in almost every area of graphic design. And in layout, a grid is an essential organizational tool. The grid provides a framework and structure for the combination of type and images. Across multiple pages, a consistent grid enhances communication, brings cohesion and improves legibility. We asked numerous designers to describe their approach to grid design.

One interesting result of these inquiries is that a surprisingly large number of professionals noted their preference for working with grids that have an uneven number of columns, which, they say, establishes a more intriguing dynamism and asymmetry.

Designing a grid with flexibility is important. We should seldom settle for a two-column structure, but should rather consider systems with a greater number of columns, providing plenty of scope for exciting groupings.

A grid with flexibility. Larger view.

This page from the publisher Gestalten has plenty of columns. Five are used with great flexibility, with text and images extending across them, and the varying widths set priorities among the topics. Also, the different weights, faces, colors, cases and scales lead the user through different elements of the website in a particularly enjoyable flow.

Pages of the art magazine MAP. (Images source: Map Magazine, Issue 1 & 12-20)

MAP is a quarterly international arts magazine, designed by Studio 8. The lively 10-column grid has varying numbers of columns, even on the same page, making for exciting spaces. The dynamism is established primarily by the enticing composition, rather than by any typographic changes. Color is also introduced to guide the reader.

Most of the designs we have seen so far accommodate a fair amount of text. We haven’t really discussed pages with limited information. In these cases, type can be used almost as an image, and principles of composition can be used to produce contrasting scale, resulting in dynamic layouts. We might imagine that a small amount of type in a large amount of space is an ideal situation, but making the type, images and space work well together without seeming forced is rather hard. As with an odd number of columns, an asymmetric balance is likely more powerful, while a center-positioned design might appear static and less dynamic.

The Business of Design by London based design studio Cartlidge Levene.

Design company Cartlidge Levene designed the publication The Business of Design for the UK Arts Council. The book’s many spreads have little text and minimal images. The designers have cleverly positioned the type to lead readers to important details within the expanse of space. The arresting use of red adds to the dynamic.

Visual hierarchy is undoubtedly the key to memorability, persuasiveness and communication. As demonstrated by the designs we’ve looked at, regardless of context, comprehension is certainly enhanced by breaking text down into different levels. Structuring a design to reflect priority, emphasis and possibly tone of voice is the starting point in creating an exciting and unique hierarchy with type. Working in this way makes for a visually interesting form of communication and can be used very effectively to express and simplify information, not only enhancing understanding, but making the process of reading intensely enjoyable.

Useful Links

• “The Anthony Nolan Trust,” Johnson Banks
• Alison Carmichael
• Rebecca Foster Design
• Frost Design
• Gestalten
• Map ( By Matt Willey, previously of studio 8)
• Cartlidge Levene
• Little Miracles
• Victoria and Albert Museum, London
• National Portrait Gallery, London
• Guggenheim
• Create Impact With Type, Image and Color, Jessica Glaser and Carolyn Knight (RotoVision)
• The Graphic Design Exercise Book, Jessica Glaser and Carolyn Knight (RotoVision)

(al) (ea)

© C. Knight, J. Glaser for Smashing Magazine, 2013.

With the rise of Web fonts as well as affordable hosted Web font services and ready-made kits, typography is reclaiming its title as design queen, ruler of all graphic and Web design.

At the same time, for far too many designers, the main concern about typography today seems to be aesthetic in nature. The problem is, we tend to use typography and lettering as two interchangeable terms, which they are not. A quick look at the “typography” tag on Dribbble reveals this trend.

The allure of well-executed lettering — and, boy, I could spend hours just looking at lettering portfolios! — can affect the way we view typefaces, because both typography and lettering share common visual concepts. If we seek only the next most Beautiful Typeface™ all the time, this habit alone can drive us away from the functional role of typefaces and their advantages as versatile, reusable and flexible design systems.

Moreover, we are often eager to try the latest OpenType feature, prettify our copy with discretionary ligatures, slap on partially executed CSS hyphenation, and then stare at our masterpiece in awe, unaware that anyone other than a typography geek couldn’t care less. Of course, reality hits right at the moment that the text has to be read and understood by normal people on a variety of devices, from the latest Retina laptops to 72-DPI cathode-ray-tube monitors with Windows XP to a range of sci-fi smartphones that can measure your blood pressure.

“Good typography does not look nice to please type nerds. Primarily, well set type reads well.”

– Oliver Reichenstein

Most articles on the Web are optimized for instant ingestion — does “reverse pyramid” sound familiar? Fast exchange of information is in the Internet’s nature and fits a reader’s short attention span. People visit websites and applications because they primarily seek information; rarely do they seek typographic pleasure. Don’t get me wrong: I love typographically creative headlines and decks that grab my attention — but at the same time, we can’t neglect the need for overall balance and legibility in body copy.

Let’s start!

First Things First: Project Research

Seamlessly digesting written matter is possible only when the typography is well thought out and legibility is facilitated by a considered reading experience. As in other fields of design, before doing anything else we should conduct some research. In developing the habit of research, we will not only discover valuable data, but also develop our ability to quickly jump into the reader’s shoes, shifting focus from our worst enemy — our own ego (which I play tug-of-war with all the time).

As you are most likely aware, the main components of a digital experience are content, context and the user. You probably address all three in almost every design project. But if we focus exclusively on typography within each of these components, then we’d find a handful of assessment methods and some considerations that would be useful to take into account and that would ultimately improve the overall reading experience.

Content

The best way to start a typographic design project is by reading the content. Seriously, every designer is intelligent enough to evaluate who this content is for and what it should be communicating. But apart from rating the quality of the content and listing its structural elements, we can also gauge comprehensibility, reading time, purpose and, finally, lifespan.

Cover All Typographic Elements
Upon reading the content, think about the structures or elements you have encountered and list them. Use the list as a starting point for a simple style guide. Apart from the normal paragraphs, headings and editorial accessories, you’ll find other — often overseen — elements, such as areas of emphasis, quotations, emphases within quotations and, very important these days, data tables and figure captions. Your perfect font should have enough family members to cover all of these elements.

In plain hypertextese, make sure to cover all HTML elements. At this point, you could even create sample HTML and CSS files containing all of the required elements and rules and save it as Project-Typography.html. As you can probably guess, this file will be the foundation of the project’s typographic system and will come in handy when you start designing responsive breakpoints.

Gauge Reading Time
Reading rates range anywhere from under 100 words per minute to a few thousand; most adults read between 200 and 250 words per minute. We can calculate the reading time for any given text quite easily by dividing the number of words by 250. If sample content for your project is available, simply throw it into a local installation of your favorite CMS and run it through a simple script to estimate reading time.

Depending on the situation, estimating reading time can help us determine the spacing within paragraphs and establish just the right rhythm and reading pace. If the reading time is long, we could break the text into smaller parts or simply introduce a pull quote at a strategic point, where it would double as a milestone.

Assess Readability and Reading Ease
Many readability tests provide an estimate of the school grade needed by the reader to understand the text, and knowing such parameters is useful. For example, if the matter is complex, you could probably introduce some editorial devices to keep the reader on track, or accommodate a greater number of footnotes with their own set of accessories.

Furthermore, when you are collaborating with a copywriter to tweak content and typography, these tools will make it easier to track differences between versions.

One such test is the Automated Readability Index (ARI). ARI focuses on the number of characters, words and sentences, thereby making it useful for real-time monitoring. The Flesch–Kincaid Grade Level test, on the other hand, focuses on syllables rather than characters, thus making it somewhat more processor-intensive for real-time assessments.

Another valuable test is Flesch Reading Ease. It is calculated according to words, sentences and syllables; the resulting score helps you determine the level of complexity of content. Most major languages have their own version. Although this tool is new to some of us in Web design, textbook publishers and government agencies have been using it for years to gauge the complexity of learning materials for different grade levels.

Calculating the reading ease score manually for each piece of content would be an obvious sign of masochism, so I suggest checking out the handy Article Readability Stats, a PHP script that we at Creative Nights developed for our own projects.

Content Strategy, Information Architecture and Microcopy
If we step out of typography for a moment into the field of content strategy (the discipline of planning and governing content and of defining editorial processes) and information architecture (the discipline of organizing and describing content), we can anticipate some potential issues.

Thinking about the content’s lifecycle protects us from the urge to typeset according to the latest trend. The next time an article is republished, we can prevent the editor’s rage from seeing leftover styles that weren’t removed in preparation for a redesign.

Category labels — typically defined by an information architect — can make the Web designer’s life miserable, because the space in a navigation bar or column is limited. I’d bet that at some point in their career, every Web designer has tried to rename or shorten category names in order to fit the available space. Of course, we could always reduce the font size or choose a condensed type, but if all else fails, we talk to the information architect to find a solution on their end.

Apart from articles, we must also typeset form labels, instructional copy, small print, interactive elements (such as buttons and links) and other text that clarifies tasks. All of this tiny copy is referred to as microcopy, and it is a fundamental ingredient in effective interaction design.

Context

With recent developments in Web standards, designers are now building websites that are getting closer and closer to the ideal of “One Web,” accessible to everyone and everywhere. Even though achieving such universality with all types of projects is difficult, we know that mobile doesn’t just mean browsing the Web on a smartphone while on the go.

We also know that tablets are used to give presentations, to check Twitter during breakfast or to read articles while sitting on the toilet (anyone who neglects this fact doesn’t understand the needs of users). The screen real estate of the coming generation of laptops puts a 96-DPI 30-inch desktop monitor to shame. We admire the Web’s universality, but at the same time we should be aware of the diversity of users and devices.

Software Concerns
Users on Windows systems with the ClearType rendering engine benefit from well-hinted fonts. The trouble is that hinting is a time-consuming process, and not all typefaces for the Web are fully polished yet. Therefore, additional testing in Windows browsers should form part of your regular routine.

These screenshots of Verdana, Proxima Nova, Arial, Adelle Sans and Georgia at 16 pixels (except for Proxima, set at 18 pixels) were taken on Firefox 18 on Windows 7. Proxima and Adelle are rendered as Web fonts, and the others are the usual suspects that come preinstalled on most OS’. The top five lines were taken with ClearType turned off.

Also, keep in mind that each Web font service might deliver slightly different fonts. A font might yield good results when delivered through one service but look barely adequate when delivered through another. I’ll speculate that the reason for such differences, if any, is primarily a lack of time invested — that is, a lack of the time needed to properly hint a font, as well as a scarcity of font-hinting experts.

Luckily for us, Web font service vendors are continually improving the quality of fonts, and eventually everyone’s fonts will be spruced up. Because a lot of work goes into maintaining proper fonts, I encourage you to buy fonts and to subscribe to paid Web hosting plans, which (among other things) will speed up the hinting efforts of font foundries. The greater the demand, the faster the process.

If supporting Windows users is mission critical for your project, then consider manually hinted typefaces, such as TheSans Office from LucasFonts (these guys are known for their obsession with hinting) or the numerous other typefaces designed for Microsoft Office applications (their names will usually contain “Com,” “Offc” or “Office”). If selecting a specialized typeface for an audience with older Windows systems is not worth the trouble, then just stick with the tried and tested Arial, Georgia or Verdana.

For more in-depth information about font rendering, read “A Closer Look at Font Rendering” by Tim Ahrens.

Hardware Concerns
A problem we are facing across the industry is the diversity of pixel densities; as a result, typography is not spared either. One interesting solution is to embed graded fonts for different densities, just as print designers use graded fonts to more precisely control the effects of ink on paper. Read more about this approach in Oliver Reichenstein’s article “New Site With Responsive Typography.”

Glyphs are rendered differently even on devices from the same manufacturer. Shown here is Adelle set at 16 pixels as rendered on an iPhone 3G, iPad 3 and iPhone 4S, enlarged in Photoshop, from a Web page screenshot.

Another example is typesetting for screen billboards and TV screens, which often require thicker weights and more weight contrast. In such cases, you would skip two weights on a scale and combine the regular style with the extra bold. Previewing such designs on your desktop or Retina laptop is not enough. As with designing for mobile, we have to test on real hardware.

The Interface Type
Hardware and software aspects aside, context also refers to the type of interface. For instance, on content-driven news portals, magazines, novels and textbooks in a digital setting, strings of sentences should have a clear structure, directly connected to each other and that form a linear reading path.

Topics on content-driven websites are usually diverse (even on niche websites), and a story needs to be introduced clearly in order for the reader to understand it. (Remember the editorial devices from above?)

On the other hand, information in Web applications is straightforward, usually bare-bones and factual, with easily comparable items or data, most often constrained to a certain timeframe. Unlike sentences in linear text, bits can be read and comprehended in isolation and are, therefore, open to the reader’s interpretation. We can safely assume that the user will jump randomly, in a non-linear fashion, from one bit of information to another.

With Web applications, the context of content is mostly predictable. Some typical use cases are checking sales figures; analyzing website statistics in tables, diagrams and charts; editing date- and time-related notes; and, in the case of Web mail, checking whether you are the lucky winner in the Nigerian Royal Lottery.

The User

On the Internet, everyone is our target customer, especially if we are building a multilingual system. If a button has just enough room for “Return” in English, then “Retour” in French, “Zurück” in German, “Povratak” in Croatian and “Visszatérés” in Hungarian might not fit.

Accessibility Concerns
Dyslexia is an impairment to a person’s ability to read. For instance, a dyslexic brain sees characters as images and rotates and mirrors letters. As a result, a lowercase two-story “a” with a weak tail might appear the same to a dyslexic person as an italic “e.”

In addition, most characters in geometric typefaces are hard for people with dyslexia to read because of similarities in form and shape. The mirrored “p” might look the same as a “q,” and a rotated “n” might look the same as a “u.” This doesn’t mean we should immediately switch to specialized typefaces, but being aware of such conditions is a part of the Web designer’s literacy.

To complicate matters, dyslexia occurs with another learning disability, attention deficit disorder, in about every fourth case.

Added gravity keeps the letters in place. Shown here are Futura and Open Dyslexic.

Font smoothing on the screen is possible thanks to red, green and blue subpixels. Unfortunately, for a small percentage of the male population, some typefaces appear sharper or blurrier, lighter or fatter than for the rest of us, simply because the red subpixel isn’t distinctive enough. With free tools such as Color Oracle, seeing how your typeface of choice performs for the color-vision impaired is easy.

Those with color-vision impairments perceive anti-aliased letters differently.

Selecting A Typeface For Function Over Form

Contrary to popular belief, having an eye for the perfect typeface is not an innate gift. Sure, talent will give you an initial advantage, but that will take you only so far. Train yourself to learn about the project at hand, and insight into suitable typefaces will come, thus helping you narrow the pool to a few appropriate candidates.

A little digression. Many tutorials and how-to’s have been written about choosing the appropriate typeface based on atmosphere and on look and feel. Designing atmosphere, evoking emotions and visually distinguishing a brand from its competitors is the responsibility of the graphic and UI designers. A typographic designer, or typesetter, takes a different angle, starting with the utilitarian needs and goals of the project, and developing from there. Both aspects are often required for a successful, well-rounded project.

Because these goals are so different, we have to be leery of suggesting font combinations and using less-than-specific adjectives such as “beautiful” and even the less-dramatic “nice” without providing context. A typeface can only be judged in the context of a particular situation. If a typeface is observed in isolation, then we must evaluate it at a strictly technical level.

When I see Comic Sans used on an invitation to a kindergarden party, the first thing I’ll do (of course) is roll my eyes. But at some point, I have to be honest and admit that it’s appropriate to the audience — my kids and their friends — as long as I don’t encourage them to use it everywhere. But if I saw Comic Sans on a company memo, I’d probably go postal.

Serif vs. Sans: Who Started It?

Many beginners have a hard time choosing between serif and sans-serif typefaces. As always, it depends on the situation, but it should never be a matter of the typographer or client’s personal taste. There is no difference in legibility between the two, especially in this era of high-density screens.

Sometimes a project allows us to cut corners, and if we do our homework and learn about the content, we can make informed decisions. For example, if we are presenting vertically oriented data (for example, a table of exchange rates or a list of product prices), then it would probably be better to use a typeface without serifs, which usually adds a horizontal emphasis. On the other hand, because serifs encourage horizontal flow along the line of text, they are more suitable for a set of linear thoughts or where vertical space is scarce.

We all know it, but we often forget to step back and see the bigger picture in a project. For instance, I like the reasoning of Vitaly Friedman and Elliot Jay Stocks in their decision to go with a sans serif for Smashing Magazine’s body text. Upon taking a bird’s-eye view and observing the page’s layout and interface as a whole, they concluded:

“Because there’s a lot going on visually on Smashing Magazine — screenshots, buttons and noisy ads — a sans-serif felt like a more sensible, uncluttered route for body copy.”

– Vitaly Friedman and Elliot Jay Stocks

Letter Legibility

Another important test of legibility is how different each glyph is from the other glyphs in a single typeface. Designers use pangrams, or short test strings, to evaluate and compare typefaces; for examples, the famous “The quick brown fox jumps over the lazy dog,” “Handgloves” and “Hamburgefonstiv.”

The text “aegh! iIl1 0O,” devised by designer Jon Tan, goes a little further. It is a good way both to get a sense of a typeface and to check the distinctness of the “i,” “I,” “l” and “1” and of the “0” and “O.”

We can extend such strings even further and include italics, small caps and numerals. For example, we could extend the string with an italic “e,” just to make sure it’s not too similar to a rotated lowercase “a,” especially at smaller sizes where character detail can get lost.

Try to avoid ambiguous letterforms. Top to bottom: League Gothic, Gill Sans, Myriad Pro, Neue Helvetica.

Foreign Affairs

Support for international visitors is a must. If you are about to set the whole website in a language that you are not familiar with (say, Arabic or Vietnamese), then you’ll probably need a one-on-one lesson with a local typographer. But most Web designers will build user profiles for their international audience, and we have to make sure that all characters are supported and that the typeface works in languages less common than English and Spanish. Each language has a particular critical combination or two.

It’s not uncommon to see a character sequence of “gy” in Hungarian or “ij” in Ijekavian dialects in some South Slavic languages, not to mention digraphs (“ch,” “dž,” “ij,” “lj” and “ty”) and trigraphs (“dzs” and “sch”), which are usually represented with two and three separate glyphs, respectively.

As a curiosity, in the Italian alphabet, the letters “k,” “j,” “w,” “x” and “y” are used only for words adopted from other languages, and some of them are used strictly colloquially — for instance, “k” as an emphasized “c” — or so I heard when I cut a guy off in traffic the last time I was in Italy. But I digress. The slightly reduced alphabet results in frequent letter combinations such as “cc,” “ll,” “tt” and “zz” next to — or surrounded by — “o” or “i.” You can already guess that these combinations can make for some awkward spacing.

In southeast Europe, family names often end with “č” or “ć,” and no one likes when a letter in their first or last name is stripped of a diacritic or, even worse, rendered in a fallback typeface. Danish and Norwegian, for example, use “ø,” and German uses “ß” — and those are still only within the Latin alphabet.

Know the characters and combinations in your target language.

In order to cover the extended Latin alphabet, we obviously have to choose a typeface that covers all Central European characters (i.e. use paid fonts). But in cases of the aforementioned letter combinations in less common languages, it wouldn’t hurt to consider typeface candidates that support those particular languages, because at the time of writing, kerning is still not possible with CSS (no pun intended).

We Read Familiar Typefaces Best, But We Learn Better With Unfamiliar Ones.

People are believed to read best in familiar typefaces (PDF, 11.5 MB). Even experts — namely, Zuzana Licko and Erik Spiekermann — say that we read best in what we read most. Learn about the history of the typeface you’re considering and compare it to the usual suspects for the target audience.

Skolar, a typeface by David Brezina, was designed for scholarly and multilingual publications, where people are used to seeing Times New Roman. Skolar is fresh and modern, yet similar enough in features and appearance to Times New Roman to be easily adopted by this user group. It’s a safe bet and a good option to begin with, but by all means do experiment and try alternatives that might appeal to your target audience.

Skolar as a replacement for Times and Times New Roman? Can you spot the difference between the two Times’?

A recent study by Connor Diemand-Yauman, Daniel M. Oppenheimer and Erikka B. Vaughan on the “Effects of Disfluency on Educational Outcomes” (PDF, 1.3 MB) found that information rendered in hard-to-read fonts was more easily remembered than information rendered in fonts deemed easier to read. The study showed that deeper processing stimulated by disfluency led to improved memory performance. This doesn’t mean we should automatically select the strangest typeface on the planet, but considering an alternative to a popular typeface does make sense.

Display Typefaces in the Responsive Era

Condensed gothics and grotesques as well as specialized decorative typefaces are being rediscovered on the Web. They add style and weight, functioning especially well as attention-grabbers in mastheads and as anchors in lengthy text. Stylistic suggestions are beyond the scope of this article, because headlines on the Web are often written to conform to SEO best practices in order to attract more visitors, which is a somewhat different function from headlines in print material. However, let’s look at a potential pitfall in setting headlines in a condensed typeface on the Web, where the context is never static.

If changes in screen orientation and aspect ratio are neglected, then a multi-word headline set in a “skyline” typeface (i.e. a tall condensed sans serif) might work with landscape-oriented and desktop-sized breakpoints; at the same time, it might occupy too much vertical space on a smartphone in portrait orientation, especially if the original single-line headline is pushed onto a second line. Merely reducing the font size to fit the element could help, but the result might not be as legible as the text on a desktop screen.

The opposite also applies. If we are designing mobile first, then a big bold headline that works perfectly on a tiny screen might be too loud if literally transposed to desktop sizes.

An extended companion to a condensed typeface set at a smaller font size could provide a better match where vertical space comes at a premium. When the extended typeface is too tiny, the condensed partner could step in.

This headline, set in the League Gothic on a single line, is barely legible on mobile. Set on multiple lines, the headline occupies too much vertical space.

Nimbus Sans Condensed and Nimbus Sans Extended in action.

Combining Typefaces

Typefaces are combined to create tension and to generate interest in a design. In most cases, however, once the reader is pulled in, favoring order and structure of composition over the beauty of letterforms will improve the flow of reading, especially on low-resolution screens, where subtleties and details of typographic accessories are not immediately evident. Consider this piece of advice as a last attempt to talk you out of combining very different fonts, unless absolutely necessary.

As a rule of thumb and in order to avoid a complete typographic disaster, combine typefaces with matching x-heights. Comparing x-heights at the same font size is a litmus test to see whether words set in different types can coexist. Always keep in mind that typesetting for the Web should be bulletproof and future-proof. That being said, maintaining typographic harmony is not the easiest task if elements sitting on the same baseline need different letter sizes as compensation for mismatching x-heights.

Aller combined with Minion Pro, Georgia and Adelle. Notice how Minion Pro and Georgia call for additional adjustments to line height.

A Safe Bet Approach

The easiest solution to combining typefaces is to follow type relationships and your own common sense.

A typeface that is a member of a bigger system can be combined with other family members along any of the axes (such as weight, width and cut), so being able to use typefaces from the same type family will come as a relief. Look for extended families or super-families that have more than a few basic styles (including regular, italic, bold and bold italic). Extended families include everything from thin to black weights and sometimes multiple widths, while super-families, also referred to as type systems, additionally contain sans-serif and serif companions, text and display cuts and sometimes graded fonts.

Don’t worry too much about exact classifications, because categories are not always consistent from foundry to foundry. Plus, the boundary between extended families and super-families is not always clear. For example, some collections include sans-serif and serif in multiple weights but not multiple widths. Remember, though, that most type families have only a limited number of basic styles, while only a few dozen are versatile enough to cover all typographic needs. (A few dozen out of the hundreds of thousands of typefaces in existence today is a tiny fraction.) If you have trouble combining typefaces, versatile collections are always a good option to begin with.

JAF Bernino Sans has multiple weights and widths. The grayed-out letters are fake italics, also referred to as slanted romans. Some browsers are capable of distorting fonts into a slanted shape on the fly with CSS, but pseudo-italics are considered a typographical crime.

Typefaces designed by the same designer are often a smart combination, because proportions, shapes, strokes and angles will share the same DNA. Note the typefaces designed by Jos Buivenga, Veronika Burian, Matthew Carter, Nikola Đurek, Adrian Frutiger, Jose Scaglione, Mark Simonson and Erik Spiekermann, to name just a few of my heroes, and try to spot each designer’s signature.

As a last resort, combine typefaces from the same foundry, because a foundry will normally offer typefaces that can be combined. A smart designer subscribes to typography-related newsletters and, consequently, gets exposed to a significant number of proven and reusable combinations, as suggested by the experienced designers and typographers who work at foundries. As a bonus, your newsletter folder will become a nice reference archive over time.

If you still want to experiment on your own, create enough contrast between typefaces to achieve a comfortable balance. Avoid typefaces with competing characters, which would create too much noise and distract the reader. If two typefaces are too similar, though, the reader might get irritated just because they can’t clearly see the differences. Combining two neighboring weights (such as regular and semibold or bold and extra bold) shouldn’t become a habit unless you absolutely know what you’re doing.

As with cooking, start by preparing simple edible meals. Then, after you’ve gotten some experience in not poisoning people, you can safely put the cookbook on the shelf and start experimenting with exotic spices and your own routines. If you are dying for some practical examples, here are a few handy articles:

• “Best Practices of Combining Typefaces,” Douglas Bonneville
• “‘What Font Should I Use?’: Five Principles for Choosing and Using Typefaces,” Dan Mayer
• “How to Choose a Typeface,” Douglas Bonneville

Editorial Accessories

Display and decorative typefaces are appropriate for short text snippets, such as headlines and pull quotes, because they set the tone and atmosphere and break up long copy (remember the reading-time assessment from above?). Text typefaces are utilitarian and suitable for long reading. Reading can get boring after a while, particularly on an attention-hostile technology such as an Internet-connected computer.

“Designers like even grayness, which is the worst thing for a reader.”

– Erik Spiekermann

Insert an occasional break with a heading or pull quote, to nudge the reader along. Pull quotes that highlight important facts from the text would benefit from a display typeface. Because headings are a part of the main text, they are best set with a variation of the primary typeface (small caps, for instance). As stated, this is more of a safe bet than a rule set in stone.

We Have A Responsibility

Two important factors should influence your decisions. First, if they don’t like your typographic choice, a reader can change it via the customization options built into the application or device. And if they do that, they will usually change it to something more generic, thus ruining your typesetting altogether. Back in the day, when we combined absolute units for line heights with relative units for letters in Internet Explorer (or so I’ve heard), even a slight increase in letter size would bring chaos to the page.

Secondly, the absence of a fold or any physical boundaries of the page is both a curse and a blessing. On the positive side, the space for content on the screen is virtually infinite. On the negative side, designing a balanced layout becomes more difficult because, in most cases, it won’t be seen all at once from top to bottom. This is why editorial accessories are valuable features that can help us design a better reading experience. Once the user scrolls further down the page, we can’t expect them to run a marathon all the way to the end.

When designing for everyone, we shouldn’t assume anything. We ought to accept that our typographic designs will be seen on various hardware devices, in a range of pixel densities. We have to make sure our text is as legible as possible when seen in the virtually limitless combination of variables such as space, time, cognition, social conditions and physical conditions. The days of hard and fast rules are gone, and our responsibility is to learn everything we possibly can about a project in order to make informed decisions and establish a solid design concept.

(al)

© Marko Dugonjic for Smashing Magazine, 2013.

I’ve always wondered, “What is it that makes a typeface or any other design good?” However simplistic this question may seem to typographers, it is a legitimate question many of us are trying to answer.

After several years working as a professional type designer, teaching, and running a type foundry, I pretty much gave up my attempts to find a golden set of rules. The answer is not so simple. There is no established set of features which, when present, make a typeface good (and I do not mean just “looks good,” but also works good). But there is a body of knowledge that can provide the necessary answers and also inform your inevitable personal view.

I will try to give you a condensed recipe on how to approach typefaces critically and perhaps even ruthlessly. In my humble opinion, this is the best way to get oriented in the field. Indeed, looking at typefaces this way is more generic and painful, and it does take longer, but it is a transferable skill and is totally worth it. Much better than any specific answer you can get.

In this article we will cover two steps:

1. Select your sources carefully,
2. Study materials from these sources closely and critically (“to study” means both to look and to read).

I tend to refer mainly to critical reading. Many young designers despise reading. Believe me, I hate those boring historical and theoretical treatises as much as you do, but even though images are worth a thousand words, they alone cannot say everything.

1. Selecting Sources

There are a lot of designed and written materials available. Unfortunately, it’s not always clear which ones are appropriate and trustworthy. So how do you find out?

Always try to be aware of the nature of the source. Are the materials educational or promotional? The difference might not always be clear. Promotional texts boast about all the positives and obscure any negatives. They are written for the benefit of the author or producer. Educational resources generally attempt a more balanced view and they are written for the benefit of the reader.

How can you find out whether the source is experienced or just well-known? Does not the first imply the second usually? Not always. Unlike celebrities who are primarily good at self-promotion and not necessarily at the job they do, authorities are those who actually have sound experience or knowledge, yet they might not be well-known. You would do better listening to the latter. It is hard, but try to disregard the PR noise and look at what they have done, if the quality of their work is consistent and respected and if they are conscious of what they are doing (e.g. they have a methodology). Note that length of the experience is a good signal, but not necessarily a solid proof of quality. There are old designers doing terrible work and young ones doing great too.

Keep some perspective: diversify your sources (never listen to just one), listen to what their competitors say about them and make sure you know the community they belong to — people tend not to criticize their own (at least not publicly).

People have different characters and different politics. Be aware of that when selecting sources. I would not completely trust anyone who has never publicly admitted a mistake. For such a person, perfect public image is more important than the validity of the discourse.

You certainly do not have to read everything. For some, it is better to stick with a few examples and study them deeply; others prefer a broader perspective with less depth. But read you must.

2. Critical Study

Here is the painful bit. You have gathered materials to read and look at, and now you must study and question what you’re reading. Here are a few simple tests to start with:

Informed Experience

Are the authors’ actual experiences relevant to what they are talking about? Example: if a brilliant designer is explaining politics in South Korea, should you listen? Even if the designer has been to South Korea, does it constitute an informed experience? Perhaps not.

Context

Is the statement generally valid or is there a context to it? A great example is the discussion about the use of small caps where Joe Clark disputes their utility in academic writings. One of the common rules in Anglo-Saxon typography is to typeset abbreviations in small caps to make them less pronounced. According to Clark, this actually hinders the reading and skimming of academic texts. Change the context and the validity of the whole statement changes. The article is amusingly rude and critical, but remember to read the reactions, too.

Evidence Quality

Is the statement supported by any evidence? Is the evidence relevant to the point being made, and does it illustrate the problem? Example: type designers will often mention how much time they spent developing their new type family, but is it really that important to know? Does a longer (or shorter) production time make their type family any better or worse? This information does make you think about the value and effort put into the project, but it is not actual evidence of quality.

Evidence Completeness

Does the evidence cover the broad picture or is it just a narrow snapshot? Are the conclusions made with a broad or narrow perspective? Example: if I were to design a generic book typeface and conduct preliminary research, should I analyze book typefaces from just five books from a few different countries? Is that a representative sample? Perhaps not.

Reality Check

If someone writes about originality or critical discourse, does it mean that person is actually original or critical? Articles are often written to denote the discussed quality in the author. Example: feel free to apply right now.

Testability

Does the typeface have features that are testable? Run the tests and see for yourself. Example: check a cross-platform web font in browsers your visitors use. Does it provide a consistent reading experience across a wide array of browsers, or is the appearance highly inconsistent or even erratic? If it’s the latter, then perhaps the web font is not so cross-platform.

Motives Check

What are the author’s motives? If an author appears biased, check their reasoning twice. Motives are good, but supported claims are better. Example: look at someone commenting on their competitor’s work. Naturally, disagreement is in their job description, but do they have valid basis for what they say? No? Then ignore their comments! You do not want to be used for someone’s propaganda against their competitors.

Post-Modern Check

Do not give up your aspirations for objective knowledge too soon. Not everything is a matter of personal taste. Isn’t it better to have a slightly imperfect or incomplete objective statement, rather than a bunch of subjective feelings (depending on the subject of discussion)? Example: six pixel type is not readable, but that’s hardly a matter of personal taste. If someone says so, then maybe they do not have any opinion at all. (It is nearly impossible to fit readable Latin lowercase within six pixels.)

And Then…

Read, see and listen. Discuss. Think. Repeat. (Preferably in that order.)

Optionally, you might also share and test what you have learned and write something. It is good for everyone in the field (especially for those who are criticized; talk to them, but stay civil) to keep the critical discourse rolling, and it helps to strengthen your reasoning. There are plenty of opportunities on social networks (btw. Twitter has a pretty lively community of type designers) and blogs. Talking to your friends and colleagues works pretty well, too.

Playing with these and other questions ignites the curiosity which is necessary for close inspection of other people’s designs. Why else would you look at it for so long?

There is a very simple rule: the more questions you ask, the more insights you will get. And to ensure the answers are useful, you need to remain critical. Once you gather enough you will know how to recognize a good typeface.

Further Reading

So far I carefully avoided being specific in this article, but I must admit that providing actual starting points seems worth betraying any sort of attempt for objectivity. In the following list I tried to avoid the most known books and show what enthusiastic typographers would read and what I also deem easy to digest. Please, do consider this selection biased and limited:

Inside Paragraphs: Typographic Fundamentals written by Cyrus Highsmith.
This new and short book is an introduction to the merits of type spacing for design students. It expands on a chapter on spacing hierarchy from Gerrit Noordzij’s book LetterLetter. What I recommend about it most is the nice common-sense analytic style.

Counterpunch: making type in the sixteenth century; designing typefaces now written by Fred Smeijers.
Long-awaited second edition was finally published last year. While it may seem very historical at first, this book is worth re-reading every three years as it explains, not just presents. It is a fine example of research and reasoning in typography.

Letters of credit: a view of type design written by Walter Tracy.
There are two parts of this book. One is on printing and typefounding and illustrates how technology defines type design. The other is a set of in-depth typeface reviews. Reviews by an experienced type person, that is.

While You’re Reading written by Gerard Unger.
Very enjoyable read, a summary of Unger’s thoughts on what I would call “human-centered type design”.

MA Typeface Design at the University of Reading
The website does not contain only the type specimens, but in many cases there are also essays about the development (look under the mysterious abbreviation ‘RoP’ which stands for ‘Reflection on practise’) some of which are very worth reading. If you like some typeface, you might as well read the essay too.

Illustrations created and designed by Anna Giedryś.

(cp) (il)

© David Březina for Smashing Magazine, 2013.

I’ve always wondered, “What is it that makes a typeface or any other design good?” However simplistic this question may seem to typographers, it is a legitimate question many of us are trying to answer.

After several years working as a professional type designer, teaching, and running a type foundry, I pretty much gave up my attempts to find a golden set of rules. The answer is not so simple. There is no established set of features which, when present, make a typeface good (and I do not mean just “looks good,” but also works good). But there is a body of knowledge that can provide the necessary answers and also inform your inevitable personal view.

I will try to give you a condensed recipe on how to approach typefaces critically and perhaps even ruthlessly. In my humble opinion, this is the best way to get oriented in the field. Indeed, looking at typefaces this way is more generic and painful, and it does take longer, but it is a transferable skill and is totally worth it. Much better than any specific answer you can get.

In this article we will cover two steps:

1. Select your sources carefully,
2. Study materials from these sources closely and critically (“to study” means both to look and to read).

I tend to refer mainly to critical reading. Many young designers despise reading. Believe me, I hate those boring historical and theoretical treatises as much as you do, but even though images are worth a thousand words, they alone cannot say everything.

1. Selecting Sources

There are a lot of designed and written materials available. Unfortunately, it’s not always clear which ones are appropriate and trustworthy. So how do you find out?

Always try to be aware of the nature of the source. Are the materials educational or promotional? The difference might not always be clear. Promotional texts boast about all the positives and obscure any negatives. They are written for the benefit of the author or producer. Educational resources generally attempt a more balanced view and they are written for the benefit of the reader.

How can you find out whether the source is experienced or just well-known? Does not the first imply the second usually? Not always. Unlike celebrities who are primarily good at self-promotion and not necessarily at the job they do, authorities are those who actually have sound experience or knowledge, yet they might not be well-known. You would do better listening to the latter. It is hard, but try to disregard the PR noise and look at what they have done, if the quality of their work is consistent and respected and if they are conscious of what they are doing (e.g. they have a methodology). Note that length of the experience is a good signal, but not necessarily a solid proof of quality. There are old designers doing terrible work and young ones doing great too.

Keep some perspective: diversify your sources (never listen to just one), listen to what their competitors say about them and make sure you know the community they belong to — people tend not to criticize their own (at least not publicly).

People have different characters and different politics. Be aware of that when selecting sources. I would not completely trust anyone who has never publicly admitted a mistake. For such a person, perfect public image is more important than the validity of the discourse.

You certainly do not have to read everything. For some, it is better to stick with a few examples and study them deeply; others prefer a broader perspective with less depth. But read you must.

2. Critical Study

Here is the painful bit. You have gathered materials to read and look at, and now you must study and question what you’re reading. Here are a few simple tests to start with:

Informed Experience

Are the authors’ actual experiences relevant to what they are talking about? Example: if a brilliant designer is explaining politics in South Korea, should you listen? Even if the designer has been to South Korea, does it constitute an informed experience? Perhaps not.

Context

Is the statement generally valid or is there a context to it? A great example is the discussion about the use of small caps where Joe Clark disputes their utility in academic writings. One of the common rules in Anglo-Saxon typography is to typeset abbreviations in small caps to make them less pronounced. According to Clark, this actually hinders the reading and skimming of academic texts. Change the context and the validity of the whole statement changes. The article is amusingly rude and critical, but remember to read the reactions, too.

Evidence Quality

Is the statement supported by any evidence? Is the evidence relevant to the point being made, and does it illustrate the problem? Example: type designers will often mention how much time they spent developing their new type family, but is it really that important to know? Does a longer (or shorter) production time make their type family any better or worse? This information does make you think about the value and effort put into the project, but it is not actual evidence of quality.

Evidence Completeness

Does the evidence cover the broad picture or is it just a narrow snapshot? Are the conclusions made with a broad or narrow perspective? Example: if I were to design a generic book typeface and conduct preliminary research, should I analyze book typefaces from just five books from a few different countries? Is that a representative sample? Perhaps not.

Reality Check

If someone writes about originality or critical discourse, does it mean that person is actually original or critical? Articles are often written to denote the discussed quality in the author. Example: feel free to apply right now.

Testability

Does the typeface have features that are testable? Run the tests and see for yourself. Example: check a cross-platform web font in browsers your visitors use. Does it provide a consistent reading experience across a wide array of browsers, or is the appearance highly inconsistent or even erratic? If it’s the latter, then perhaps the web font is not so cross-platform.

Motives Check

What are the author’s motives? If an author appears biased, check their reasoning twice. Motives are good, but supported claims are better. Example: look at someone commenting on their competitor’s work. Naturally, disagreement is in their job description, but do they have valid basis for what they say? No? Then ignore their comments! You do not want to be used for someone’s propaganda against their competitors.

Post-Modern Check

Do not give up your aspirations for objective knowledge too soon. Not everything is a matter of personal taste. Isn’t it better to have a slightly imperfect or incomplete objective statement, rather than a bunch of subjective feelings (depending on the subject of discussion)? Example: six pixel type is not readable, but that’s hardly a matter of personal taste. If someone says so, then maybe they do not have any opinion at all. (It is nearly impossible to fit readable Latin lowercase within six pixels.)

And Then…

Read, see and listen. Discuss. Think. Repeat. (Preferably in that order.)

Optionally, you might also share and test what you have learned and write something. It is good for everyone in the field (especially for those who are criticized; talk to them, but stay civil) to keep the critical discourse rolling, and it helps to strengthen your reasoning. There are plenty of opportunities on social networks (btw. Twitter has a pretty lively community of type designers) and blogs. Talking to your friends and colleagues works pretty well, too.

Playing with these and other questions ignites the curiosity which is necessary for close inspection of other people’s designs. Why else would you look at it for so long?

There is a very simple rule: the more questions you ask, the more insights you will get. And to ensure the answers are useful, you need to remain critical. Once you gather enough you will know how to recognize a good typeface.

Further Reading

So far I carefully avoided being specific in this article, but I must admit that providing actual starting points seems worth betraying any sort of attempt for objectivity. In the following list I tried to avoid the most known books and show what enthusiastic typographers would read and what I also deem easy to digest. Please, do consider this selection biased and limited:

Inside Paragraphs: Typographic Fundamentals written by Cyrus Highsmith.
This new and short book is an introduction to the merits of type spacing for design students. It expands on a chapter on spacing hierarchy from Gerrit Noordzij’s book LetterLetter. What I recommend about it most is the nice common-sense analytic style.

Counterpunch: making type in the sixteenth century; designing typefaces now written by Fred Smeijers.
Long-awaited second edition was finally published last year. While it may seem very historical at first, this book is worth re-reading every three years as it explains, not just presents. It is a fine example of research and reasoning in typography.

Letters of credit: a view of type design written by Walter Tracy.
There are two parts of this book. One is on printing and typefounding and illustrates how technology defines type design. The other is a set of in-depth typeface reviews. Reviews by an experienced type person, that is.

While You’re Reading written by Gerard Unger.
Very enjoyable read, a summary of Unger’s thoughts on what I would call “human-centered type design”.

MA Typeface Design at the University of Reading
The website does not contain only the type specimens, but in many cases there are also essays about the development (look under the mysterious abbreviation ‘RoP’ which stands for ‘Reflection on practise’) some of which are very worth reading. If you like some typeface, you might as well read the essay too.

Illustrations created and designed by Anna Giedryś.

(cp) (il)

© David Březina for Smashing Magazine, 2013.

Coming out of the grunge, graffiti and David Carson era through the ’90s, there has been a major resurgence of interest in typography. We have seen a number of designers and artists make their careers out of designing type or custom lettering, and it has become common to list typography among our skills and disciplines.

Unfortunately, as with any popularity surge, there have come with it a lot of misunderstandings of some of the terms and concepts that we use. This article will help you gain a clearer understanding of what typography is and isn’t, and why.

One rather common example of this is the myriad of blog posts and showcases claiming to display “hand-lettered typography” — I’ve even heard university professors say it. Though the phrase seems to make sense, it’s actually a contradiction in terms — hand-lettering is not typography at all! Before you throw your pens and brushes at me in protest, please let me explain!

Even though lettering and typography share many of the same concepts, and a good eye and understanding of one will enable you in the other as well, they are completely different disciplines. Let’s begin by defining how we understand each term.

What Is “Typography”?

Typography is essentially the study of how letterforms interact on a surface, directly relating to how the type will be set when it eventually goes to press. One definition is stated as “the style, arrangement or appearance of typeset matter,” and is a product of the movable type printing system that much of the world has used for centuries. It is related to typesetting and can include type design. In our current digitally-driven design world, this means working with fonts on a daily basis for most of us.

Typography is actually a subset of lettering, because it is the study of letters applied to typefaces. Many designers have also taken up letterpress printing as a hobby or side interest, which also utilizes aspects of typography or typesetting, depending on the project.

Typeset book pages. (Image: Tom Garnett)

Gerrit Noordzij, professor of typeface design at the Royal Academy of Art in The Hague, Netherlands, from 1960 to 1990, defines typography as “writing with prefabricated characters.” Peter Bil’ak, founder of Typotheque, notes that this “implies a complete distinction from lettering, handwriting or graffiti, which are also concerned with creating letter-shapes, but don’t offer a repeatable system of setting these letters.”

It is quite common for people to refer to lettering as typography, but you should always avoid doing so when speaking with a client. Typography might be used in a logo, but so might custom lettering. Your client may not know the difference, but you do, and it’s important to have an educated client. This requires that we speak to them using the right terms, and it makes things easier to understand for both you and your client.

In addition, as designers of any sort, we strive to maintain a high level of professionalism, and using terminology correctly is an important part of showing pride in our line of work and being confident that we can do it, not simply to get the job done, but to produce excellent work.

What Is “Lettering”?

Lettering can be simply defined as “the art of drawing letters”. A lot goes into making lettering look right, and that’s an entirely different topic, but the concept is very simple: a specific combination of letterforms crafted for a single use and purpose as opposed to using previously designed letters as components, as with typography. Often lettering is hand-drawn, with pens, graphite or brushes, although some people start their work directly in Adobe Illustrator. Engraving and similar arts are related to lettering.

New York script by Simon Ålander.

Just as typography is not lettering, lettering is not typography. Widely respected lettering artist Jessica Hische gave a talk on the subject at the FRONTEND 2011 conference, for those who “don’t understand the difference between lettering and type,” getting into the pertinent information with some concise definitions at around ¾ the way through the video.

Typography does indeed have similarities to lettering — it is still dealing with letters, but within the context of typefaces and their proper use. Therefore, it’s not a good idea to refer to typography as lettering, since they have different connotations and you don’t want to confuse your client by swapping terms. Again, accuracy in terms is an important element in any profession and design is no different.

Similarities And Differences

The visual concepts that are behind typography and lettering are largely shared by both disciplines. Letterspacing, consistent weight and contrast, the rules that we go by for what works and what doesn’t work, still apply. However, often the terms used are different. For space between two lines of text that are typeset, we use the term “leading,” referring to the strip of lead that printers would set between the lines of type to give more space. The same concept applied to lettering would simply be called “line spacing.”

“Upper case” of type containing uppercase glyphs. (Image: Marcin Wichary)

The space between letters is also an important concept, and lack of attention to it is responsible for much of the bad typography we see today. When working with type, we call adjusting the horizontal space between characters “kerning,” but this is a modernized understanding of the term. In typesetting, a kern is part of a glyph that extends beyond the type block on which the character is molded, e.g. the terminal of the “f” in the image below.

A kerned “f” type block.

In lettering, however, avoid referring to this as kerning. Rather than saying that the “A” and the “V” could be kerned, we could say that the space between them could be tightened up.

Typography is used for endless applications, from titles to body text, some of which present a myriad of typographic considerations that those concerned with lettering will not have to think about. Lettering is almost exclusively used as display text — imagine lettering a few paragraphs of text by hand!  Calligraphy is a much more likely to be used in longer passages of text. While calligraphy and lettering are once again related, there is a fundamental difference between the two that I’d like to point out.

Calligraphy is based on penmanship; it’s essentially “writing letters.” Lettering, on the other hand, is based on draftsmanship, i.e. “drawing letters.” Persevering calligraphers and scribes have famously done books as long as the Bible, which are incredible works of art in their own right (e.g. the Lindisfarne Gospels, the Book of Kells), but those were a lifetime endeavor, and for practical purposes we now use typefaces. Whew!

Illuminated (lavishly decorated) lettering in the Lindisfarne Gospels, from the Gospel of Mark. This particular page showcases a lettered portion as opposed to a calligraphic passage, i.e. drawn rather than written. (Image: manuscript_nerd)

The differences, in the modern digital age, are sometimes theoretical, but the practical differences are huge — nobody wants to hand-letter 500 pages!

Some tenacious calligraphers, however, have undertaken monumental projects, such as the St. John’s Bible, a modern manuscript completely written and illuminated — a calligraphic term for embellishing — by hand. It took about 13 years, from commission to completion, using traditional techniques such as quill pens and manually-applied gold leaf, and cost an estimated $8 million. The incredible proportions of this project are a testament to the beauty of traditional techniques, but also a reflection on how printing and typography have changed the world.

Historically Speaking

The arts of both lettering and calligraphy have been around since time immemorial. Spoken languages quickly developed writing systems, which were then used to communicate through a more enduring medium than speech. Lettering and calligraphy evolved alongside each other, along with other letter-related arts such as engraving. We can follow the progression, from the Rosetta Stone and ancient Roman inscriptions to the works of scribal art mentioned above and more. History has provided us with endless examples of lettering and calligraphy, by engraving, pen and brush.

Traditional Chinese calligraphy. (Image: Terry Madeley)

Although very few people could read, and writing was relegated to monasterial and royal scribes through the Middle Ages in Europe, we have some awe-inspiring work from that period. Unfortunately, we often overlook the beautiful calligraphy and lettering that was being done in Asia and the Middle East, where an education in the arts was much more accessible. Both lettering and calligraphy have thrived in the eastern hemisphere and continue to be a source of inspiration today.

Calligraphic art in the Hagia Sophia, Istanbul. (Image: Simona Scolari)

When Johannes Gutenberg built his printing press around 1439, the concept of typography, which had been developing slowly, was revolutionized. The moveable type system, metal alloy and casting methods gave the world a practical solution to printing. This gave rise to the discipline of typography as we know it, with kerning, leading and the terms we still use today. Each letter had its own type block on which it sat, and typesetters would arrange the type character by character.

Inside a Gutenberg Bible. Note the mixed use of blackletter typography and hand-lettered drop caps, mimicking the contemporary German calligraphic style. (Image: jmwk)

Typography was, and has continued to be, primarily the skill of setting type. It was a very time-consuming process, and people were constantly trying to find ways to streamline it and increase production rates. Standardized methods for arranging the glyphs so their positions could be memorized and picked up by the typographer without having to look were developed. This gave us our terms for upper case and lower case characters, because an upper case, or drawer, typically contained the capitals and the lower type-case the minuscules, before the California Job Case, popular in the United States in the 19th century, combined both levels into one larger case.

A chart displaying the layout of the California Job Case method for arranging type. (Image: Marcin Wichary)

Leaving typography at this point in its development, I’ll follow the progression of lettering and calligraphy. During this period of experimentation with printing, calligraphy still played a huge role in communication, and the educated would write in a hand that amazes us today as to the beauty and accuracy of their manuscripts. Swashes, ascenders and descenders wove themselves into amazing patterns and borders, sometimes all but obscuring the text itself.

Ornate sample of penmanship by Jan van de Velde, Amsterdam, 1609.

Lettering and calligraphy followed cultural trends, leaving the Rococo era and becoming more sober during the early 19th century, only to flower into ornament once again through the Victorian era and the florid shapes of Art Nouveau. The worlds of type and lettering constantly intermeshed. Many people, such as Oswald Cooper, achieved respect for their lettering and were hired by type foundries to design new typefaces.

Title pages from German avant-garde publications “Dekorative Kunst” and “Pan”, examples of lettering during the Art Nouveau movement.

Lettering figured strongly through Art Deco and Modernism, for posters and ads, logotypes and book covers. The relatively recent art of film titles also provides us with a wide range of illustrative lettering styles from the 20th century. Coming out of the Modern era and through the latter half of the 20th century lettering went through a variety of permutations — the organic styles of the 70′s, the new modernism of the 80′s, and the grungy 90′s styles aforementioned — bringing us to our modern lettering scene, with a smorgasbord of visual references to every period of history imaginable. Designers such as Herb Lubalin and Doyald Young, the metaphorical giants of lettering, have left a huge legacy from this time period.

Lettering by Herb Lubalin displaying his studio address.

Here I will step back in time to pick the thread of typography back up. The development of techniques continued through the 19th century, and printing played an important role in world history, such as Benjamin Franklin’s publications and Thomas Paine’s printed materials — The Rights Of Man, Age Of Reason, et al — that were instrumental in the American Revolution.

Meanwhile, after many inventors had tried and failed to create a practical typesetting machine, Ottmar Mergenthaler succeeded in building the linotype machine in 1884, which revolutionized the newspaper industry. I won’t say more about it here, but if you’re interested in the history of typography, I would highly recommend taking a look at the documentary Linotype: The Film. This is not a sponsored statement, I simply enjoyed the documentary immensely and you may want to check it out!

A look at a linotype machine. (Image: Marcin Wichary)

The linotype was just one of the machines used to expedite the typesetting and printing processes, and although some people still hand-set type, the industry as a whole was continuously changing to introduce faster and better techniques. Typography was explored in the various art movements, from Dada to Modernism and beyond, rethinking ways in which type could be used and given expression and meaning. As typography, experimental and traditional, progressed, the techniques segued to phototypesetting and from thence to the digital age in which we find ourselves today. Typography as a discipline looks very different than it did 50 years ago. Instead of setting metal type and locking in forms, we use panels in Illustrator or InDesign to kern, add leading and align our type.

Lettering has also moved into the digital format in which we enact most of our design work. Many artists, however, stay true to analog media by hand-drawing lettering.

Lettering by Tom Lane for Hook & Irons.

The digital amalgamation has been largely responsible for the confusion of lettering and typography, since they are now often created using the same programs — the difference between the two is no longer the difference between a brush and a letterpress machine, or a drafting table and linotype matrices. However, lettering and typography are still different concepts, and understanding them and their similarities and differences will help us become better designers.

Getting Started On Your Own Hand-Lettering

For those looking to begin creating hand-lettering of their own, it can feel a bit daunting. The letterforms that we see so often prove very difficult to draw freehand. Thankfully, there are a lot of tips and tricks you can use to familiarize yourself with the process and learn how to create pleasing compositions.

Tracing

Get some tracing paper, and print out samples of well-known typefaces. Trace them over a few times, letting your hand become used to the lines that type designers have carefully worked over and revised until they were perfect. Some good ones to start with are time-honored classics such as Garamond and Caslon, or exceptional recent works such as Okay Type’s Harriet. Avoid using free fonts, since they are often poorly crafted and wouldn’t provide a good model. This allows you to train your eye and hand using the work of masters.

Reading

Read voraciously! I’ve listed a number of resources at the end of the article for you to check out — books, blogs and other resources. Knowledge is power, and understanding principles behind type design and letterforms help you develop your eye.

Photo Safari

If you live near a town with a historic district or old buildings, make a point to spend a few hours on a weekend just walking around and finding samples of good typography and lettering. You can find great examples in outdoor signage, whether lighted signs, painted or vinyl. Often there are huge letters painted on brick walls at old factories or restaurants. Then, use your photos as models to draw historic styles of lettering.

Use a Grid, but Don’t Use a Grid

When lettering, you’ll find that perfect measurements often don’t actually look “right.” Draw lines to help yourself keep a consistent stress and even weight throughout your lettering, but trust your eye rather than the grid if something doesn’t look quite correct. This is particularly true if you’re doing something with a curved baseline. Remember, you’re making this to be seen, not measured, so perception trumps geometric perfection.

Resources

Here are a few resources that I have found to be particularly helpful, concerning both lettering and typography.

Books

• Dangerous Curves, Doyald Young
  This volume showcases some of the best work over Young’s illustrious lettering career, including rejected logotype options and in-process sketches.
• Scripts, Steven Heller and Louise Fili
  From two of our contemporary design landscape’s most respected proponents of lettering and type comes a “veritable festival of rare and unknown scripts.”
• Typography Sketchbooks, Steven Heller and Lita Talarico
  Heller teams up with Talarico to present a look inside the minds and processes of more than 100 esteemed letter-lovers.
• Designing Type, Karen Cheng
  Cheng walks us through a semantic look at the rationale and aesthetics behind the typefaces we see and use regularly, replete with diagrams and illustrations.

Websites

• Typeverything
  A tumblog of lettering and typography, curated by some of the most respected current lettering artists.
• Calligraphica
  Another Tumblr website showcasing calligraphy of all styles and languages, again curated by amazing calligraphers and letterers, including some of those involved in Typeverything.
• I Love Typography
  In-depth blog posts about type history and lettering, interviews with type designers, updates on upcoming type-related publications — ILT provides a good read for serious letter lovers.
• We Love Typography
  Compiled by typographers and designers of all sorts, another showcase of type and lettering with styles for everyone.
• Beautiful Type
  This site isn’t updated terribly often, but whatever and whenever they do post, it’s inspiring!

Portfolios

Here are a few portfolios from great lettering artists that have inspired many:

• Simon Walker
• Claire Coullon
• Dan Cassaro
• Jon Contino

In Summary

Hopefully this dissertation on lettering and typography has enhanced your knowledge of design and will further equip you to improve your skills. Lettering and typography, so similar yet so diverse, are a huge part of design and thus deserve our full understanding.

(cp)

© Joseph Alessio for Smashing Magazine, 2013.

Yesterday we published the article “Why Won’t Helvetica Go Away” in which Alastair Johnston discussed the evolution of Helvetica, the reasons for its popularity as well as his thoughts on why designers should start questioning the usefulness of Helvetica in their projects. Hours later Indra Kupferschmid published an article in which she corrected some of the facts presented in the original article. We republish Indra’s article to correct the factual errors, with her permission of course.—Ed.

This isn’t a “blue pencil” (I could never challenge master Shaw); just a lazy, quick rant. Alastair Johnston wrote an article on Helvetica posted on Smashing Magazine yesterday. I don’t want to comment on his strong opinion and cut out most of his subjective ranting. But some facts seem to have gotten a bit wonky.

He writes:

The other day someone sent me a link to a website with the preposterous title of “The 100 Best Typefaces of All Time.” Topping the chart was Helvetica, and that stirred my ire. I dismissed the list because it was based on marketing figures from one source, FontShop, coupled with the opinions of half a dozen Berlin-based typographers, but I was still incensed.

This was a survey done by FontShop in Germany in 2006, and it included more than just Berlin-based typographers. Said FontShop’s website has more precise info on the jury and criteria:

• Roger Black, Danilo Black, Inc., US
• Stephen Coles, Typographica, US
• Jan Middendorp, Publicist, Berlin
• Veronika Elsner, Elsner + Flake, Hamburg
• Bertram Schmidt-Friderichs, TDC / Hermann Schmidt, Mainz
• Ralf Herrmann, TypoForum, Weimar
• Claudia Guminski, FontShop, Marketing, Berlin

Criteria of the ranking:

• Sales figures: 40%
• Historical significance: 30%
• Aesthetic quality: 30%

The ranking does not include free fonts or components from operating systems or software (Arial, Verdana, etc.), but focuses exclusively on licensable printers’ typefaces. Types that, over the centuries, have been interpreted individually by several different foundries (Bodoni, Garamond, Futura and so on) were judged collectively and included as a single entry.

For Helvetica, an explanation of its history helps to explain its longevity. Most typeface designs are the result of fashion or changes in taste; some are technologically driven. When iron printing presses were introduced around 1800, sharper, crisper types such as Bodoni and Didot were created. When laser printers came along in the mid-1980s, with their bitmapped fonts, students in Holland began producing typefaces that reflected the quality of the poor printing. Letters in Studio [sic] (Eindhoven, Lecturis, 1983) shows examples by Jelle Bosma and Petr van Blokland designed on a 40-pixel grid. Emigré, an early digital type foundry, produced Oakland (1985) and other lo-res types for the market.

Laser printers use outline fonts; bitmap fonts were used for screen representation or matrix printers. The name of the Dutch booklet he refers to is “Letters in studie,” meaning “typefaces in the making,” or “in study” or “experiment.”

At that time, two sans-serif types introduced in the late 1920s dominated the market for advertising. These were Monotype Gill Sans and Futura, of the German Stempel foundry.

Futura is a typeface by the Bauer type foundry.

Suddenly there was a rush to create, imitate or revive sans-serif types. The Berthold foundry of Berlin dusted off the matrices for its Akzidenz Grotesk (1898), while their rivals, the Haas Type Foundry of Basel, decided to rework Schelter Grotesk, which had been issued by the Leipziger Schelter & Giesecke foundry in 1880. This became Neue Haas Grotesk in 1957, which was then picked up by the Stempel foundry in Frankfurt. It wanted to identify the type with the emerging popularity of Swiss graphic design and chose the ancient Roman name of Switzerland, Helvetia, and so Helvetica was reborn in 1961.

This is an incredibly brief summary of 30 years. Or what time is the author talking about when he says “suddenly”? Berthold did not rework Akzidenz-Grotesk until after Helvetica was issued (and became threateningly successful) — it had been available ever since 1898; it just became very popular in the 1950s. Neue Haas-Grotesk was based on Haas’ Französische Grotesk (which was based on Breite halbfette Grotesk by Schelter & Giesecke) and Haas’ Normal-Grotesk (which was based on Neue Moderne Grotesk by Wagner & Schmidt), with an eye on competing typefaces such as AG and Monotype Grotesque. NHG was not “picked up” by Stempel but insistently offered to it by Haas against its initial skepticism.

The reason for the popularity of Gill Sans and Futura was that they turned their back on these Grotesks of the 19th century, which were worn out. Eric Gill took a new approach: pen-made humanist calligraphy was the basis for his type (he had also worked on the drawings for the London Underground alphabet with his mentor, Edward Johnston). These letters made more coherent word shapes and were easier to read than Grotesks. But Gill’s type standardized the distinct curled-tail “l” and shed-roofed figure “1” of Johnston’s design, which led to confusion with the capital “I” (a problem in many sans serifs).

Paul Renner’s Futura was designed to reflect the new machine age, with simple geometric shapes, straight lines and circles that gave it a cool Art Deco elegance. Both types are now imbued with a lot of cultural baggage, so Gill suggests the British Broadcasting Corporation and Futura has become nostalgic shorthand for the era of streamlining.

But in the 1930s, these two types were immensely popular in Europe and North America, and the other founders had to respond quickly. Returning to the 19th century should have been out of the question for the competition, except that the German foundries had been flattened in the Second World War and were slow to retool.

I don’t understand what the author is trying to say in that last paragraph. Geometric sans-serifs were popular in the 1930s, yes, and all foundries “had to” issue their own, yes — almost all did, but well before German foundries cut down type production from 1942 on. Also, it never seized completely. Some foundries were destroyed in the war (Klingspor, for instance), but others (such as Stempel) not at all. The surge in the use of grotesques such as Akzidenz-Grotesk and — not to forget — Monotype Grotesque is rooted in the 1950s in Switzerland, and arose later in the design of the so-called “neo-grotesk” faces. The taste in typefaces was rather different in Germany, with Futura, Erbar and Neuzeit still widely used after Word War II. Also, the more calligraphy-inspired style of Schneidler, Trump and Zapf was very popular.

Helvetica became a national brand, an identity for the popular “Swiss style” of typography of Emil Ruder and Armin Hofmann, which quickly spread as their well-indoctrinated students took the new look back to Yale and other American schools.

As Paul Barnes points out rightly, “As Ruder & Hofmann were of the Basle school they used Univers/Akzidenz Grotesk not Helvetica”. Fuelling the rivalry between the Swiss “schools,” Zürichers like Hans Neuburg and Josef Müller-Brockmann were advocating Helvetica. The latter designed promotional material for NHG and Helvetica, such as the famous Satzklebebuch binder. Only Basel-based designer Albert Gromm once designed one of the initial marketing flyers for Helvetica in 1959.

From BMW, Bayer and Lufthansa in Germany, the Helvetica look spread to Bank of America, Knoll, Panasonic, Target, Crate&Barrel, JC Penney, Mattel, American Airlines, Sears, Microsoft and other corporations.

Graffiti protesting Bank of America in Berkeley, California, is chalked in a convincing Helvetica form.

Bank of America does not use Helvetica. Its corporate typeface is Franklin Gothic. The chalk artist doesn’t even try to mimic Helvetica, but rather mimics the bank’s actual typeface.

In the late ’90s Microsoft was selling a million copies of Word each month and gave away 14 fonts with its program. Its knock-off of Helvetica is called Arial. Linotype had taken over Stempel, and then Haas, and so consolidated its ownership of Helvetica and many of the clones.

Stempel had held Haas shares since 1927, first 45%, then 51% from 1954 on. Stempel’s majorities of shares were owned by Linotype. Haas bought Deberny & Peignot (and thus Univers) in 1972. When Stempel closed in 1985, its Haas shares went to Linotype, which purchased all rights to the Haas foundry in 1989.

After the adoption of the Swiss style internationally, another event caused the persistence of Helvetica: the arrival of the personal computer. Apple could fit only a few types into the memory of its LaserWriter printer driver. Times and Helvetica were decided by executive fiat (based on their popularity at the time); Symbol and Courier were required by the operating system. Then, a team of experts was called in to choose more types: Palatino, Zapf Chancery, Avant Garde, Bookman and Century Schoolbook were picked by committee. One of the committee, Sumner Stone, told me, “In retrospect they seem pretty strange and random. … Times and Helvetica were redrawn, and with Helvetica the narrow and oblique came free because it was just an algorithm.” With only garbage to pick from, there was a visual blight of Times, Helvetica and Palatino in the early days of “desktop publishing,” which lasted well beyond their sell-by date.

My impression is that people who hate Helvetica never really looked at the original, but detest — rightfully — the lousy version that comes with computer operating systems, digitized in a hurry in the early days of PostScript. For a detailed comparison and for more information on Helvetica’s history, see the Neue Haas Grotesk feature website.

The original design of Neue Haas-Grotesk was not as square as Neue Helvetica. Also, I wouldn’t say that the “a,” “s” and “e” in Helvetica “resemble one another,” as he suggests in the following paragraphs, but rather that the “I” and “l” and the “rn” and “m” could be confused.

Of course, most lay people can’t tell one sans serif from another. When people say they prefer Helvetica to Arial because the latter is a bad copy, I ask if there’s a difference between a Big Mac and a Whopper, and, more to the point, would you honestly feed either to your kids?

Adrian Frutiger, “Mister Univers” himself, tried to improve on Helvetica with the Univer [sic] series, begun in 1954 (and he succeeded, causing the Helvetians to expand their family of weights in response), but then, in his maturer years, he turned his back on Univers to design the family that bears his own name (Frutiger, 1976).

Frutiger did not try “to improve on Helvetica.” Maybe he tried to improve the grotesque model/genre. Frutiger had begun work on Univers much earlier than Haas did with Neue Haas-Grotesk. Both typefaces were released at the same time, with all foundries knowing about the work of the others (also Bauer with Folio, released the same year, 1957). The expansion of Helvetica was not “caused” by Univers.

Comparison of four sans serifs from MyFonts

Everything about Helvetica is repellant: from its uptight aura to its smug, splendid isolation. How it persists in the face of such brilliant alternatives as Frutiger and Syntax defies logic.

It would help if the samples of each typeface showed the same text and characters, which is very easy to do on MyFonts. What a weak image to prove debatable points.

I can’t bring myself to quote the rest of the article. Read on over on Smashing Magazine.

(al)

© Indra Kupferschmid for Smashing Magazine, 2012.

Update: Hours after the publication of this article Indra Kupferschmid published an article in which she corrected some of the facts presented in the original article and provided an opposite view on the issue. We republished Indra’s article to correct the factual errors, with her permission of course. Make sure to check the corrections before reading this article.—Ed.

The other day someone sent me a link to a website with the preposterous title of “The 100 Best Typefaces of All Time”. Topping the chart was Helvetica, and that stirred my ire. I dismissed the list because it was based on marketing figures from one source, FontShop, coupled with the opinions of half a dozen mostly Berlin-based typographers, but I was still incensed.

When it comes to, say, boxers, you can handicap the various athletes in the ring and predict that Muhammad Ali would beat Jack Johnson or Jim Corbett and that, therefore, he is number one, but a lot of other factors come to bear on your decision: sentimentality, the fact that Ali is acknowledged (by people like me, with no real knowledge of the sport) to be “The Greatest”; he has name recognition, and so on. But how do you evaluate a typeface? Is it just based on its widespread use? Or its suitability to the subject at hand? Ease of reading? Familiarity?

Bust portrait of Muhammad Ali by Ira Rosenberg, from the World Journal Tribune. (Image: Library of Congress)

For Helvetica, an explanation of its history helps to explain its longevity. Most typeface designs are the result of fashion or changes in taste; some are technologically driven. When iron printing presses were introduced around 1800, sharper, crisper types such as Bodoni and Didot were created. When laser printers came along in the mid-1980s, with their bitmapped fonts, students in Holland began producing typefaces that reflected the quality of the poor printing. Letters in Studie (Eindhoven, Lecturis, 1983) shows examples by Jelle Bosma and Petr van Blokland designed on a 40-pixel grid. Emigré, an early digital type foundry, produced Oakland (1985) and other lo-res types for the market.

So, fashion and technology, which are ever evolving as they become obsolete, are as influential on type design and typography as on any other medium, from dressmaking to car design. When printing technology became so good that uniformly smooth, crisp faces were the norm, designers longed for the grit and noise found in old letterpress posters and started a fad for trashed and distressed faces. But like everything else that is fashionable, typefaces retire to await a future recall.

The art of reviving typefaces began in the Victorian era, and among the choices of contemporaries, the original Caslon is a model that has endured. In the 20th century, typeface revivals seemed to outstrip new designs. Production accelerated as two big companies, Linotype and Monotype, tussled in the field. The head of typeface development at the British Monotype Company, Stanley Morison, said, “Type today does not require inspiration so much as investigation.” He led the charge into the past with modern versions of the types Aldus (Bembo), Fournier, Bell, Walbaum and others. Linotype (under George W. Jones) countered with superior versions of Granjon (ironically named as it is the best Garamond copy of the metal era), Baskerville and Janson.

At that time, two sans-serif types introduced in the late 1920s dominated the market for advertising. These were Monotype Gill Sans and Futura, of the German Bauer foundry. Suddenly there was a rush to create, imitate or revive sans-serif types. The Berthold foundry of Berlin dusted off the matrices for its Akzidenz Grotesk (1898), while their rivals, the Haas Type Foundry of Basel, decided to rework Schelter Grotesk, which had been issued by the Leipziger Schelter & Giesecke foundry in 1880. This became Neue Haas Grotesk in 1957, which was then picked up by the Stempel foundry in Frankfurt. It wanted to identify the type with the emerging popularity of Swiss graphic design and chose the ancient Roman name of Switzerland, Helvetia, and so Helvetica was reborn in 1961.

Max Meidinger’s original 1957 design of Helvetica (from the Haas Typefoundry brochure “From Helvetica to Haas Unica,” Münchenstein, ca 1979).

The reason for the popularity of Gill Sans and Futura was that they turned their back on these Grotesks of the 19th century, which were worn out. Eric Gill took a new approach: pen-made humanist calligraphy was the basis for his type (he had also worked on the drawings for the London Underground alphabet with his mentor, Edward Johnston). These letters made more coherent word shapes and were easier to read than Grotesks. But Gill’s type standardized the distinct curled-tail “l” and shed-roofed figure “1” of Johnston’s design, which led to confusion with the capital “I” (a problem in many sans serifs).

The third (digital) version of Edward Johnston’s proprietary London Underground typeface, photographed on the Piccadilly Line in 1983.

Paul Renner’s Futura was designed to reflect the new machine age, with simple geometric shapes, straight lines and circles that gave it a cool Art Deco elegance. Both types are now imbued with a lot of cultural baggage, so Gill suggests the British Broadcasting Corporation and Futura has become nostalgic shorthand for the era of streamlining.

Paul Renner’s Futura Light, 1928, from a Bauer type foundry brochure (New York, ca 1930)

But in the 1930s, these two types were immensely popular in Europe and North America, and the other founders had to respond quickly. Returning to the 19th century should have been out of the question for the competition, except that the German foundries had been flattened in the Second World War and were slow to retool.

Helvetica became a national brand, an identity for the popular “Swiss style” of typography of Emil Ruder and Armin Hofmann, which quickly spread as their well-indoctrinated students took the new look back to Yale and other American schools. From BMW, Bayer and Lufthansa in Germany, the Helvetica look spread to Bank of America, Knoll, Panasonic, Target, Crate&Barrel, JC Penney, Mattel, American Airlines, Sears, Microsoft and other corporations.

In the late ’90s Microsoft was selling a million copies of Word each month and gave away 14 fonts with its program. Its knock-off of Helvetica is called Arial. Linotype had taken over Stempel, and then Haas, and so consolidated its ownership of Helvetica and many of the clones. The stark sans-serif look that had first symbolized revolution in the hands of Russian typographers in 1917 became institutionalized as the bland face of corporate smugness.

Swiss-style poster for the Pratt Institute, Brooklyn, New York, 1972. (Courtesy of Frances Butler)

As it spread over the graphic landscape like melted runny processed cheese, I suggested renaming it Velveetica. Its blandness and general horridness oozed out on all sides. It was neutral, but also tasteless and was taking over typography. Nothing could stop it as designers unquestioningly copied one another in adopting it. The idea that it was more modern than Gill Sans or Futura has more holes in it than Swiss cheese.

A card advertising Helvetica filmsetting (Bauer Alphabets, New York, no date)

After the adoption of the Swiss style internationally, another event caused the persistence of Helvetica: the arrival of the personal computer. Apple could fit only a few types into the memory of its LaserWriter printer driver. Times and Helvetica were decided by executive fiat (based on their popularity at the time); Symbol and Courier were required by the operating system. Then, a team of experts was called in to choose more types: Palatino, Zapf Chancery, Avant Garde, Bookman and Century Schoolbook were picked by committee. One of the committee, Sumner Stone, told me, “In retrospect they seem pretty strange and random. … Times and Helvetica were redrawn, and with Helvetica the narrow and oblique came free because it was just an algorithm.” With only garbage to pick from, there was a visual blight of Times, Helvetica and Palatino in the early days of “desktop publishing,” which lasted well beyond their sell-by date.

Helvetica brochure Frankfurt (D Stempel AG, no date)

Speaking of which, the US government (which uses Helvetica for tax forms and other official printed matter) specified it for “generic packaging” in (wouldn’t you guess?) 1984 (see top of page). Everyone blindly accepts Helvetica, most of them we assume because they follow leaders like lemmings, but why do they extoll its worth? Is it a great international hoodwinking conspiracy, like the Emperor’s New Clothes?

In 1993, Robert Norton, who was a Microsoft bagman, invited prominent people in the field of typography to contribute to a book entitled Types Best Remembered / Types Best Forgotten (London & Kirkland, Washington, Parsimony Press) and write about their favorite and least favorite typefaces.

Peter Karow (who created the Ikarus program for type digitization) wrote about Helvetica: how he had digitized it in various clones throughout the 1970s and 1980s as competing companies put out their own similar versions. It was his favorite, it seems, but with reservations. In 1993, he relates, Stefan Rögener told him that “90% of creative directors use Helvetica, Futura, Garamond and Baskerville. Give me a pistol!”

The Ikarus program allowed designers to alter their Bembo clone into a Helvetica clone, although why would they? (From “Ikarus for Typefaces in Digital Form” by Peter Karow, URW Unternehmensberatung Karow Rubow Weber GHBH, Hamburg, 1983)

I took the opportunity to name Helvetica my least favorite type and wrote a reasoned (I thought) explanation of why it is not a good typeface: “The letters are square and squat and don’t communicate with their neighbors. … There is more internal space in the counters than around the words, creating ugly and standoffish silhouettes.” The point I was making is that, to operate legibly, words have to have a visual balance between internal and external white space, a kind of aerodynamic flow. It’s a physical fact, and types like Syntax or Frutiger work far better than Helvetica, which remains self-enclosed and constipated-looking.

Legibility operates not at the level of characters but of ideational units. Adults read clusters of letters, such as “the,” as a single unit, or their brains group clusters of characters to speed comprehension. The better these units cohere, the more legible they will be (assuming that speed and comprehension are goals). Typefaces that have many characters that resemble one another (such as “a” “s” and “e” in Helvetica) impede the reader, as does the fact that the enclosed letter shapes prevent them from fusing to make more cohesive units. These are scientifically established aspects of letterform design and should take Helvetica out of the equation for anyone looking to create a legible message. Communication is a science and doesn’t really have much to do with aesthetics, other than the reader’s comfort via familiarity.

Static versus dynamic letterforms

In this illustration from “Syntax-Antiqua, eine serifenlose Linearschrift auf neuer Basis (Syntax, a Sans Serif on a New Basis)” (Gebrauchsgraphik, 1970), Erich Schulz-Anker (Manager of Typographic Development at D Stempel AG) contrasts the mechanical Didone-Helvetica development with a humanist line running from Garaldes (i.e. Sabon) to Syntax, designed by Hans Eduard Meier and released by Stempel in 1969. He contrasts them as “static” versus “dynamic” forms. I would further characterize them as illegible versus legible forms. See how the letters on the left stand apart and isolated from one another, while those in the dynamic group relate to their neighbors.

Of course, most lay people can’t tell one sans serif from another. When people say they prefer Helvetica to Arial because the latter is a bad copy, I ask if there’s a difference between a Big Mac and a Whopper, and, more to the point, would you honestly feed either to your kids?

Adrian Frutiger, “Mister Univers” himself, tried to improve on Helvetica with the Univer series, begun in 1954 (and he succeeded, causing the Helvetians to expand their family of weights in response), but then, in his maturer years, he turned his back on Univers to design the family that bears his own name (Frutiger, 1976). With the Internet, Helvetica has retrenched and, despite the Arial clone that mimics it (see “The Scourge of Arial” by Mark Simonson), gotten new legs as a font that stays the same cross-platform. If you use any Adobe product, you cannot avoid Helvetica.

Comparison of four sans serifs from “My Fonts”

Everything about Helvetica is repellant: from its uptight aura to its smug, splendid isolation. How it persists in the face of such brilliant alternatives as Frutiger and Syntax defies logic.

Mike Parker, who oversaw production of Helvetica at Linotype, wrote, “In the sixties by cutting it for the Linotype we made Helvetica the Swiss sans serif of choice across most of the world.” But, he adds ruefully (in Types Best Forgotten), “Never again should we have to endure quite such dulling repetition of any single design.”

First showing of American Helvetica (Mergenthaler Linotype, New York, no date)

I sincerely believe that people (even designers) who say Helvetica is legible are simply confused. It’s pervasive, certainly. We see it everywhere — that’s why we think we can read Helvetica — but it is not nearly as legible as, say, Frutiger or Syntax, for the reasons I have stated above. Syntax is not merely a legible typeface: Syntax is beautiful, it’s sublime, it sings. Well, you argue, Helvetica is neutral. Yes, Helvetica is neutral, but it also symbolizes blandness and conformity and… well, sorry Swiss people, boredom.

Helvetica-Kursiv flyer from D Stempel advertising Linotype-Matrizen in 6 to 10 point (Frankfurt, no date)

In 2007, Gary Hustwit made a documentary film about the typeface in which various talking heads exuded enthusiasm for the wretched mess that is Helvetica. The corporations have agreed, and the bland new world feared by Huxley, Orwell and other writers of the last century is one step nearer.

(al)

© Alastair Johnston for Smashing Magazine, 2012.

The Industrial Revolution gave us a new iron age, one of cast iron, which a devotee of Vulcan told me he thought was the highest achievement of man — or, as he put it, “the hairless ape.” In the 18th cent…