Typographica

TYPOGRAPHICA DECEMBER 2012

TYPOGRAPHY & DESIGN MAGAZINE

TYPOGRAPHISCHE GESTALTUNG

$4.99 US $5.99 CA

TYPOGRAPHY MANIA PERFECT PARAGRAPH TYPOGRAPHY MATTERS

MESSAGE FROM THE EDITOR

W

elcome to the inaugural edition of Typographica Magazine. Let me give you a big “Thank You” for giving your time to read over the information we have provided.

We believe design is the essential tool for helping people connect and communicate effectively. Much of design critique is focused on photography and other graphics. It’s time to shed light on the most basic element of communication: the typography. This is where Typographica was born. We’ll catalog and examine real-world typography wherever it appears branding, advertising, signage, packaging, publications, in print and online with an emphasis on the typography.

It all begins with this first issue. With a regularly updated collection of case studies and trend reports. We’ve invited experts from various fields to comment on how type is used and misused in graphic design today. In our first issue, we will introduce the basics of typography and especially typeface selection plays a central role in design.

The rationale behind the design and layout of the publication is to show simplicity and easy to understand. We want our message to be clear and comprehendible.

Thank you for joining us in this monumental occasion, we hope to hear from you in the future.

Temo Morales Editor

CREATIVES Meet the talented designers behind this month’s issue of Typographica.

Temo Morales

Publisher, Editor, Designer

Valerie Pingley

Writer, Copy Editor

Feature Authors: Typography Matters: Perfect Paragraph: Typographische:

Thomas Phinney

Typography Mania: Typography Course:

Paulo Canabarro

Heydon Pickering Richard B. Doubleday

Denise Bosler

Core Contributors: Design:

Tasha Bannon, Erick Morales, Micah Johnston

Photography:

Stephanie Morales, Taylor Fleeman, Rena Tom

Additional Contributors: Correy Baldwin Christina Crook Brandon Bonwell Cynthia Pingley Rick Desutter Kyle Morales

Information: www.typographica.com

Shauna Alterio Vinciane De Pape Brooke Fraser Michael Guy Chislette Jad Gilles Brian Houston

Jon Eagan Chris Tomlin Matt Pacco Brenton Clarke Darlene Zschech Jeffrey Kunde

Typographica

morales@typographica.com

204-100, 7th Ave SW Los Angeles, CA 95014 408.996.1010

subscription@typographica.com ads@typographica.com wholesale@typographica.com

4 Typographica

Cody Smalls Daniel Carson Matt Tennikoff Justin Loose Daniel Bustamante Marco Barrientos

TABLE OF CONTENT

TYPOGRAPHISCHE GESTALTUNG By the time he arrived in Switzerland in1933, Jan Tschichold (1902-1974) had established himself as the chief spokesman and leading practitioner of the New Typography. He had already expounded on asymmetric layout, sans serif typography, and constructivist typographic methods in his 1925 article Elementare Typographie(Elemental Typography) and in his first book, Die neue Typographie, published in 1928.

PAGE 22

Typography The Perfect Matters Paragraph

Typography Typography Mania Course

If you are a designer who cares about typography, you regularly try to explain to somebody whether a client or someone why anybody should care about typography.

In this article, I’d like to reacquaint you with the humble workhorse of communication that is the paragraph. Paragraphs are everywhere. At the high risk of stating the obvious.

Typography Mania is the beginning of a monthly post series that comes around every issue of Typographica with the best of Typography design works on the web, from type videos to images.

PAGE 8

PAGE 14

PAGE 31

5 Typographica

We all have epiphanies in our design careers, like when we suddenly understand why we need those typographic theories a former professor was trying to teach us.

PAGE 38

HOW TO EXPLAIN WHY

TYPOGRAPHY MATTERS

If you are a designer who cares about typography, odds are that you regularly try to explain to somebody whether a client or someone at a party why anybody should care about typography. Web designers are beginning to face these same questions that have long plagued graphic designers, thanks to new Web technologies such as @font-face and CSS3 typography features.

Why care about typography and fonts at all? The branding argument is an easy one to make. The brand is the unique personality that identifies a product, service, person or place. Design gives us the visual instantiation of a brand. The selection of typefaces and the arrangement of them can be as important as the use of color, images or abstract graphics in creating a brand, and this is usually easy to explain. But wait, your client says,

In the past decade, awareness of fonts and typography has become a bigger part of mainstream culture than “I already have a logo. Why worry about fonts and it once was, thanks to such things as Gary Hustwit’s typography everywhere else?” documentary film Helvetica, frequent news coverage of people who hate Comic Sans and type designer New York-based designer James Puckett had a Matthew Carter winning a MacArthur “genius” grant. great explanation when we discussed the issue on But all too often one is met with a blank look and/ Typophile.com: “I always tell people that the difference or confusion as to why anyone would bother about between good typography and [bad typography] is such things. Having encountered this regularly in my the difference between work that looks professional professional career as a typographer, I thought I’d and work that looks like someone threw it together in share some of the ideas, arguments and information MS Word. One reason Apple’s stores look so good is the I’ve marshaled over the years: explaining branding, careful and consistent application of [the typeface] analogies about film, fashion and furniture, and Myriad. But kmart’s careless mashup of Helvetica, Gill summarizing recent research.

Sans, News Gothic and Gotham looks like, well, kmart.”

S

o being consistent is good, but why not just be consistent with Times or Courier? Why do people keep designing new fonts anyway, don’t we have enough already? Hasn’t everything already been invented by now?

Typography is like fashion, or furniture. With rare functional exceptions, the world doesn’t “need” new clothing or furniture designs, but people want to look different or evoke a particular feeling or fit with a particular “look,” and there are trends and styles. While true innovation is rare, people consistently come up with variations on existing themes, or combine existing elements in new ways, whether in type design, clothing or furniture.

The kinds of clothing designs we see on Paris runways are usually the fashion equivalent of display typography— usable only in narrow situations, creating a memorable style that communicates quite strongly. Everyday clothing styles are a different matter, communicating more subtly, like body text choices in typography.

I like to use fashion and furniture analogies for another reason: Typefaces, too, are artifacts that can be aesthetically pleasing and functional at the same time. A great chair is not only visually attractive, but comfortable to sit in; a great typeface can be pleasing to the eye, and perform other functions as well, such as being legible for printing a newspaper, or on screen at body text sizes. Like furniture and clothing design, type design is a craft, blending art and science.

“ Sure,

that’s all very well, but I hardly notice the difference between this Aerial and Gill Sans, and I’m sure my customers won’t either. Same with all these fancy features you talk about, like ligatures and oldfashioned numbers.”

It would be great to answer this objection by quoting differences in reading speed and comprehension from good typography. But it turns out that even aesthetically unappealing choices rarely make a difference in those kinds of objective measures. One has to go to serious extremes to have a major impact on such variables.

