Howard 227 magazine

32
Grooming the Font STOP SLOPPY TYPOGRAPHY! College Kids Take on Type

description

typography

Transcript of Howard 227 magazine

Page 1: Howard 227 magazine

1

Grooming the Font

STOP SLOPPY TYPOGRAPHY!

College Kids Take on Type

Page 2: Howard 227 magazine

Never or Everchanging?

Some nay-sayers find the world of typography to be a stagnant and boring element of design; ampersand magazine is here to reassure the excitement brought about in the typographic realm through the not so and random articles of typography. Like, who knew that North Korea would hold the title for ‘Worlds most Magnificent Typeface? A pretty random, yet pretty fun fact.Aside from the slapdash stories, we’ll keep you up to date on the latest trends on do’s and don’ts of typography in design. You’d be surprised at how tacky typeface can ruin a spread.So thanks for opening your eyes to us!

Gaurunteed flip to the end.

-Sarah Howard

“PS. there is no way this project is going in my portfolio.”

Page 3: Howard 227 magazine

3

OCTTypeCasting

Steven Browerpg 4

Back to

Basics: Stopping Sloppy Typography

John D. BerryPg. 12

Grooming the Font: Robert BringhurstPg. 18

The World’s

Most Perfect

Script

Graffiti Vs.

Typography

Pg. 10

Why is Type so Important?

Pg. 25

Pg. 16

Inevitable Typography

Pg. 30

When Type Speaks LouderThanWordsPg. 28

Web Design=95% Type

Pg. 26

Page 4: Howard 227 magazine

Type Casting

Appropriate Type Solutions

My first job in book design was at New American Library, a publisher of

mass-market books. I was thrilled to be hired. It was exactly where I wanted to be. I love the written word, and viewed this as my entrance into a world I wanted to participate in. Little did I suspect at the time that mass-market books, also known as “pocket” books (they mea-sure approximately 4” x 7”, although I have yet to wear a pocket they fit comfortably into), were viewed in the design world as the tawdry stepchild of true literature and design, gaudy and unsophisticated. I came to understand that this was due to the fact that mass-market books, sold extensively in super- markets and convenience stores, had more in common with soap detergent and cereal boxes than with their much more dignified older brother, the hardcover first edi-tion book. Indeed, the level of design of paperbacks was as slow to evolve as a box of Cheerios.

On the other hand, hardcover books, as if dressed in evening attire, wore elegant and sophisticated jackets. Next in line in terms of standing, in both the literary and design worlds, was the trade paper edition, a misnomer that does not refer to a specific audience within an area of work, but, rather, to the second edition of the hardcover, or first edition, that sports a paperbound cover.

Trade paperbacks usually utilize the same interior printing as the hardcover, and are roughly the same size (generally, 6” x 9”).Mass-market books were not so lucky. The interior pages of the original edition were shrunk down, with no regard for the final type size or the eyes of the viewer. The interiors tended to be printed on cheap paper stock, prone to yellowing over time. The edges were often dyed to mask the different grades of paper used. The covers were usually quite loud, treated with a myriad of special effects (i.e., gold or silver foil, embossing and de-bossing, spot lamination, die cuts, metallic and Day-Glo pantone colors, thermography, and even holography), all designed to jump out at you and into your shopping cart as you walk down the aisle. The tradition of mass-market covers had more in common with, and, perhaps, for the most part is the descendant of, pulp magazine covers of earlier decades, with their colorful titles and over-the-top illustrations, than that of its more stylish, larger, and more expensive cousins.

Steven BrowerNotes 1. Eric Gill, “An Essay on Typography” (Sheed and Ward, 1931), p. 136; (Godine, 1988). 2 and 3. Richard Hendel, On Book Design (New Haven: Yale University Press, 1998).Adapted from Publication Design (Delmar Learning, 2004).

Page 5: Howard 227 magazine

5

There, type was always condensed or stretched so the height would be greater in a small format. The problem was that the face itself became distorted, as if it was put on the inquisitionist rack, with the horizontals remaining “thick” and the verticals thinning out. Back then, when type was “spec’d” and sent out to a typesetter, there was a standing order at the type house to condense all type for our company 20 percent. Sometimes, we would cut the type and extend it by hand, which created less distortion but still odd-looking faces. Once, I was instructed by the art director to cut the serifs off a face, to suit his whim. It’s a good thing there is no criminal prosecution for type abuse.

The art director usually commissioned the art for these titles. Therefore, the job of the designers was to find the “appropriate” type solution that worked with these illustra-tions to create the package. It was here that I learned my earliest lessons in the clichés of typography. Mass- market paperbacks are di-vided into different genres, distinct categories that define their audience and subject matter. Though they were unspoken rules, handed down from generation to generation, here is what I learned about type during my employ:

Typefaces GenreSquare serif WesternScript and cursive RomanceLED faces Science FictionNueland African Latin MysteryFat, round serif faces Children’s Sans serif NonfictionHand scrawl Horror1950s bouncy type Human/Teen titles

Page 6: Howard 227 magazine

“As any sculpture or painted picture... I developed an appreciation for the rules of typography.”

And so it went. Every month, we were given five to six titles we were responsible for, and every month,

new variations on old themes hung up on the wall. For a brief period I was assigned all the romance titles, which, themselves, were divided into subgenres (historical, regency, contemporary, etc). I made the conscious decision to create the very best ro-mance covers around. Sure, I would use script and cur-sive type, but I would use better script and cursive type, so distinctive, elegant, and beautiful that I, or anyone else, would recognize the difference immediately. (When, six months after I left the job, I went to view my achievements at the local K-Mart, I could not pick out any of my designs from all the rest on the bookracks.)

Soon after, I graduated to art director of a small publishing house. The problem was, I still knew little of and had little confidence in, typography. However, by this time, I knew I knew little about typography. My solution, therefore, was to create imag-es that contained the type as an integral part of the image, in a play on vernacular design, thereby avoiding the issue entirely. Thus began a series of collaborations with talented illustrators and photographers, in which the typography of the jacket was incorporated as part of the illustration. Mystery books especially lent themselves well to this endeavor. A nice thing about this approach is that it has a certain infor-mality and familiarity with the audience. It also made my job easier, because I did not have to paste up much type for the cover (as one had to do back in the days of t-squares and wax), since it was, for the most part, self-contained within the illustra-tion. This may seem like laziness on my part, but hey, I was busy.