Even so, as psychiatrist/philosopher Paul Watzlawick said, “One cannot not communicate.” Applied to typography, this suggests that even using system fonts and default settings in Microsoft Word is a choice that has an effect.

Viewers don’t have to be consciously aware of the details to experience the collective impact of typography. Even if the effective communication of the typography is “this is a typical office document.”

That is a statement in itself, and one that can matter— particularly if the desired communication is “this is a menu from a fun restaurant.”

Once clients or acquaintances are convinced that typography matters, often they want to do things that we might consider, well, cheesy. Or at least excessive. In an online discussion, Italian designer Andrea de Franco observed, “There’s a general urge for something that shouts the communication as loud as possible, confusing accessibility and clarity with mere visual pollution.” Of course, there is a place for evocative typography, but unless one is being deliberately campy, there are limits.

So how does typography communicate without people noticing typography? It’s like watching a film: The average movie-goer knows little or nothing about camera movement and film editing, and rarely consciously notices these things, yet directors can still affect viewers by using these techniques. Similarly, people can be affected by good typography without being actively aware of it.

“ Yet if good typography doesn’t affect reading speed or comprehension, what difference does it make, and how do we know?”

More sophisticated research techniques are beginning to show how good typography affects a reader’s mood and even performance on other tasks. Microsoft may not have a great rep with creative professionals, but they deserve props for having Kevin Larson, a cognitive psychologist on staff who focuses solely on reading, fonts and typography. Microsoft sponsors all sorts of research in this area by Larson and others, notably the set of studies by Larson, Hazlett, Chaparro and Picard published as “Measuring the Aesthetics of Reading,” results of which were first presented at the ATypI conference in Helsinki in 2005, and later published in 2006.

In short, they found two ways to measure the impact of good versus bad typography. One was “reduced activation in the corrugator muscle” (people frowned less), and the other was improved performance on creative cognitive tasks tackled after reading.

Again, this was with documents that did not produce differences in reading speed or comprehension.

9 Typographica

Photo by Layla Blackshear

“Even subtle differences in typography, such as appropriate small caps, old style figures, kerning and ligatures can measurably affect how people react to a document, as shown in this experiment�

by Larson et Until not long ago, most research on typography, and especially research on legibility in type design, was lacking. Luckily, there is a whole new wave of psychologists and typographers doing serious experimental research on the effects of good typography, and even what constitutes good typography or legible typeface design, and doing it in ways that are not leading to ridicule from typographers and type designers. Sofie Beier, for her PhD at the Royal College of Art in London, has done some fabulous research (published as a paper with Larson in Information Design Journal, 2010) on designing letterforms for legibility. Cognitive psychologist Dawn Shaikh, who has an extensive background in typography and legibility research, is now a user experience researcher at Google.

Other Micosoft-sponsored research looks at new ways of measuring eye fatigue during reading, which also seems likely to show dividends from good typography.

The orbicularis oculi is the big muscle around the eye that we use for blinking and squinting, and hooking sensors up to it during reading allows measurement of what we might think of as eyestrain. Initial results from this line of research tell us that black on white text is more legible than gray on gray, and also that twelve point text is usually better than nine point. I like to cite these points because they support my own prolegibility prejudices, but I will be the first to note that they do not necessarily mesh with current typographic fashion, especially in Web design.

Orbicularis research not withstanding, as best as we can tell, most of what passes for typographic wisdom has a strong basis, not only in the tradition and culture of typography and design, but even in recent science.

Many years ago I found it frustrating to justify why typography matters, but today I relish it.

10 Typographica

THE PERFECT

PARAGRAPH

by Heydon Pickering

In this article, I’d like to reacquaint you with the humble workhorse of communication that is the paragraph. Paragraphs are everywhere. In fact, at the high risk of stating the obvious, you are reading one now. Despite their ubiquity, we frequently neglect their presentation. This is a mistake.

Here, we’ll refer to some time-honored typesetting conventions, with an emphasis on readability, and offer guidance on adapting them effectively for devices and screens. We’ll see that the ability to embed fonts with @ font-face is not by itself a solution to all of our typographic challenges.

WEB OF WORDS In 1992, Tim Berners-Lee circulated a document titled “HTML Tags,” which outlined just 20 tags, many of which are now obsolete or have taken other forms. The first surviving tag to be defined in the document, after the crucial anchor tag, is the paragraph tag. It wasn’t until 1993 that a discussion emerged on the proposed image tag.

Bursting with imagery, motion, interaction and distraction though it is, today’s World Wide Web is still primarily a conduit for textual information. In HTML5, the focus on writing and authorship is more pronounced than ever. It’s evident in the very way that new elements such as article and aside are named. HTML5 asks us to treat the HTML document more as… well, a document.

It’s not just the specifications that are changing, either.

Much has been made of permutations to Google’s algorithms, which are beginning to favor better written, more authoritative content (and making work for the growing content strategy industry). Google’s bots are now charged with asking questions like, “Was the article edited well, or does it appear sloppy or hastily produced?” and “Does this article provide a complete or comprehensive description of the topic?,” the sorts of questions one might expect to be posed by an earnest college professor.

This increased support for quality writing, allied with the book-like convenience and tactility of smartphones and tablets, means there has never been a better time for reading online. The remaining task is to make the writing itself a joy to read.

THE PERFECT PARAGRAPH

As a young industry that champions innovation and rates its practitioners based on their ability to apprehend (sorry, “grok”) the continual emergence of new technologies, frameworks, protocols and data models, we are not particularly familiar with tradition. However, the practice of arranging type for optimal pleasure and comfort is a centuries-old discipline. As long ago as 1927, the noted typographer Jan Tschichold spoke of the typesetting “methods and rules upon which it is impossible to improve” — a set of rules it would be foolish to ignore.

So, please put your canvas element and data visualization API to one side just for a short while. We are about to spend a little time brushing up on our typesetting skills. It’s called “hypertext,” after all.

SETTING YOUR PARAGRAPHS THE TYPEFACE Your choice of font is important, but the kind of “family” you choose is project-specific, and we won’t discuss it here except to make one point: the conventional wisdom among Web designers that only sans-serif fonts are suitable for body text is just a rule of thumb. Although serif fonts, with their greater complexity, may tend to be less effective at small sizes, there are many other factors to consider. A diminutive x-height, for example, could impair the readability of a font from either camp. Some serif fonts are highly legible and attractive for paragraph text if they are set properly. Matthew Carter’s screensympathetic Georgia is a case in point. Having dispensed with the subject of preference, let’s cover some important technical issues relating to one’s choice of typeface.

As designers, we are frequently and incorrectly reminded that our job is to “make things pretty.” We are indeed designers not artists and there is no place for formalism in good design. Web design has a function, and that function is to communicate the message for which the Web page was conceived. The medium is not the message.

Never is this principle more pertinent than when dealing with type, the bread and butter of Web-borne communication.

A well-set paragraph of text is not supposed to wow the reader; the wowing should be left to the idea or observation for which the paragraph is a vehicle. The perfect paragraph is unassuming to the point of near invisibility. That is not to say that the appearance of your text should have no appeal at all. On the contrary: well balanced, comfortably read typography is a thing of beauty; just not the arresting sort of beauty that might distract you from reading.

Image: Marcin Wichary

15 Typographica

I personally don’t like Bitstream, but it is fully functional for paragraph text.

Slightly unsatisfactory hinting for the Crimson Roman style.

@font-face { font-family: ‘MyWebfont’; /* Change this to whatever you like. */ src: url(‘mywebfontregular.ttf’) format(‘truetype’); /* The “regular” font resource. */ font-style: normal; /* Associates values of “normal” with this resource. */ font-weight: normal; /* As above for weight. */ } @font-face { font-family: ‘MyWebfont’; /* Importantly, the same as in the above block; the family name. */ src: url(‘mywebfontitalic.ttf’) format(‘truetype’); font-style: italic; /* Associates values of “italic” with this resource. */ font-weight: normal; /* ... It’s not a bold-italic font style. */ } body { font-family:’MyWebfont’, georgia, serif; /* Provides a system font fallback. */ } em { font-style: italic; /* If @font-face is supported, the italic Web font is used. If not, the italic Georgia style is lifted from the user’s computer. Either way, a faux style is not allowed to creep in. */ }

X-height is the distance between the baseline and midline a measure of lowercase character height. (Image: adactio)

The first thing to consider when choosing a Web font (read: @font-face font) is the breadth of the family. Does the font include all of the necessary bold, italic (or even better, semi-bold and bold-italic) styles? One style is fine for headings, but paragraphs need greater variety. Without these variations at your disposal, not only will your text look insipid, but the lack of proper emphasis will make your writing difficult to follow.

With the full gamut of stylistic variations at your disposal, you will not have to rely on the unsatisfactory “faux” styles that are applied to a regular font when font-style: italic or font-weight: bold is called. Typefaces are not designed to be contorted in this way. Using the proper styles provided by a family like Bitstream will make your typography not only more attractive but more accessible: dedicated italic glyphs have a much clearer intent than text that is simply “leaned over a bit.”

The trick is to make sure that the declaration of, for example, font-style: italic requests the italic resource rather than triggers the faux style. It should be as effortless as using a system font family such as Georgia. This is probably best explained, like so many things, in commented code. For brevity, we’ll set up just a regular font and an italic (not bold) style variation.

Our second typeface consideration relates to rendering.

Some fonts, replete with beautiful glyphs and exceptional kerning as they may be, simply don’t render very well at small sizes. You will have noticed that embedded fonts are often reserved for headings, while system fonts are relied on for body text.

One of the advantages of Verdana is that it is a “wellhinted” font. Delta hinting is the provision of information within a font that specifically enhances the way it renders at small sizes on screen. The smaller the font, the fewer the pixels that make up individual glyphs, requiring intelligent reconfiguration to keep the font legible. It’s an art that should be familiar to any Web designer who’s ever tried to make tiny icons comprehensible.

Hinting is a tricky and time-consuming process, and not many Web fonts are hinted comprehensively. Note the congealed upper portion of the bowl in the lowercase “b” in the otherwise impressive Crimson font, for instance. This small unfortunate glitch is distracting and slightly detracts from a comfortable reading experience. The effect is illustrated below and can be seen in context as a demo.

16 Typographica

The good news is that, as font embedding becomes more commonplace, font designers are increasingly taking care of rendering and are supplying ever better hinting instructions.

Typekit itself has even intervened by manually re-hinting popular fonts such as Museo. Your best bet is to view onpage demonstrations of the fonts you are considering, to see how well they turn out. Save time by avoiding, sight unseen, any fonts with the words “thin” or “narrow” in their names.

FONT SIZE & MEASURE As a recent Smashing Magazine article compellingly attests, you put serious pressure on readability by venturing below a 16-pixel font size for paragraph text. All popular browsers render text at 16 pixels by default. This is a good enough indication (given the notorious tendency among browser makers to disagree) that 16 pixels is a clear standard. What is more, the standard is given credence by an equivalent convention in print typography, as the article points out.

We often express 16px as 100% in the declaration block for the body in our CSS reset style sheets. This makes perfect sense, because it is like saying, “100% the same as the browser would have chosen for you.” If you want the paragraph text to be bigger than 16 pixels, just edit this value in the body block using a percentage value that equates to a “whole pixel.” Why whole pixels? Two reasons.

First, whole numbers are less ungainly and are easier to use as multipliers in style sheets. Secondly, browsers tend to round “sub-pixel” values differently, giving inconsistent results. An 18-pixel font size expressed as a percentage is 112.5% (1.125 × 16).

Normalizing the size of default text (or “paragraph text,” if you’re being good and semantic) in such a way is extremely important because it sets us up to use ems as a multiplier for the size of surrounding headings and other textual elements.

For instance, to render an h3 heading at 1.5 times the font size of the paragraph, we should give it the value of 1.5em.

Because ems (pronounced as in “Emma,” not E.M. Forster) are relative units, they change according to the default font size. This makes it much easier to maintain style sheets and, more pertinently, ensures that the perceived importance of headings is not increased or diminished by adjusting the size of the paragraph text.

The “measure” is the number of characters in a line of text.

Choosing a comfortable measure is important for usability, because if lines are too long, then scanning back to find the start of the next line can be awkward. Without conscious effort, the reader might miss or reread lines. In The Elements of Typographic Style, Robert Bringhurst puts a good measure at somewhere between 45 and 75 characters. It is the main reason why we use the max-width property when designing elastic layouts.

Whatever your page’s ideal maximum width, it is likely much narrower than what you are used to seeing. According to an in-depth study of typographic design patterns published on Smashing Magazine, the average website exhibits a measure of 88.74 characters, exceeding the optimal range.

LEADING & VERTICAL RHYTHM Leading (pronounced “ledding”) is the spacing between consecutive lines of text. Leading has a similar impact on readability as “measure,” because it helps to define and demarcate the rows of glyphs that one must traverse from left to right and back again. The trick with leading is to avoid adding too much: text with lines that are too far apart appears fragmented, and the intent of a judicious use of leading is undone by a negative result.

In mechanical typesetting, leading was set by inserting strips of lead metal (hence the pronunciation) between lines. In CSS, the line-height property is the tool we use, and exposure to it is much less likely to make you go mad.

Instead of accounting for space between lines, as with leading, line-height is a vertical measure of the whole line including the text itself and any spacing to follow. There are three ways to set it: the wrong way, the redundant way and the right way.

Image: andrechinn

17 Typographica