Eventually, my eye began to develop, and my awareness and appreciation of good typography increased. I soon learned the pitfalls that most novice designers fall into, like utilizing a quirky novelty face does not equal creativity and usually calls attention to the wrong aspects of the solution. The im-portance of good letter spacing became paramount. Find-ing the right combination of a serif and sans serif face to evoke the mood of the material within was now my primary concern. The beauty of a classically rendered letterform now moved me, to quote Eric Gill, as much “as any sculpture or painted picture.” I developed an appreciation for the rules of typography.

Page 7: Howard 227 magazine

7

“As any sculpture or painted picture... I developed an appreciation for the rules of typography.”

The RulesAs I’ve said, it is a common mistake among young designers to think a quirky novelty face equals creativity. Of course, this couldn’t be farther from the truth. If anything, for the viewer, it has the opposite of the intended effect. Rather than being the total sum of individ-ual expression, it simply calls attention to itself, detracting from, rather than adding to, the content of the piece. It is no substitute for a well-reasoned conceptual solution to the design problem at hand.As a general rule, no more than two faces should be utilized in any given design, usually the combination of a serif face and a sans serif face. There are thousands to choose from, but I find I have reduced the list to five or six in each category that I have used as body text throughout my career:

CaslonCheltenhamGaramondSans Serif

Franklin GothicFuturaGill SansNews GothicTrade Gothic

SerifBodoni

You should never condense or extend type. As I stated, this leads to unwanted distortions. Much care and consideration went into the design of these faces, and they should be treated with respect. There are thousands of condensed faces to choose from without resorting to the horizontal and vertical scale functions.Do not use text type as display. Even though the computer will enlarge the top beyond the type de-signer’s intention, this may result in distortions. Do not use display type as text. Often, display type that looks great large can be difficult to read when small.Do not stack type. The result is odd-looking spacing that looks as if it is about to tumble on top of itself. The thinness of the letter I is no match for the heft of an O sitting on top of it. As always, there are ways to achieve stacking successfully, but this requires care. Also, as I noted, much care should be given to letter spacing the characters of each word. This is not as simple as it seems. The computer settings for type are rife with inconsistencies that need to be correct-ed optically. Certain combinations of letterforms are more difficult to adjust than others. It is paramount that even optical (as opposed to actual) spacing is achieved, regardless of the openness or closeness of the kerning. It helps if you view the setting upside down, or backwards on a light box or sun-filled window, or squint at the copy to achieve satisfactory spacing. I would caution you in the judicious use of drop shadows. Shadows these days can be rendered easily in programs such as Adobe’s Photoshop and Illustrator, and convincingly, too.

The problem is, it is so easily done that it is overdone. Thus, the wholesale usage of soft drop shadows has become the typographic equiva-lent of clip art. Viewers know they have seen it before. Rather than being evocative, it mainly evokes the program it was created in.Hard drop shadows, ones that are 100 percent of a color, are easily achieved in Quark and placed behind the main text. This method is generally employed when the main text is not reading against the background, because of a neutral tone or an image that varies in tone from dark to light. The handed-down wisdom is: If you need a drop shadow to make it read, the piece isn’t working. These solid drop shadows always look artificial, since, in reality, there is no such thing as a solid drop shadow. There should be a better solution to readability. Perhaps the background or the color of the type can be adjusted. Perhaps the type should be paneled or outlined. There are an infinite number of possible variations.

Page 8: Howard 227 magazine

If you must use a solid drop shadow, it should never be a color. Have you ever seen a shadow in life that is blue, yellow, or green? It should certainly never be white. Why would a shadow be 100 percent lighter than what is, in theory, casting the shadow? White shadows create a hole in the background, and draw the eye to the shadow, and not where you want it to go: the text.Justified text looks more formal than flush left, rag right. Most books are set justified, while magazines are often flush left, rag right. Centered copy will appear more relaxed than asymmetrical copy. Large blocks of centered type can create odd-looking shapes that detract from the copy contained within.Another thing to consider is the point size and width of body copy. The tendency in recent times is to make type smaller and smaller, regard- less of the intended audience. However, the whole purpose of text is that it be read. A magazine covering contemporary music is different from the magazine for The American Association of Retired Persons.It is also common today to see very wide columns of text, with the copy set at a small point size. The problem is that a very wide column is hard to read because it forces the eye to move back and forth, tiring the reader. On the other hand, a very narrow measure also is objectionable, because the phrases and words are too cut up, with the eye jumping from line to line. We, as readers, do not read letter by let-ter, or even word by word, but, rather, phrase by phrase. A consensus favors an average of ten to twelve words per line.1Lastly, too much leading between lines also makes the reader work too hard jumping from line to line, while too little leading makes it hard for the reader to discern where one line ends and another begins. The audience should always be

“Good designers can make use of almost anything. The typeface is the point of departure, not the destination.”

Page 9: Howard 227 magazine

9

paramount in the designer’s approach, and it is the audience—not the whim of the designer, or even the client—that defines the level of difficulty and ease with which a piece is read. As Eric Gill said in 1931, “A book is primarily a thing to be read.”2A final consideration is the size of the type. As a rule of thumb, mass-market books tend to be 8 point for reasons of space. A clothbound book, magazine, or newspaper usually falls into the 9.5 point to 12 point range. Oversized art books employ larger sizes—generally, 14 point to 18 point or more.Choosing the right typeface for your design can be time-consuming. There are thousands to choose from. Questions abound. Is the face legible at the setting I want? Does it evoke what I want it to evoke? Is it appropriate to the subject matter? There are no easy answers. When a student of mine used Clarendon in a self-promotion piece, I questioned why he chose a face that has 1950s connotations, mainly in connection with Reid Miles’ Blue Note album covers. He answered, “Because I thought it was cool.” I lectured him profusely on selecting type simply based on its “coolness.” Later, I relayed the incident to Seymour Chwast, of the legendary Push-pin Group (formerly Pushpin Studios). He observed that Clarendon is actually a Victorian face, which he and his peers revived as young designers in the 1950s. When I asked him why they chose to bring this arcane face back to life, he replied, “Because we thought it was cool.”Breaking the Rules Of course, there are always exceptions to the rules. An infinite number of faces can be used within one design, particularly when you employ a broadside-style type solution, a style that de-veloped with the woodtype settings of the nineteenth century. Another style, utilizing a myriad of faces, is that influenced by the Futurist and Dada movements of the early twentieth century. As Robert N. Jones stated in an article in the May 1960 issue of Print magazine: “It is my belief that there has never been a type- face that is so badly designed that it could not be handsomely and effectively used in the hands of the right . . . designer.”3 Of course, this was before the novel-ty type explosion that took place later that decade, and, again, after the advent of the Macintosh computer. Still, Jeffery Keedy, a contemporary type designer whose work appears regularly in Emigre, con- curs: “Good designers can make use of almost anything. The typeface is the point of departure, not the destination.” Note the caveat “almost.” Still, bad use of good type is much less desirable than good use of bad type. When I first began in publishing, a coworker decided to let me in on the “secrets” of picking the appropriate face. “If you get a book on Lincoln to design,” he advised, “look up an appropriate typeface in the index of the type specimen book.” He proceeded to do so. “Ah, here we go—‘Log Cabin!’” While, on the extremely rare occasion, I have found this to be a useful method, it’s a good general rule of what not to do.