The wrong way to set line-height is in pixels. By introducing an absolute value, we would undo all of the good work from the previous section. As the font-size increases (either in the style sheet or the user’s browser settings), the line-height would persist. This produces an interesting effect:

Absolute and relative values do not mix.

So, should we use the same em multipliers that we saw in the last section? This is the redundant way. Although the method would work, providing an em unit is not necessary.

Rather, a value of 1.5 for the line-height that is 1.5 times that of the font size will suffice. The line-height property belongs to an exclusive club of CSS properties that accept unit-less numeric values.

The benefits of vertical rhythm to readability are much subtler than those of hinting, measure or leading, but they are still important. Vertical rhythm gives the page decorum. Because we have made sure so far that all of our measurements are co-dependent and relative, altering the font size for the body (all the way up at the top of the cascade) will not damage the page’s vertical rhythm.

It is worth noting that, although a line height of 1.5 is fairly dependable, not all fonts are made equal. Fonts with a tall x-height or long descenders might benefit from more generous, separative leading. When basic readability is at stake, adopting a more complex vertical rhythm algorithm is worth it.

WORD SPACING & JUSTIFICATION Without intervention, paragraph text on Web pages is set “ragged right” (text-align: left in CSS): the start of each line is flush with the left margin, but the lengths of the lines vary, giving an uneven “ragged” effect on the right side. If you’re like me, you prefer the tidiness of full justification (illustrated below). But implementing justification without impairing readability is not as straightforward in HTML as it is by using desktop-publishing software.

p { font-size:; /* Silence is golden; implicity 1em. */ line-height: 1.5; } The attentive among you will have noticed that so far I have only mentioned font sizes that are even numbers. The reason is that I favor a line height of 1.5. A font size of 18 pixels means lines with a height of 27 pixels or, if you prefer, lead strips that are 9 pixels thick. Using even numbers is another bid to maintain whole pixel values . I know that any even number multiplied by 1.5 will result in a whole number. A line-height stated in whole pixels is particularly important, because it is the key value used to achieve “vertical rhythm.”

Maintaining vertical rhythm (or composing to a baseline grid) is the practice of making sure that the height of each textual element on the page (including lists, headings and block quotes) is divisible by a common number. This common number (the single beat in a series of musical bars, if you will) is typically derived from the height of one paragraph line. You should be able to see by now why an impossible value like 26.5 pixels would be a mistake for such an integral measure.

Fully justified text necessitates, arguably, a narrower measure than text set ragged right.

The problem with justified text in HTML (text-align: justify) is word spacing. In print media (such as newspapers), hyphenation is used to break up long words. This results in more components (words or part words) per line, thus improving distribution and curbing aggressive word spacing. Browsers do not hyphenate automatically, and the soft hyphen (­) is implemented inconsistently.

Besides, imagine having to manually insert ­ all the way through your copy. CSS3’s text-justify property, which aims to give us more control over text-align: justify, could ease the problem by enabling inter-character distribution.

Bizarrely, it is currently available only with Internet Explorer.

18 Typographica

Thankfully, Firefox and Safari now support the CSS3 property hyphens, which can automatically insert hyphens much as you would manually with ­. In fact, you can revert to manual hyphenation in a document set to hyphens: auto by using the hyphens: manual override. Browser prefixes are required, but Lea Verou can help you with that.

Until the other browsers catch up, a consistent cross-browser solution is currently possible only with JavaScript. Hyphenator. js is a powerful tool that takes a library of syllabic patterns specific to each language and uses them to dynamically insert soft hyphens in the correct places. It is a bit pricey (two scripts at a total of 72 KB uncompressed just for the English implementation), but it does work. Its effect is shown in the first screenshot for this section.

Let’s use indentation as an introductory example. Although less common in Web typography than in print, indenting the first line of each paragraph is a conventional method of grouping paragraphs into chunks of information. In terms of rhythm, it is also a sort of punctuation: the reader is invited to pause briefly before each paragraph. Because no indentation is required for the first paragraph why pause before we’ve even started? We should exclude this paragraph from our CSS rule. Using the adjacent sibling combinator, we are able to target only paragraphs with a preceding paragraph, and so the convention that has been familiar to book typography over the centuries is ably reproduced.

FINISHING TOUCHES STYLING CONTEXTUALLY Now that we have dealt with the important business of sizing, setting and distributing our paragraphs compellingly, you may wish to apply a few small enhancements and decorations for the purpose of signposting the document.

These nuances concern only certain paragraphs, and choosing which paragraphs to set off is a question of context.

With the help of special selectors and combinators, we are able to target specific paragraphs depending on where they appear on the page, making sure that the difference in their design is consistent with their intended role and meaning.

Paragraphs separated with a margin do not require indentation.

The beauty of adding these refinements (many more of which are demonstrated by Jon Tan, including “drop caps” and “outdents”) contextually is that they are activated only when semantically meaningful and appropriate. For instance, our :first-letter style above is appropriate only for introductory copy. Because the introductory paragraph is always (in this particular schema) preceded by an h1 heading, we have a way to bind its style to its particular role in the document’s flow. In other words, we can honor its meaning through its design.

As long as we rigorously adhere to semantic HTML, we can employ many nuances that are impervious to both the rearrangement of the page itself and the introduction of dynamic content.

CONCLUSION Walking down an aisle in a library, I no more than glance at the vast majority of books shelved on either side of me. Only a madman would suggest that my disregard of these books should sanction their pages being torn out. Nonetheless, because research has shown that visitors don’t read the average Web page in full, and because the “success” of a page is more easily measured by user action than cognition, we are often encouraged to marginalize our writing in favor of visual signifiers or action cues. Most people will “bounce” your content, but if you really have something to say, don’t alienate the people who are willing to give your writing a chance. Good typography does justice to your words, and good wording does justice to your ideas. If readers are comfortable reading your type, then they will more likely be comfortable with what you are writing about.

JAN TSCHICHOLD’S

TYPOGRAPHISCHE GESTALTUNG

by RICHARD B. DOUBLEDAY

Opposite page left: Following the recommendations he set forth in Typographische Gestaltung, Tschichold designed a simple and clear layout for the book’s jacket, mixing bold Egyptian (City Medium) with Roman type.

(Bodoni).

right: The Book’s cover is bound in the blue linen with a paper label on the rounded spine printed in the red and black bold type.

Tschichold maintains a consistent typographic treatment on the book’s cover, jacket, and title page.

This page left: In this title page, Tschichold uses ‘type mixtures’ as advocated in Typographische Gestaltung. right: Copyright page and table of contents show asymmetric balance and a generous use of white space.

B

y the time he arrived in Switzerland in1933, Jan Tschichold (1902-1974) had established himself as the chief spokesman and leading practitioner of the New Typography. He had already expounded on asymmetric layout, sans serif typography, and constructivist typographic methods in his 1925 article Elementare Typographie(Elemental Typography) and in his first book, Die neue Typographie (The New Typography), published in 1928. In early 1933, Tschichold, was arrested in Munich shortly after the Nazis came to power. The Nazis placed Tschichold into “protective custody” and labeled him “cultural Bolschevik” for the supposed communist tendencies in his writings and his association with the Bildungsverband der Deutschen Buchdrucker (Educational association of the German printing trade union). Tschichold and his wife Edith fled Munich with their four-yearold son Peter and immigrated to Switzerland. At the urging of design journalist Hans Eckstein (1898-1986), who described Tschichold’s situation in the Swiss newspapers Neue Zürcher Zeitung and the National Zeitung, Dr. Hermann Kienzle, Director of the Basel Allgemeine Gewerbeschule (School of Arts and Crafts) in Switzerland offered Tschichold a teaching position at the school and work as a typographer a halfday per week with the publishing house and printing firm Benno Schwabe.

In 1935, two years after his arrival in Switzerland, Tschichold published Typographische Gestaltung (Typographic Design), a definitive writing on modernist graphic design. With Typographische Gestaltung, Tschichold stayed true to his belief in modernist principles and conveyed to his readers the value and importance of asymmetric typography to modern visual communications.

The book illustrates in great detail the application of asymmetrical typographic design for designers and compositors working in the printing trade, and presents numerous reproductions of book layout and examples of 20th century avant-garde modernist design.

Tschichold set forth, in this landmark book, his further refined aims to the revolutionary “New Typography”, which he had established in his earlier writings on modernist typography. Even though Tschichold expands to a greater extent upon the New Typography as a movement, he also states, possibly as a hint of what was to come, that the carefully chosen use of traditional types when contrasted with sans serif not only enhanced the effect of sans, but was useful in modern typography when the rules of the New Typography were obeyed. Tschichold noted, “The most important of the classic types are: Old-face roman: Bembo (Monotype), Garamond, Caslon, Baskerville, Modern roman: Bodoni, Walbaum, Didot, Fat Face; Black letter: Old Black, Fleischmann Dutch Black letter, Schwabacher.”1 Typographische Gestaltung was intended as a “how to guide” for typographers applying the principles of asymmetric typography and set forth minute typographical details for the planning of books for the printing trade. The bulk of the book served as a reference manual for designers and compositors and outlined the use of typefaces, hand and machine composition, line lengths and grouping, indenting of paragraphs, headings and type mixtures. The publication also included a concise overview of tables, rules, colors, paper, posters, and the use of abstract art, photography and drawings. The book’s format is divided into several sections, beginning with a historical survey, continuing with a statement of the meaning and aims of the “new” or functional typography, and ending with an examination of the visual harmony of the book as a whole.

24 Typographica

Row 1 left: The right-hand page depicts a cover of an annual report for the Basel Gewerbeschule and Gewerbemuseum.

right: Tinted photography, as shown on the right-hand page was a new and unusual idea at the time. Here, the title is set in Futura, a geometric sans serif typeface designed by Paul Renner for the Bauer foundry in Germany.

Row 2 left: The left-hand page shows a German publisher’s postcard. This unique example shows a careful mixing of bold Egyptian, serif italic, and serif Roman.

right: The right-hand page depicts examples of abstract asymmetric arrangements of basic shapes. Tschichold explained that all typography is an arrangement of elements in two dimensions and he emphasized the space between typographic elements as an important function of design.

Row 3 left: Tschichold recommended the use of photography in combination with typography as an alternative to using only typography. In this example, a catalog cover designed by Max Bill, the band of typography was placed on top of the page to anchor the page. The combination of photography and drawing creates a striking sense of depth.

right: The right-hand page shows a 1924 advertisement for Pelikan carbon paper designed by El Lissitzky.

Typographische Gestaltung continues to elaborate on the principles Tschichold advocated in Die neue Typographie, but is much less dogmatic on the virtues of the New Typography and asymmetrical design. This is not surprising, given that Tschichold’s typographic style began to change between 1930 and 1935. It was during this timeframe that Tschichold was working as principal designer at Berlinbased Bücherkreis (from 1930 to 1933) and later as a book designer at Basel publishing houses Birkhäuser, Holbein- Verlag, and Benno Schwabe (from 1933 to 1935). It would seem that the demands of designing books for publishing houses made Tschichold realize that the principles of the New Typography might not be suited for all situations. As he noted in a 1946 article for Schweizer Graphische Mitteilungen, “Glaube und Wirklichkeit” (Belief and Reality): “There are many typographical problems which cannot be solved on such regimented lines without doing violence to the text. Every experienced typographer knows this. Many jobs, especially books, are far too complicated for the simplifying procedures of the New Typography. And the extremely personal nature of the New Typography presents grave dangers to the coherence of a work when the designer cannot continually check each page and deal with all the minute problems that arise.”

By 1935, Tschichold was beginning to pull away from the New Typography and the functional principles of the Bauhaus. He realized that symmetrical typographic treatments could accomplish the requirements of successful book design and that asymmetrical composition was less appropriate for the great works of literature and for the expressed desires of conventional Swiss publishing clients. Many years later, in a talk given

by Tschichold to the Type Directors Club, New York, he further discusses these early years in Switzerland: “A few years after Die neue Typographie Hitler came. I was accused of creating ‘un-German’ typography and art, and so I preferred to leave Germany. Since 1933 I have lived in Basle, Switzerland. In the very first years I tried to develop what I had called Die neue Typographie and wrote another text-book,”

25 Typographica

Typographische Gestaltung in 1935 which is much more prudent than Die neue Typographie and still a useful book! In time, typographical things, in my eyes, took on a very different aspect, and to my astonishment I detected most shocking parallels between the teachings of Die neue Typographie and National Socialism and Fascism. Obvious similarities consist in the ruthless restriction of typefaces, a parallel to Goebbels’ infamous Gleichschaltung, and more or less militaristic arrangements of lines.Because I did not want to be guilty of spreading the very ideas, which had compelled me to leave Germany, I thought over again what a typographer should do. Which typefaces are good and what arrangement is the most practicable?

“By guiding the compositors of a large Basle printing office I learnt a lot about practicability.

Good typography has to be perfectly legible and is the result of intelligent planning. The classical typefaces such as Garamond, Janson, Baskerville and Bell are undoubtedly the most legible. Sans serif is good for certain cases of emphasis, but is used to the point of abuse today. The occasions for using sans serif are as rare as those for wearing obtrusive decorations.”

In April 1935, Tschichold’s change of design direction became public, when in his article, “Vom richtigen Satz auf Mittelachse” (Correct composition on a central axis), in Typographische Monatsblätter No. 4, he stated that centered typography was acceptable, and typographic design is subject to the technical and aesthetic requirements and demands of book design.