Page 10: Howard 227 magazine

KOREA?

DUH!Perfect?

Page 11: Howard 227 magazine

11

The world’s Most Perfect Script

Typographically, the Republic of Korea has much to celebrate. The world’s first type-faces cast in metal were made in Korea: a fourteenth century book in the collection of the Bibliothèque Nationale de Paris establishes Korean printing from movable type at least as far back as 1377, though Korean typefounding may date to 1234, some 221 years before Gutenberg. An impediment to early printing was the complexity of Chinese characters, then used to render the Korean language, which further stifled national lit-eracy. But in 1446, an undertaking by King Sejong the Great addressed both problems, through what is surely one of the greatest inventions in the history of typography: the Hangul alphabet. On October 9, Korea celebrates this incredible innovation as Korean Alphabet Day, better known as Hangul Day. The invention and reform of alphabets has a long tradition, though its efforts are rarely successful. Generally speaking, script systems with highly scientific foundations go completely unrecognized, the typographic equivalent of Esperanto. And among the world’s most successful script systems are some of its most arbitrary: nothing in the design of the Latin A suggests its sound or meaning, and even scripts with pictograph-ic origins such as Chinese are usually abstracted to the point of unrecognizability. But Hangul, Korea’s “Great Script,” is perhaps history’s only effort at alphabet reform that is both scientifically rigorous and universally successful. As a result of careful planning, Hangul is easily learned, comfortably written, and infinitely flexible. Hangul is comprised of 51 jamo, or phomenic units, whose shapes are highly or-ganized. Simple consonants are linear vowels are horizontal or vertical lines, glottalized letters are doubled, and so on. But more interestingly, Hangul’s characters are featural: their shapes are related to the sounds they symbolize, each representing a different position of the mouth and tongue. Pay attention to the curvature of your lower lip when you form the sounds buh and puh, and you’ll begin to see the logic of Hangul’s B and P. Notice how your tongue interacts with the roof of your mouth when you say sss and juh, and you’ll understand the design of its S and J. Hangul’s ability to represent an espe-cially wide range of sounds makes it easy to render loan words from other languages, a challenge in many Asian scripts (but an entertaining hazard to reckless Westerners.) Typographically, I envy my Korean counterparts who get to work with Hangul, with its letterforms that always fit into a square, and can be read in any direction (horizontally or vertically.) And best of all: no kerning! —JH

http://www.typography.com/blog/tag/Phonetics

Page 12: Howard 227 magazine
Page 13: Howard 227 magazine

13

Back to Basics: Stopping Sloppy

TypographyJohn D. Berry

There’s a billboard along the freeway in San Francisco that’s entirely typographic, and very simple. Against a bright blue background, white letters spell out a single short line, set in quota-tion marks: “Are you lookin’ at me?” The style of the letters is traditional, with serifs; it looks like a line of dialogue, which is exactly what it’s sup-posed to look like. Since this is a billboard, and the text is the entire message of the billboard, it’s a witty comment on the fact that you are looking at “me”—that is, the message on the billboard—as you drive past.But, as my partner and I drove past and spotted this billboard for the first time, we both simul-taneously voiced the same response: “No, I’m looking at your apostrophe!”The quotation marks around the sentence are real quotation marks, which blend in with the style of the lettering—“typographers’ quotes,” as they’re sometimes called—but the apostrophe at the end of “lookin’” is, disconcertingly, a single “type-writer quote,” a straight up-and-down line with a rounded top and a teardrop tail at the bottom.To anyone with any sensitivity to the shapes of letters, whether they know the terms of typeset-ting or not, this straight apostrophe is like a fart in a symphony—boorish, crude, out of place, and distracting. The normal quotation marks at the beginning and end of the sentence just serve to make the loud “blat!” of the apostrophe stand out. If that had been the purpose of the billboard, it would have been very effective. But unless the billboards along Highway 101 have become the scene of an exercise in typographic irony, it’s just a big ol’ mistake. Really big, and right out there in plain sight.

Page 14: Howard 227 magazine

The Devil Is in the DetailsThis may be a particularly large-scale example, but it’s not unusual. Too much of the signage and printed matter that we read—and that we, if we’re designers or typogra-phers, create—is riddled with mistakes like this. It seems that an amazing number of people responsible for creating graphic matter are incapable of noticing when they get the type wrong.This should not be so. These fine points ought to be covered in every basic class in typography, and basic typography ought to be part of the education of every graphic designer. But clearly, this isn’t the case—or else a lot of designers skipped that part of the class, or have simply for- gotten what they once learned about type. Or, they naively believe the software they use will do the job for them.Maybe it’s time for a nationwide—no, worldwide—program of remedial courses in using type.

Automated ErrorsAs my own small gesture toward improvement, I’ll point out a couple of the more obvious prob-lems—in the hope that maybe, maybe, they’ll become slightly less commonplace, at least for awhile.Typewriter quotes and straight apostrophes are actually on the wane, thanks to word-process-ing programs and page-layout programs that offer the option of automatically changing them to typographers’ quotes on the fly. (I’m not sure what has made the phenomenon I spotted on that billboard so common, but I’ve noticed a lot of examples recently of text where the double quo-tation marks are correct but the apostrophes are straight.) But those same automatic typesetting routines have created another almost universal mistake: where an apostrophe at the beginning of a word appears backwards, as a single open quotation mark. You see this in abbreviated dates (‘99, ‘01) and in colloquial spellings, like ‘em for them. The program can turn straight quotes into typographers’ quotes automatically, making any quotation mark at the start of a word into an open quote, and any quotation mark at the end of a word into a closed quote, but it has no way of telling that the apostrophe at the beginning of ‘em isn’t supposed to be a single open quote, so it changes it into one.