He went on to write, “From the formal point of view, symmetrical setting is easier and more convenient than modern setting, the advantage of which lies rather in technical convenience.” 4 He further wrote that the principal rules for setting a symmetrical title page in Roman type with short centered lines of unequal length and a simple title comprising two groups—one at the top, the other at the foot of the type area were more aesthetically appealing and achieved greater clarity of design.

26 Typographica

Opposite page Tschichold has stripped the typography to its basic elementary shapes and set lettering into an asymmetric balance of formal elements.

This page The alluring force of the poster, imparts inspiration, especially the negative photographic image, which exhibits one of the experimental techniques used in pictorial representation at the highest point of the New Typography.

Tschichold’s assimilation of constructivist typographic methods expounded on in Typographische Gestaltung is exemplified in two notable posters, Konst ruktivisten, designed for the Konstructivism (Constructivism) exhibition in 1937, and Der Berufsphotograph (The Professional Photographer), designed in 1938.

Konstruktivisten reflects the peak of Tschichold’s devotion to the principles of the New Typography and aims of asymmetrical typography. At the same time, Tschichold illustrates in Konstruktivisten the employment of classical proportions, balancing symmetry and asymmetry in a harmonious manner.

Der Berufsphotograph demonstrates Tschichold’s adherence to the principles of modernist functional design and is the last poster he designed in accordance with modernist principles. These two posters collectively brought to a completion Tschichold’s poster oeuvre and application of the New Typography. Tschichold’s ass i m i lation of construct i v ist and asymmetrical typographic methods would no longer be as visible in his work beyond this point.

27 Typographica

Typographische Gestaltung is a beautiful example of design and production, produced in the A5 format (21 x 14.8 cm) with a blue linen binding and a paper label affixed to the spine in red and black. Most of the book was printed on uncoated paper except for several inserts of images in a variety of colors on contrasting tinted and textured papers, and two sections at the end of the book that were printed on coated paper with half-tone illustrations with some work reproduced in facsimile.

Some of the best avant-garde modernist design examples of the period are documented throughout the texbook, most by Tschichold himself and that of his students from the Meistererschule für Deutschlands Buchdrucker (Master school for Germany’s printers) in Munich. Published work included examples by Karel Teige (1900-1951), El Lissitzky (1890-1941), Wladyslaw Strzeminski (1893-1952), László Moholy-Nagy (1895-1946), and Josef Albers (1888-1976).

28 Typographica

Row 1 left: These page show compositional sysrems based on asymmetrical arrangements of design elements and geometric forms. The example on the lefthand page depicts the ways in which typographic elements can be employed in a design.

The example on the right-hand page shows an advertisement designed by Tschichold in 1930.

right: The example on the lefthand page shows an abstract composition designed by El Lissitzky in 1924. The right-hand page depicts a 1931 abstract composition designed by Sophie Taeuber-Arp.

Row 2 left: In the mid 1920s photography became the preferable contemporary pictorial medium among modernist designers. The right-hand page depicts a 1927 cover of the Bauhaus prospectus designed by Herbert Bayer.

right: The right-hand page shows a 1924 poster with photogram for Pelikan ink designed by El Lissitzky. The use of photography and its variations such as photograms and photomontage not only played a role in the New Typography, but were seen as important means of visual expression.

Row 3 left: The right-hand page shows a photomontage with a red-tinted photograph credited to Walter Cyliax. right: The last spread in the volume depicts Swiss paint and paper processing advertisements.

Tschichold used the example on the right-hand page to illustrate his point of how one mixes typefaces succesfully.

Tschichold’s increasing preference of modern typefaces is evident in his selection of Bodoni for text setting and bold Egyptian (City Medium) and script letterforms for headings in Typographische Gestaltung. A section of the book focuses on the historical background of type mixtures and the need for variety and vivid contrasts in “books of modern character,” especially “the best traditional types”(Bodoni) and Egyptians (City Medium) as well as script (Bank) for extra stress and headings.

Tschichold goes on to remark in this section on the use of types and contrast as an important element in modern typography: Egyptian is also one of the historic types; it first appeared in England before 1820.

New ways of using this type are enriching typography.

Egyptian in headlines gives a job set in classical types a less traditional look – its bold, angular outline gives lively contrast to nearly every roman. Egyptian can only be used itself in small quantities.

It is tiring to read in long passages because of the rather heavy serifs. Here too a change of weight is necessary. For instance, if light or medium is used for the text, bold or semi-bold should be used for emphasis and headlines.

“Egyptian, however, is not today’s par excellence, as sans serif is, and it certainly can never replace sans. Egyptian can rarely be used as a text face because it is difficult to read. Its best use is as a display type with romans, most of which will mix very well with good Egyptians.

The ideal for modern use would be a classical Egyptian cut in the various weights.”

Endnotes [1] Tschichold, Jan. Asymmetric Typography. Trans. Ruari McLean. (New York: Reinhold Publishing Corporation in cooperation with Cooper & Beatty, Ltd.: Toronto 1967): 32.

[2] Tschichold, Jan, “Glaube und Wirklichkeit (Belief and Reality).”

Schweizer Graphische Mitteilungen June (1946). Trans. Ruari McLean.

Jan Tschichold: typographer. (Boston: David R. Godine, Publisher, Inc. 1975): 134.

[3] Tschichold, Jan. “Lecture to the Typography USA seminar sponsored

by The Type Directors Club, New York on 18 April 1959.” Print XVIII 1 (1964): 16–17.

[4] Tschichold, Jan, “Vom richtigen Satz auf Mittelachse (Correct composition on a central axis).” Typographische Monatsblätter 4 (1935): 113–116. Trans. Ruari McLean. Jan Tschichold: typographer. (Boston: David R. Godine, Publisher, Inc. 1975): 126–131.

5.Tschichold, Jan. Asymmetric Typography. Trans. Ruari McLean. (New York: Reinhold Publishing Corporation in cooperation with Cooper & Beatty, Ltd.: Toronto 1967): 32–34.

29 Typographica

Typographische Gestaltung’s design personifies what Tschichold was advocating for suitable type mixtures. A cautious Benno Schwabe required 200 pre-publication orders as a condition to print Typographische Gestaltung. Any concerns on the part of the publisher turned out to be unfounded; it was astonished to receive orders for 1,000 copies from its subscribers. Benno Schwabe later published Typographische Gestaltung in Danish and Swedish in 1937. In 1938, the Amsterdam printer Franz Duwaer published Typographische Gestaltung in Dutch. In 1945, Ruari Mc Lean translated and revised Typographische Gestaltung in English. He was unable to find a publisher until 1967, when Messrs Cooper & Beatty, Limited, of Toronto sponsored its publication, and it was published as Asymmetric Typography by Reinhold Publishing Corporation of New York.

Typographische Gestaltung has become a typographic classic, with its examination of asymmetrical typography, refined purpose and objectives of the New Typography, and the treatment of exact typographic details and elements. An important document of the New Typography, it has had a significant impact on students and scholars of the graphic arts and continues to be read as a design history resource.