The only way to catch this is to make the correction by hand— every time.Anemic TypeThe other rude noise that has become common in the symphony hall is fake small caps. Small caps are a wonderful thing, very useful and some- times elegant; fake small caps are a distraction and an abomination.Fake caps are what you get when you use a program’s “small caps” command. The software just shrinks the full-size capital letters down by a predetermined percentage—which gives you a bunch of small, spindly- looking caps all huddled together in the middle of the text. If the design calls for caps and small caps—that is, small caps for the word but a full cap for the first letter—it’s even worse, since the full-size caps draw attention to themselves because they look so much heavier than the smaller caps next to them. (If you’re using caps and small caps to spell out an acronym, this might make sense; in that case, you might want the initial caps to stand out. Other-wise, it’s silly. (And—here comes that word again— distracting.)

Page 15: Howard 227 magazine

15

If it weren’t for a single exception, I’d advise everyone to just forget about the “small caps” command—forget it ever existed, and never, ever, touch it again. (The exception is Adobe InDesign, which is smart enough to find the real small caps in an OpenType font that includes them, and use them when the “small caps” command is invoked. Unfortunately, InDesign isn’t smart enough, or independent enough, to say, “No, thanks,” when you invoke “small caps” in a font that doesn’t actually have any. It just goes ahead and makes those familiar old fake small caps.) You don’t really need small caps at all, in most typesetting situa-tions; small caps are a typo- graphic refinement, not a crutch. If you’re going to use them, use real small caps: properly designed letters with the form of caps, but usually a little wider, only as tall as the x-height or a little taller, and with stroke weights that match the weight of the lowercase and the full caps of the same type- face. Make sure you’re using a typeface that has true small caps, if you want small caps. Letter-space them a little, and set them slightly loose, the same way you would (or at least should) with a word in all caps; it makes the word much more readable.Pay Attention, NowThere are plenty of other bits of remedial typesetting that we ought to study, but those will do for now. The obvious corollary to all this is, to pro- duce well-typeset words, whether in a single phrase on a billboard or sev- eral pages of text, you have to pay attention. Proofread. Proofread again. Don’t trust the defaults of any program you use. Look at good typesetting and figure out how it was done, then do it yourself. Don’t be sloppy. Aim for the best.

Words to live by, I suppose. And, certainly, words to set type by.

Page 16: Howard 227 magazine

Graffiti Vs. Type

People write graffiti on walls. That’s the essence of what graffiti is, and it’s been so since at least the days of an-cient Rome, when someone anonymously scratched rude words and political slogans on the walls of Pompeii. A lot of what we know, in fact, about the informal writing styles in ancient Rome is based on the excavations of graffiti-strewn walls in the ruins of Pompeii.Today’s graffiti, though, is highly stylized, often done with a can of spray paint (a tool unknown to the alley-run-ners of Pompeii) and usually doesn’t bear much resemblance to the styles of letter that we’re used to reading. Often enough, what we call graffiti goes far beyond lettering of any kind; some of the “graffiti” shown in Lily Cutler’s piece are really murals, pieces of wall art that may or may not include any lettering at all.Does graffiti have anything to do with typography?Graffiti isn’t really typography; it’s more of a cross between handwriting and sign-painting. But unlike either of those, graffiti is above all about self-expression. Typography, on the other hand, is about communication, no matter how self-expressive it may get. A closer parallel might be between graffiti and calligraphy (“beauti-ful writing”); there’s certainly a connection between the expressiveness of graffiti and the expressive forms of calligraphy. Both take letters and turn them into visual forms that have more to do with art than with commu-nication.Graffiti, calligraphy and sign-painting are all processes done by hand. Typography is not; it’s the arrangement of pre-existing letters into words and sentences. Today we’re so used to working with digital fonts that we some-times look at a piece of hand-lettering and ask, “What font is that?” What we mean is, what style is it? What’s it based on? What does it refer to? How can we describe it? But it isn’t a font, even if it’s drawn to look like an existing typeface.

Page 17: Howard 227 magazine

17

Graffiti Vs. Type The other side of this is that there are typefaces designed to look like graffiti. But if you use one of those dig-ital fonts, you’ll quickly notice that every time you type the letter “a,” for instance, it looks exactly like every other “a” you’ve used. That’s the essential difference between type and lettering: with type, each letter has the same form every time it appears. (There are technologies that make it possible to include a variety of alter-nate forms within a digital font, and to substitute them for the default forms either randomly or according to a pattern, in order to make the result look more like handwriting or hand-lettering; but at heart it’s still about repeating forms.)You’ve probably seen “handwriting” fonts, and you’ve probably seen offers to take your own handwriting and turn it into a font. At its most basic level, that’s easy to do; but it’s very hard to do well. When we write by hand, we don’t form each letter the same way over and over again, even when we’re trying to. Each letter differs depending on what we wrote before it and what we’re about to write after it; we run things together and break them apart depending on the context (and the steadiness of our hand). That variety and variabili-ty is absent in typography; instead, typography is about repeating patterns.The heart of typography is continuous text, no matter how dramatic the forms may get in headlines and oth-er kinds of “display” type. Even at its wildest, typography is about reading. This is why it takes a lot of time and a lot of skill to create a text typeface, one that will be readable for paragraph after paragraph and page after page of text. Like the one you’re reading now.Signature vs. messageSince its early days, when “Taki 183” was tagging the walls of New York City, modern graffiti has been about personal expression and making a mark. The flamboyant style of that “Taki” tag may have been quite read-able to its originator and his cohorts, but its point was not to be read but to be recognized. Just like a high-end logo, it was a recognizable mark: a signature, a brand.

Credit: www.solo138.comAlthough that purpose still characterizes the casual tags we find around our neighborhoods, the art of graf-fiti long ago moved on. In many cases, it’s impossible to find a dividing line between ambitious graffiti and mural art; both decorate the walls of our cities, sometimes together, sometimes in conflict. The essence of this process is the decoration — indeed, annotation — of public space.Readable? Maybe

The letters of graffiti, like the letters of handwriting or of type, are formed by an interplay between shape and space. At its most basic, this means black and white (“figure and ground,” in art terms); but in graffiti (and increasingly in type) it also means color.Most of the murals showcased in Lily Cutler’s story are intensely colorful, even if black outlines sometimes define the shapes. They’ve often got perspective and 3D effects, although they’re painted on flat surfaces. They pop, visually, and they’re meant to. As graffiti, they communicate to those who know how to read graf-fiti; but they go beyond that and function simply as art.

http://crosscut.com/2013/10/28/arts/117095/seattle-graffiti-typography-john-d-berry/?page=2

Page 18: Howard 227 magazine

Grooming the FontLuke Lucas

Page 19: Howard 227 magazine

19

Writing begins with the making of meaningful marks. That is to say, leaving the traces of meaningful gestures. Typography begins with arranging meaningful marks that are already made. In that respect, the practice of typography is like playing the piano – an instrument quite different from the human voice. On the piano, the notes are already fixed, although their order, duration and amplitude are not. The notes are fixed but they can be endlessly rearranged, into meaningful music or meaningless noise. Pianos, however, need to be tuned. The same is true of fonts. To put this in more literary terms, fonts need to be edited just as carefully as texts do – and may need to be re-edited, like texts, when their circumstances change. The editing of fonts, like the editing of texts, begins before their birth and never ends.You may prefer to entrust the editing of your fonts, like the tuning of your piano, to a professional. If you are the editor of a magazine or the manager of a publishing house, that is probably the best way to proceed. But devoted typographers, like lutenists and guitarists, often feel that they themselves must tune the instru-ments they play.

10.1 Legal Considerations

10.1.1 Check the license before tuning a digital font.Digital fonts are usually licensed to the user, not sold outright, and the license terms may vary. Some man-ufacturers claim to believe that improving a font produced by them is an infringement of their rights. No one believes that tuning a piano or pumping up the tires of a car infringes on the rights of the manufactur-er – and this is true no matter whether the car or the piano has been rented, leased or purchased. Printing type was treated the same way from Bi Sheng’s time until the 1980s. Generally speaking, metal type and prototype are treated that way still. In the digital realm, where the font is wholly intangible, those older notions of ownership are under pressure to change. The Linotype Library’s standard font license says that “You may modify the Font’ Software to satisfy your design requirements.” Font Shop’s standard license has a similar provision: “You do have the right to modify and alter Font Software for your customary personal and business use, but not for resale or further distribution.” Adobe’s and Agfa Monotype’s licenses contain no such provision. Monotype’s says instead that “You my not alter Font Software for the purpose of adding any functionality.... You agree not to adapt, modify, alter, translate, convert, or otherwise change the Font Software….” If your license forbids improving the font itself, the only legal way to tune it is through a software override. For example, you can use an external kerning editor to override the kerning table built into the font. This is the least elegant way to do it, but a multitude of errors in fitting and kerning can be masked, if need be, by this means.

10.2 Ethical and Aesthetic Considerations

0.2.1 If it ain’t broke….

Any part of the font can be tuned – lettershapes, character set, character encoding, fitting and sidebearings, kerning table, hinting, and, in an OpenType font, the rules governing character sub-situation. What doesn’t need tuning or fixing shouldn’t be touched. If you want to revise the font just for the sake of revising it, you might do better to design your own instead. And if you hack up someone else’s font for practice, like a biology student cutting up a frog, you might cremate or bury the results.

Page 20: Howard 227 magazine

10.2.2 If the font is out of tune, fix it once and for all.

One way to refine the typography of a text is to work your way through it like by line, putting space in here, removing it there, and repositioning errant characters one by one. But if these refinements are made to the font itself, you will never need to make them again. They are done for good.

10.2.3 Respect the text first of all, the letterforms second, the type designer third, the foundry fourth.

The needs of the text should take precedence over the layout of the font, the integrity of the letterforms over the ego of the designer, the artistic sensibility of the designer over the foundry’s desire for profit, and the founder’s craft over a good deal else.

10.2.4 Keep on fixing.

Check every text you set to see where improvements can be made. Then return to the font and make them. Little by little, you and the instrument – the font, that is – will fuse, and the type you set will start to sing. Remember, though, this process never ends. There is no such thing as a perfect font.

10.3 Honing The Character Set

10.3.1 If there are defective glyphs, mend them.

If the basic lettershapes of your font are poorly drawn, it is probably better to abandon it rather than edit it. But many fonts combine superb basic letterforms with alien or sloppy supplementary characters. Where this is the case, you can usually rest assured that the basic letterforms are the work of a real designer, whose craftsmanship merits respect, and that the supplementary characters were added by an inattentive foundry employee. The latter’s errors should be remedied at once. You may find for example that analphabetic characters such as @ + ± × = - − © are too big or too small, too light or too dark, too high, or too low, or are otherwise out of tune with the basic alphabet. You may also find that diacritics in glyphs such as å çé ñ ô ü are poorly drawn, poorly positioned, or out of scale with the letterforms.José Mendoza y Almeida’s Photina is an excellent piece of design, but in every weight and style of Mono-type digital Photina, as issued by the foundry, arithmetical signs and other analphabetics are out of scale and out of positin, and the copyright symbol at sign are alien to the front. The raw versions are show in grey, corrected versions in black.

Frederic Goudy’s Kennerley is a homely but quite pleasant type, useful for many purposes, but in Lanstons’s digital version, the letterforms are burdened with some preposterous diacritics. Above left: four accented sorts as issued by the foundry. Above right: corrected versions. All fonts are candidates for similar improve-ment. Below left: four accented sorts from Robert Slimbach’s carefully honed Minion, as origionally issued by Adobe in 1989. Below right: the same glyphs, revised by Slimbach ten years later, while preparing the OpenType version of the face.

Page 21: Howard 227 magazine

21

10.3.2 If text figures, ligatures or other glyphs you need on a regular basis don’t reside on the base font, move them.

For readable text, you almost always need figures, but most digital fonts are sold with titling figures instead. Most digital fonts also include the ligatures fi and fl but not ff, ffi, ffl, fj or ffj. You may find at least some of the missing glyphs on a supplementary font (an ‘expert font’), but that is not enough. Put all the basic glyphs together on the base font. If, like a good Renaissance typographer, you use only upright parentheses and brackets(see § 5.3.2), copy the upright forms from the roman to the italic font. Only then can they be kerned and spaced correctly without fuss.

10.3.3 If glyphs you need are missing altogether, make them.

Standard ISO digital text fonts (PostScript or TrueType) have 256 slots and carry a basic set of Western European characters. Eastern European characters such as ą ć đ ė ğ ħ ī ň ő ŗ ș ť ů are usually missing. So are the Welsh sorts ŵ and ŷ, and a host of characters needed for African, Asian and Native American languages. The components required to make these characters may be present on the font, and assembling the pieces is not hard, but you need a place to put whatever character you make. If you need only a few and do not care about system compatibility, you can place them in wasted slots – e.g., the ^ < > \ | ~ ` positions, which are accessible directly from the keyboard, or slots such as ¢ ÷ 123 ™ ☐ 0/100 l, which can be reached through insertion utilities or by typing character codes or by customizing the keyboard. If you need to add many such characters, you will need to make a supplementary font or, better yet, an enlarged font (TrueType or OpenType). If these are for your own use only the extra characters can be placed wherever you wish. If the fonts are too be shared, every new glyph should be labeled with its PostScript name and Unicode number.

10.3.4 Check and correct the sidebearings.

The spacing of letters is part of the essence of their design. A well-made font should need little adjust-ment, except for refining the kerning. Remember, however, that kerning tables exist for the sake of problematical sequences such as ƒ*, gy, “A, To, Va and 74. If you find that simple pairs such as oo or oe require kerning, this is a sign that the letters are poorly fitted. It is better to correct the sidebearings than to write a bloated kerning table. The spacing of many analphabetics, however, has as much to do with editorial style as with typographic design. Unless your fonts are custom made, neither the type designer nor the founder can know what you need or prefer. I habitually increase the left sidebearing of semicolon, colon, question and exclamation marks, and the inner bearings of guillemets and parentheses, in search of a kind of Channel Island compromise: neither the tight fitting preferred by most anglophone editors nor the wide-open spacing customary in France. If I worked in French all the time, I might increase these side-bearings further.

Three options for spacing of basic analphabets in Monotype digital Centaur: foundry issue(top); French spacing(bottom); and something in between. Making such adjustments one by one by the insertion of fixed spaces can be tedious. It is easier by far, if you know what you want and you want it consistently, to incorporate your preferences into the font.

Page 22: Howard 227 magazine

10.3.5 Refine the kerning table.

Digital type can be printed in three dimensions, using zinc or polymer plates, and metal type can be printed flat, from photos or scans of the letterpress proofs. Usually, however, metal type is printed in three dimensions and digital type is printed in two. Two-dimensional type can be printed more cleanly and sharply than three-dimensional type, but the gain in sharpness rarely equals what is lost in depth and tex-ture. A digital page is therefor apt to look aenemic next to a page printed directly from handset metal. This imbalance can be addressed by going deeper into two dimensions. Digital type is capable of refinements of spacing and kerning beyond those attainable in metal, and the primary means of achieving this refinement is the kerning table.Always check the sidebearings of figures and letters before you edit the kerning table. Sidebearings can be checked, quickly for errors by disabling kerning and setting characters, at ample size, in pairs: 11223344 … qqwweerrttyy…. If the spacing within the pairs appears to vary, or if it appears consistently cramped or loose, the sidebearings probably need to be changed. The function of a kerning table is to achieve what perfect sidebearings cannot. A thorough check of the kerning table therefore involves checking all feasible permutations of characters: 1213141516 … qwqeqrqtqyquqiqoqp …(a(s(d(f(g(h(j(k(l … )a)s)d)f)g … -1-2-3-4-5 … TqTwTeTrTtTyTuTiToTp … and so on. This will take several hours for a standard ISO font. For a full pan-European font, it will take sever-al days. Class-based kerning (now a standard capability of font editing software) can be used to speed the process. In class-based kerning, similar letters, such as a á â ä à å ã ă ā ą are treated as one kerned alike. This is an excellent way to begin when you are kerning a large font, but not a way to finish. The combina-tion Ta and Tä, Ti and Tï, il and íl, i) and ï), are likely to require different treatment. Kerning sequences such as Tp, Tt and f( may seem to you absurd, but they can and do occur in le-gitimate text. (Tpig is the name of a town in the mountains of Dagestan, near the southern tip of Russian Federation; Ttanuu is an important historical site on the British Columbia coast; sequences such as y = ƒ(x) occur routinely in mathematics.) If you know what texts you wish to set with a given font, and know that combinations such as these will never occur, you can certainly omit them from the table. But if you are preparing a font for general use, even in a single language, remember that it should accommodate the occasional foreign phrase and the names of real and fictional people, places and things. These can involve some unusual combinations. (A few addition examples: McTavish, FitzWilliam, O’Quinn, dogfish, jock o’-lantern, Hallowe’en.)It is also wise to check the font by running a test file – a specially written text designed to hunt out miss-ing or malformed characters and kerning pairs that are either too tight or too loose. It is nothing unusual for a well-groomed ISO font (which might contain around two hundred working characters) to have a kerning table listing a thousand pairs. Kerning instructions for large Open-Type fonts are usually stored in a different form, but if converted to tabular form, the kerning data for a pan-European Latin font may easily reach 30,000 pairs. Remember, though, that the number isn’t what counts. What matters is the intelligence and style of the kerning. Remember too that there is no such thing as a font whose kerning cannot be improved.

10.3.6 Check the kerning of the word space.

The word space – that invisible blank box – is the most common character in almost every text. It is nor-mally kerned against sloping and undercut glyphs: quotation marks, apostrophe, the letters A, T, V, W, Y, and often to the numerals 1, 3, 5. It is not, however, normally kerned more than a hair either to or away from a preceding lowercase ƒ in either roman or italic.

Page 23: Howard 227 magazine

23

A cautionary example. Most of the Monotype digital revivals I have tested over the years have serious flaws in the kerning tables. One problem in particular recurs in Monotype Baskerville, Centaur and Arrighi, Dante, Fournier, Gills Sans, Poliphilus and Baldo, Van Dijck and other masterworks in the Monotype collection. These are well-tried faces of suberb design – yet in defiance of tradition, the maker’s kerning tables call for a large space (as much as M/4) to be added whenever the ƒ is followed by a word space. The result is a large white blotch after every word ending in ƒ unless a mark of punc-tuation intervenes.

Monotype digital Van Dijck, before and after editing the kerning table. As issued, the kerning table adds 127 unites (thousandths of an em) in the roman, and 228 in the italic, between the letter ƒ and the word space. The corrected table adds 6 units to the roman, none in the italic. Other, less drastic refinements have also been made to the kerning table used in the second two lines.

Professional typographer may argue about whether the added space should be zero, or ten, or even 25 thousandths of an em. But there is no professional dispute about whether it should be on the order of an eighth or a quarter of an em. An extra space that large is a prefabricated typographic error – one that would bring snorts of disbelief and instantaneous correction from Stanley Morison, Bruce Rogers, Jan van Krimpen, Eric Gill and others on whose expertise and genius the Monotype heritage is built. But it is an easy error to fix for anyone equipped with the requisite tool: a digital font editor.

10.4 Hinting

10.4.1 If the font looks poor at low resolutions, check the hinting.

Digital hints are important chiefly for the sake of how the type will look on screen. Broadly speak-ing, hints are of two kinds: generic hints that apply to the font as a whole and specific hints applicable only to individual characters. Many fonts are sold unhinted, and few fonts indeed are sold with hints that cannot be improved. Manual hinting is tedious in the extreme, but any good font editor of recent vintage will include routines for automated hinting. These routines are usually enough to make a poorly hinted text font more legible on screen. (in the long run, the solution is high-resolution screens, making the hinting of fonts irrelevant except at tiny sizes.)

10.5 Naming Conventions

The presumption of common law is that inherited designs, like inherited texts, belong in the public domain. New designs (or in the USA, the software in which they are enshrined) are protected for a certain term by copyright; the names of the designs are also normally protected by trademark legisla-tion. The names are often better protected, in fact, because infringements on the rights conferred by a trademark are often much easier to prove than infringements of copyright.

Page 24: Howard 227 magazine

Nevertheless there are times when a typographer must tinker with the names manufacturers give to their digital fonts. Text fonts are generally sold in families, which may include smorgasbord of weights and variations. Most editing and typesetting software takes a narrower, more stereotypical view. It recognizes only the nuclear family of roman, italic, bold and bold italic. Keyboard shortcuts make it easy to switch from one to another of these, and the switch codes employed are generic. Instead of saying “Switch to such and such a font at such and such a size,” they say, for instance, “Switch to this font’s italic counterpart, whatever that may be.” This convention makes the instructions transferable. You can change the face and size of a whole paragraph or file and the roman, italic and bold should all convert correctly. The slightest inconsistency in font names can prevent this trick from working – and not all manufacturers name their fonts according to the same conventions. For the fonts to be linked, their family names must be identical and the font names must abide by rules known to the operating system and software in use. If, for example, you install Martin Majoor’s Scala or Scala Sans (issued by FontShop) on a PC, you will find that the italic and the roman are unlinked. These are superbly designed fonts, handsomely kerned and fully equipped with the requisite text figures and small caps – almost everything a digital font should be – but the PC version must be placed in a font editor and renamed in order to make them work as ex-pected.

Page 25: Howard 227 magazine

25

Why is Typography so important?https://blog.kissmetrics.com/how-typography-affects-conver-sions/

If your copy is hard to read because the individual letters are too close together, the typeface size is too small, or the words are so close together that people find it hard to distinguish one word from the other, then your visitors will act in one of two ways.

They will either leave, causing your conversion rate to drop, or they will stay and struggle through the copy, most likely not reaching the end because it is exhausting. Afterward, what the visitor will remember is not the message you are trying to get across, but the effort it took to understand the copy.

Typography is crucial because it can make the whole process of understanding and comprehending infor-mation effortless. A typographically well-formatted copy ensures that the focus remains on the content and not on the effort required to read it.

If you study how humans read the web, a reading pattern is clearly evident. This pattern can be modified, but only with the help of a visual hierarchy. Typography can help you create a visual hierarchy by making the more important elements stand out through size, color, or style. For example, an excellent way to pres-ent benefits or product features is with bullets.

To truly master the art of creating the perfect visual hierarchy, we need to first understand how people organize and perceive information, and Gestalt’s Principles of Perception explain this very well.

As humans, we love to organize everything. This habit is as ingrained in our human psyche as perceiving faces in inanimate objects. Gestalts theory states that humans organize visual elements into groups based on five contexts:

SimilarityContinuationClosureProximityFigure and GroundNow, for example, if you want to apply Gestalt’s theory in your copy, you could use the principle of similar-ity and make all of the elements on a page visually similar, except the call to action, which you could make different, causing it to stand out.

Page 26: Howard 227 magazine

Web Design is 95% Typography

95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.

Back in 1969, Emil Ruder, a famous Swiss typographer, wrote on behalf of his contemporary print mate-rials what we could easily say about our contemporary websites:

Today we are inundated with such an immense flood of printed matter that the value of the individual work has depreciated, for our harassed contemporaries simply cannot take everything that is printed today. It is the typographer’s task to divide up and organize and interpret this mass of printed matter in such a way that the reader will have a good chance of finding what is of interest to him.With some imagination (replace print with online) this sounds like the job description of an information designer. It is the information designer’s task “to divide up and organize and interpret this mass of print-ed matter in such a way that the reader will have a good chance of finding what is of interest to him”.Macro-typography (overall text-structure) in contrast to micro typography (detailed aspects of type and spacing) covers many aspects of what we nowadays call “information design”. So to speak, information designers nowadays do the job that typographers did 30 years ago:

Typography has one plain duty before it and that is to convey information in writing. No argument or consideration can absolve typography from this duty. A printed work which cannot be read becomes a product without purpose.Optimizing typography is optimizing readability, accessibility, usability(!), overall graphic balance. Organizing blocks of text and combining them with pictures, isn’t that what graphic designers, usability specialists, information architects do? So why is it such a neglected topic?Too few fonts? Resolution too low?The main—usually whiny—argument against typographical discipline online is that there are only few fonts available. The second argument is that the screen resolution is too low, which makes it hard to read pixelated or anti-aliased fonts in the first place.The argument that we do not have enough fonts at our disposition is as good as irrelevant: During the Italian renaissance the typographer had one font to work with, and yet this period produced some of the most beautiful typographical work:The typographer shouldn’t care too much what kind of fonts he has at his disposal. Actually the choice of fonts shouldn’t be his major concern. He should use what is available at the time and use it the best he can.

Page 27: Howard 227 magazine

27

Slightly more famous examples of unornamental websites that treat text as interface are: google, ebay, craigslist, youtube, flickr, Digg, reddit, delicious. Control over typography is not just a basic design necessity, knowing how to treat text as a user interface is the key factor for successful Web design. Success-ful websites manage to create a simple interface AND a strong identity at the same time. But that’s another subject.

UPDATE: As it raised so many eyebrows, hands and questions I decided to write a follow up to this article.

https://ia.net/blog/the-web-is-all-about-typography-period

Choosing a typeface is not typographyThe second argument is not much better. In the beginning of printing the quality of printed letters was way worse than what we see on the screen nowadays. More importantly, if handled professionally, screen fonts are pretty well readable.Information design is not about the use of good typefaces, it is about the use of good typography. Which is a huge difference. Anyone can use typefaces, some can choose good typefaces, but only few master typog-raphy.

Treat text as a user interfaceYes, it is annoying how different browsers and platforms render fonts, and yes, the resolution issue makes it hard to stay focused for more than five minutes. But, well, it is part of a web designer’s job to make sure that texts are easy and nice to read on all major browsers and platforms. Correct leading, word and let-ter spacing, active white space, and dosed use of color help readability. But that’s not quite it. A great web designer knows how to work with text not just as content, he treats “text as a user interface”. Have a look at Khoi Vinh’s website, and you’ll probably understand what that means:

Page 28: Howard 227 magazine

When Typography Speaks Louder than Words

By C. Knight, J. Glaserhttp://www.smashingmagazine.com/2012/04/13/when-typography-speaks-louder-than-words/

To avoid any misunderstanding, let’s clarify what the terms “visual language” and “verbal language” mean. In profes-sional graphic design, visual language refers to the meanings created by the visual appearance of both text and image. In this article, the term “visual language” refers to the character and significance created by carefully selected typography. Verbal language is the literal meaning of words, phrases and sentences.In this first of a two-part series, we will look at the powerful effect that typogra-phy has in taking control of meaning. We will discuss a range of examples, from verbal language that inspires and shapes visual treatment to visual language that dominates verbal meaning. The implica-tions of typographic choices in meaning and interpretation will also be examined. And we will show how the same message can be presented in a number of ways to convey and encourage a diversity of responses.We all have different cultural back-grounds and experiences that affect our perception of type one way or anoth-er. So, regardless of the designer’s skill and effort, a number of uncontrollable aspects remain, including the viewer’s perception, expectations, knowledge, experiences and preferences. And while accounting for all such unpredictable re-sponses to type is impossible, awareness is critical.

Clever graphic designers love to use typography to explore the interac-tion between the look of type and what type actually says. In commu-nicating a message, a balance has to be achieved between the visual and the verbal aspects of a design.Sometimes, however, designers explore the visual aspect of type to a much greater extent than the verbal. In these cases, the visual language does all the talking. This article explores when the visual elements of typography speak louder than words.Cal Swan, author of Language and Typography, makes this point well when he says, “These two distinct areas often come together in prac-tice as there is clearly a very strong relationship between the conception of the words as a message and their transmission in visible form.”

Page 29: Howard 227 magazine

29

Page 30: Howard 227 magazine

inevitable A project interpreting the importance of typography in society.

Creative minds: Maddie Zatulak, Asiah Bennett, Sarah HowardHelp: Jeremy from Home Depot, Ricky and Reba the hole punchers, St. Augustine Oak trees

Project Brief

Situation: To create a public installation that depicts and raises awareness of how import-ant typography is in the structure of society.

Investigation: With the choosing of the word, inevitable, the idea of creating the public installation out of something that is in fact inevitable was only a natural decision. The site chosen is one that is passed by nearly every person that enters the historic downtown area of St. Augustine, that is on the side of Ponce Hall, covered in oak trees and Spanish moss, coming over the Bridge of Lions and staying straight until forced to turn left or right. This area was chosen because it it unavoidable as is typography.

Insight: The site chosen is unavoidable, as is typography, which also defines the word cho-sen, inevitable. Spanish moss is also inevitable, so the pixels are to be made from Spanish moss. This also ties typography and the chosen word to Florida.

Idea: Through much thought into what to make the pixels out of and how we would go about making them, we thought of the most Ludacris ideas. Smoke bombs, hair exten-sions, cigarette butts; yes, all of these objects are highly unavoidable, but we finally came up with the idea to use Spanish moss. It’s literally an infestation, parasite, inevitable to the trees (oak) here in Florida, so what better substance to use that it. Not that typography is a parasite, but there is really no way to avoid it. It’s on street signs, the bricks we walk on everyday, the stove top, you name it. One could say that typography is an infestation.

Budget This budget is assigned per individual in the group

• Cardboard poster: $6• Hole Punchers- 2 inch and ¾ inch: $16• Chicken wire: $11

Research We really didn’t need to do much research once we came up with the idea of using Spanish moss. It’s literally everywhere. We decided to go with a typeface called Birds of Paradise. It’s a really beautiful serif-y type that is quite elegant. We figured it would add to the fluidity of using Spanish moss, you know, give the word

Page 31: Howard 227 magazine

31

movement. Next was figuring out where we were going to place our word. By the bridge? No, the bridge isn’t necessarily inevitable. Aha! What is inevitable is the area on Cordova street that you are forced to make a right or left at once you reach Ponce. That spot is completely unavoid-able, and quite lush, so our project would blend nicely with the natural environment, being moss made and all.

Final Product It actually came out quite beautifully. A few boys were nice enough to help us carry our project to the location. The only problem with this whole day light savings thing was that by the time we had our project up, it was too dark to capture an image… it didn’t help that our piece blended in so nicely with its surroundings.

Challenges The only challenges we really faced were the crappy plastic hole punchers breaking on us and the chicken wire cutting our skin and making us bleed. How did we look past these obsta-cles? Exchange the hole punchers for some fresh ones and man up to the bloody hands.

Side Note Worked really well with my group, very fun and team oriented people and everyone put in a fair share. <3 wouldn’t have had it any other way.ALSO, wouldn’t have been able to do it without Prof. Luciana pushing us to think of greater ideas, I mean what we were thinking up before was just absurd.

Page 32: Howard 227 magazine

&