References Burke, Christopher. Active literature: Jan Tschichold and New Typography. London: Hyphen Press, 2007. de Jong, Cees W., Alston W. Purvis, Martijn F. Le Coultre, Richard B. Doubleday and Hans Reichart. Jan Tschichold—Master Typographer: His Life, Work & Legacy. London: Thames & Hudson Ltd., 2008.

Hollis, Richard. Swiss Graphic Design: The Origins and Growth of an International Style, 1920– 1965. New Haven: Yale University Press, 2006.

Le Coultre, Martijn F. and Alston W. Purvis. Jan Tschichold: Posters of the Avantgarde. Ed. Barthold Pelzer. Laren: VK Projects, 2007.

McLean, Ruari. Jan Tschichold: typographer. Boston: David R. Godine, Publisher, Inc., 1975.

Muroga, Kiyonori, ed. “Works of Jan Tschichold 1902–74.” International Graphic Art and Typography Magazine (IDEA) 321, 2006.

Tschichold, Jan. Die neue Typographie. Berlin: Bildungs verband der Deutschen Buchdrucker, 1928.

Tschichold, Jan. Typographische Gestaltung. Basel: Benno Schwabe & Co., 1935.

Tschichold, Jan. Asymmetric Typography. Trans. Ruari McLean. New York: Reinhold Publishing Corporation in cooperation with Cooper & Beatty, Ltd.: Toronto, 1967.

Tschichold, Jan. The New Typography. Trans. Ruari McLean. Berkeley and Los Angeles: University of California Press, 1998.

Tschichold, Jan. “The Principles of the New Typography.” Texts on Type: Critical Writings on Typography. Ed. Steven Heller, and Philip B. Meggs.

New York: Allworth Press, 2001.

Choose your palette.

NATIONALGEOGRAPHICSTOCK.COM Custome research | The best photographers | More than ten million images Competitive pricing | Rights-managed and royalty-free images

TYPOGRAPHY MANIA

by Paulo Canabarro Typography Mania is the beginning of a monthly post series that comes around every issue of Typographica with the best of Typography design works on the web, from type videos to images everything is full of great design and typography inspiration. Users can submit their designs.

a

b

c d

e

f

j

k

g

h i

l m

n

a, b, i - arnoKath c - HypeForType d - TIPOCALI e, l - Shakes The Clown f - Steve Kodis g - Edu de Oliveira h - Marcos D. Torres j - bryrye k - JasonWstanley m - mil3n n - SaraMiek

TYPOGRAPHY CRASHCOURSE

by Denise Bosler

We all have epiphanies in our design careers, like when we suddenly understand why we need those typographic theories a former professor was trying to teach us. Or when we realize we should have been paying attention instead of doodling in our notebook. Or even when we realize something we know now would have been a great thing to know all those years ago. Sound familiar?

You’re not alone. Even veteran designers have “aha” moments. The important thing is to learn from them and use the new knowledge to better your skills. Following are six lessons you can study now to improve your typographic knowledge and design skills. Think of them as proverbial smacks to the forehead.

BRUSH UP ON TYPE When I was a fl edgling designer, I once had an art director tell me my work looked dated and mismatched. “Your connotation is all wrong!” he said. I nodded my head dejectedly and went back to work. I had no idea what he was talking about. A short time later, he showed up at my desk lugging a graphic design history book with several pages marked. Sure enough, my design combined fonts from the 1940s and 1970s, and used a Bauhaus style layout with 1980s colors it was all wrong. He knew it and I knew it. I suddenly realized that I should have paid more attention in my design history class.

Typography can make or break a design. As a designer, you need to know everything about type including its history. There’s a reason why certain historic eras’ approaches to typography and design were successful: They made an impact on the world. Don’t merely look at projects from those eras. Absorb them, love them and explore them.

Glean inspiration from the font choice, type treatment, layout, color and concepts. Dadaism, Bauhaus, Constructivism, Art Nouveau, Art Deco and other art movements’ typography and design infl uence designers every day.

It’s also a great idea to familiarize yourself with type designers. From Frederick Goudy and Giambattista Bodoni to Zuzana Licko and Alejandro Paul, each made, and continues to make, a signifi cant impact on type design. In addition, type designers, too, are inspired by typographic history. For instance, Zuzana Licko’s font Mrs. Eaves was inspired by Baskerville, and Alejandro Paul has said he admires the work of Hermann Zapf and Ed Benguiat. Before you start your next job, take a break, dust off your old textbook, and take a step back through history. You never know where your inspiration may come from.

ATTENTION TO DETAILS Paying attention to the details shows that you care about the quality of work you’re presenting to a client. Just because a job has to be done quickly doesn’t mean you have permission to be sloppy. The more attention you pay to detail, the better the readability of the final job. Think of it this way: Give typographic detailing the same consideration you give to color. Here are some areas to consider: Kerning is all about increasing the readability of your design. Your words may seem to read just fine if the headline isn’t kerned, but doesn’t kerning make it even easier to read? Kerning isn’t just for headlines; subheads, pull quotes, numbers and typographic logos need to be kerned, too. Here’s how to do it: Look through the words that need to be kerned. Pick a pair of letters whose relationship looks perfect, and aim to have the rest of the letters in the word match that visual space. Fix the kerning until the entire word has consistent letterspacing. If there’s more than one word, move to the next one and aim to have this word’s kerning match the fi rst word’s. And so on.

Leading. Stop using auto leading. Right now. Auto leading is based on a mathematical formula that only works for those few fonts with average x-heights and ascender/descender lengths. Finesse your type manually instead, giving the letters the space they deserve.

Add a point or two of leading to your body copy for tall x-heights, long ascenders and descenders, as well as condensed fonts. Take away a point or two of leading for extended fonts and those with small x-heights, short ascenders and descenders. Always decrease leading for headlines. The bigger the type, the more dramatic the space between lines appears to be.

Ligatures are part necessity and part beauty. Ligatures, by definition, are any two or more letters that touch, though the most common are the ‘fi ,’ ‘ffi ,’ ‘fl ’ and ‘ffl ’ combinations because the pesky ball terminal at the top of the ‘f’ interferes with the dot of the ‘i’ and height of the ‘l.’ Type designers create completely new characters that seamlessly combine two letters. A lot of thought goes into these new letters, and using them increases readability. Make sure your design software preferences are set to automatically replace common offensive combinations with ligatures. Many fonts have additional ligature characters that you can also use, some functional and others quite fancy. Check out the glyphs palette to see all of the possibilities. Just be sure they don’t decrease legibility.

Kerning takes practiceto perfect. Work your way through each of the word’s letter pairs until the entire word has consistent letterspacing.

39 Typographica

While the most common ligatures are an ‘fi ’ or ‘fl ’ combination, many fonts also include specialty ligatures that are great for enhancing a logo, headline or design layout.

ORGANIZE YOUR FONTS Let’s see a show of hands for everyone who has more than 100 fonts currently open on their computer. 200? 500? 1,000? If you’re a design professional, then you probably have your hand in the air. It’s important when you’re on a deadline to have all of your resources ready to go, including access to your fonts. However, having too many open fonts cuts software efficiency by using up valuable system resources. It also wastes time to scroll through a huge list just to select a font, and increases the chance of font conflicts.

Work smarter by using font-management software.There are many good options with a variety of features, so pick one that will suit your needs. Features include installing and uninstalling fonts, autoactivating fonts, resolving font confl icts, locating missing fonts, previewing fonts before installation and organizing fonts. It’s not enough to just load the software, though; you need to use it effectively.

Here’s how to do it.

Prepare. Read the instructions and watch tutorials (if available) to gain a firm understanding of the software Font-management software has a lot of obvious and not-so-obvious features. Take the time to learn what it can do for you.

Clean up your hard drive. Place all your fonts into a single folder on your hard drive, organized into subfolders within that. This way, you always have easy access to all your fonts. A word of caution: Do not place your fonts directly into the system’s fonts folder. This will automatically and permanently open all your fonts and cause you a massive headache, not to mention grind your computer to a halt.

Next, decide how you want to organize your fonts. You can sort them by client, job, style, alphabetical, and more—it doesn’t really matter how, just as long as you organize. Here are some options: Organize by project. Create a folder for each project and place the necessary fonts within it. Move new fonts into the folder as you use them. Font-management software allows you to have multiple folders containing the same fonts. Temporarily activate the project folder when working on the project, and deactivate it when you’re done.

Organize by client. This approach is similar to organizing by project, but include all the fonts for all the projects for that client. This works well when there’s a standard set the client always uses.

Organize by style. Create folders for serif, sans serif, script and display fonts. Go a step further by breaking those styles down into more specific folders such as modern serifs and condensed sans serifs.

This method of organizing is helpful when designing with an idea of font style but not a specific font. If you have thousands of fonts, you may want to start slow and sort in groups of 10 or 20.

Activate/Deactivate. Temporarily activate the font folders you need.

When you complete the job, deactivate the folders to keep your workspace clear of unnecessary fonts and free up your system resources.

40 Typographica

LEARN YOUR KEY COMMANDS Time is money. Designers know the truth of that, and, if there’s one thing we can do to maximize our time as well as our money, it’s learning key commands—specifically, type-related key commands.

For example, typing command + shift + O is much faster than using the mouse to click on the direct select tool, click on your text, move to the Type menu and scroll through the options to select the Create Outlines command. In short, keyboard shortcuts increase productivity.

Set yourself the goal of learning two to three new key commands a week. Look at your most repetitive actions and learn those fi rst. If it helps, create a cheat sheet and tape it to the side of your monitor.

Soon you’ll have one hand on the mouse, the other on the keyboard and be fl ying through your next design job.

If you’re not sure what to learn fi rst, start with this list of five common type-related key commands: • T for the type tool • Option + arrow left or arrow right to kern or track • Option + arrow up or down for leading • Command + shift + < or > for increasing or decreasing the size of text (default is increments of 2 pts.)

• Command + shift + L, C, R or J to align text left, center, right or justify with last line left aligned.

Once you learn all of the key commands, customize your own using Edit > Keyboard Shortcuts.

Learning key commands increases both productivity and a designer’s software prowess. You can get started with the cheat sheet here.

CREATE COMPLEMENTARY TYPE PAIRS As designers, we’re told over and over to use no more than two typefaces in a design. It’s a good rule to provide visual interest and create contrast between body copy, headlines and other text on the page. A combination of serif and sans serif works best to create this balance. But how to choose?

The biggest challenge is selecting the right pair from nearly limitless options. Start by developing a list of 10 sans serif and 10 serif fonts, leaving the display type for another day. Be sure to include a stylistic mixture of classic and modern fonts. Set each typeface as a 24 pt. headline and 9 pt. paragraph of body copy, print them, then compare each serif with each sans serif. The best pairs share qualities like x-height, weight, width and letterform shapes. Go with your gut when you decide whether the fonts complement each other. If you aren’t sure they’re a match, consider them a no. Keep comparing them side-by-side and see which combinations work. This will give you a list of go-to complementary type pairs. You can even set up folders in your font-management software to reflect the complementary pairs.

Keep expanding your list as you experiment with new font pairs.

Soon you’ll have complementary sets for different design aesthetics.

A word of caution: Don’t rely on the same pair or pairs over and over again. This will make your work look predictable. Always keep the design requirements and client personality in mind.

41 Typographica

USE WEB APPROPRIATE FONTS Up until a few years ago, live text was limited to a handful of fonts.

If a “fancier” font was needed, it had to be a graphic. This was why non-web-specifi c fonts were kept to a minimum online. Fortunately, for those of us who cringe at the thought of using those original standard web fonts, options for live text are getting better every day.

With the more recent introduction of subscription font hosting, it’s easier than ever to use great looking fonts in web design. (See “The New Web Typography” on page 54 for more information about these services.) Unfortunately, though, it’s also easier than ever to make poor font choices.

Computer screens are made of pixels—smartphones and tablets included. Whatever the size of your type, the pixel size remains the same. All type is reformatted to fi t into the existing pixels. Small typographic details like serifs fare worst with this reformatting, because a single pixel cannot be rendered as more than one color (i.e., it cannot be divided in half). If a typographic detail does not fi ll a pixel, the computer must decide whether to fi ll the whole pixel or leave it blank. For large font sizes, this degradation is negligible. For smaller font sizes, however, this can be the difference between legibility and illegibility.

If you must use a serif font as body copy, choose one that has a slab serif instead of a thin serif with delicate brackets. Try Museo Slab, Chapparal Pro or Oxtail (www.typekit.com). Sans serif fonts will always be legible at a small size, so they work well as body copy, but please pick a sans serif with more personality than Arial or Verdana. Try P22 Underground, Botanika Web or Le Havre (www.typekit.com). Better yet, combine two to create a great complementary type pairing. And remember to carefully read the font’s license before using a web-font service bureau. Most fonts require a separate license for web use.

Make it a point to try to learn something new everyday, even if it’s just reading the next section of your graphic design history book. It’s OK to smack yourself in the forehead once in awhile.

Denise Bosler is a graphic designer, illustrator, author and professor of communication design at Kutztown University in Pennsylvania. As a self-professed designastrator, she creates award-winning design and illustration work for a wide variety of clients from small businesses to Papyrus and Target. She’s the author of “Mastering Type: The Essential Guide to Typography for Print and Web Design” (HOW books, 2012; MyDesignShop.com. www.bosler.com; www.masteringtype.com

42 Typographica