BOLD VOL.
001 Dec 2012
the
about
BOLD
VOL.
001 DEC 2014
TYPOGRAPHY OVERLOOKED
EDITION guide
YourTOTYPE
BOLD VOL.
001 Dec 2012
Image by Craig Ward
THE
VOL.
001
CONTENTS December 2014 Back to basics
Stopping sloppy typography The devil is in the details: Automated errors and Anemic type - Pay attention now Angela Liao Craig Ward Mana Morimoto Marcos Faunner Michael Williamson
Pg. 7-10 Type casting What not to do
Designer & Editor Anabel Anderson
TRUTH
74 King St. St. Augustine, Fl 32084
Office: 352.494.6799 AAnderson380@flagler.edu
Editorial Type
Getting hooked
Overlooked What is type?
The art of installation: A project dedicated to the importance of type in society
Type meets fashion
Addicting type games
Visual magic of bold fashion and bolder type
Expand your knowledge with these online and mobile games
Pg. 29-30
Pg. 19-20
Anabel Anderson Chelsea Reppin Nicholas Droleski
Pg. 31-34
Type Lessons Feat. Massimo Vignelli Short, Sweet, and to the point: 5 life lessons to live by
Design Wisdom Feat. Massimo Vignelli
Pg. 11-12
Short bits of wisdom by Thierry Brunfaut
What to learn about type: The rules and how to break them
Pg. 35-36
Antipo Shop Fast Company Design Victoria Macey Angela Sucar David Carson James MacCreigh Stefan Sagmeister
Buisness + Innovation + Design Fonts into frames Famous fonts translated into designer eyeglasses
Pg. 13-18
Pg. 37-38
Grooming the font Meaningful marks
Everything you need to know about editing fonts Sany Design Deutsche & Japaner Design Service Plan Design Herb Lubalin John Rabbit Nick Keppol Sean Freeman Jung Lee
Pg. 21-28
Honorable mentions Designs & Design Typographical design too good not to be featured
Pg. 39-46
Letter from the Publisher Prepare yourself for full immersion into the vast and bold world of typography; the overlooked edition. Where everything is not what it appears to be and the disillusion of the mundane transports you into the optical realities of the impact of type on society. By conceptualizing and developing a spatial installation, “overlooked” was able to warp people’s senses and draw them into the world of the designer. From articles about the basics of type to columns about its innovation, “BOLD” magazine takes you on an intergalactic tour of everything that’s wondrous in our typographic universe. Here you will feast your eyes on stellar images and experience things that stimulate all your senses. Enjoy the ride ~
2
PREPARE FOR TOTAL IMMERSION
4 Art by Tara Donovan
Art by Pae White
6 Designed t by Tibor Kalman Designed by Veronique Vienne
Art by Michael Williamson
Back to basics
Stopping sloppy typography
John D. Berry Editor & Typographer johndberry.com
Honorary president of ATypI (Association Typographique Internationale former editor & publisher of U&lc (Upper & lower case) Written & edited books; Language culture type: international type design in the age of unicode (2002) Contemporary newspaper design: Shaping the news in the digital age (2004) U&lc: Influencing design & typography (2005) Current program manager of fonts at Microsoft
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 quotation 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 supposed 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 simultaneously 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 “typewriter 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 typesetting 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 “plat!” 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 or mistake. Really big, and right out there in plain sight.
Art by Mana Morimoto
The devil is in the details
“Too much of the signage and printed matter that we read - and that we, if we’re designers or typographers, create. . . is riddled with mistakes . . . “
This 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 typographers, 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 forgotten 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.
8
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 Open Type 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 situations; small caps are a typographic 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.
Designed by Angela Liao
Designed by Marcos Faunner via Behance
Automated errors
Designed by Criag Ward
As my own small gesture toward improvement, I’ll point out a couple of the more obvious problems 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-processing programs and page-layout programs that offer the option of automatically changing them to typographe rs’ 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 quotation 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 type
Pay attention. Now
The 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. Otherwise, it’s silly. (And—here comes that word again - distracting.)
There 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 several 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.
“. . . forget about the ‘small caps’ command - forget it ever exsisted, and never, ever, touch it again.”
10
Massimo Vignelli 5 phrases to live by Anthony Neil Dart
Visual Design & Motion anthonyneildart@gmail.com www.anthonyneildart.tv
Vignelli-isms poster series: In recognition of his outstanding contribution to the world of graphic design.
Massimo Vignelli born 1931 in Milan, Italy. In 1971, Massimo founded Vignelli Association with his wife, Lella. He and his wife continue to work from their New York office.
1.) One life is too short for doing everything.
3.) If you can design one thing, you can desgn everything.
5.) The life of a designer is a life of fight against ugliness.
Vignelli was involved with filmmaker Gary Hustwit in the documentary Helvetica, about the typeface of the same name. Vignelli also recently updated his 1972 New York City subway map. Vignelli works firmly with the modernist tradition, and focuses on simplicity through the use of basic geometric forms in all his work.
“For us, the visual disease is what we have around, and what we try to do is cure it somehow with design.“
2.) We like design to be visally powerful,
intelectually elegant, and above all timeless.
4.) If you do it right it will last forever.
12
Type casting
The rules of type and how to break them
Steven Brower Designer, Writer, & Educator stevenbowerdesign.com
Former director/ art director of “Print” Written and designed books Current director of a low residency MFA program “Get your Masters with your Masters” for educators and working professionals at Marywood University in Scranton, Pennsylvania
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 measure 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 supermarkets and convenience stores, had more in common with soap detergent and cereal boxes than with their much more dignified older brother, the hardcover first edition 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.
“. . .viewed in the design world as the tawdry stepchild of true literature and design, gaudy and unsophisticated. “ Pulp Magazine
What I learned So, when I made my entry into the elite world of literature, I began in the “bullpen” of a mass-market house. I believed I would be afforded a good opportunity to learn something about type and image. Indeed, in my short tenure there, I employed more display typefaces in a year and a half than I will in the rest of my lifetime. And, I abused type more than I ever dreamed possible. 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 illustrations to create the package. It was here that I learned my earliest lessons in the clichés of typography. Mass-market paperbacks are divided 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 Genre Square serif Script and cursive LED faces Nueland Latin Fat, round serif faces Sans serif Hand scrawl 1950s bouncy type Western Romance Science Fiction African (in spite of the fact that the typeface is of German origin) Mystery Children’s Nonfiction Horror Humor/Teen titles
Designed by Angela Sucar
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 images 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 informality 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 illustration. 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 importance of good letter-spacing became paramount. Finding 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.
14
The rules As 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 individual 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:
Designed by Fast Company
Serif Bodoni Caslon Cheltenham Garamond Sans Serif Franklin Gothic Futura Gill Sans News Gothic Trade Gothic
“You should never condense or extend type . . . this leads to unwanted distoritions“
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 designer’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.
“It is no substitute for a well-reasoned conceptual solution to the design problem at hand.“
Designed by Victoria Macey
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 0 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 corrected 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 equivalent 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. 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.
16
Lastly, 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 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.”’ A 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 Pushpin 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 developed with the wood-type 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 typeface that is so badly designed that it could not be handsomely and effectively used in the hands of the right ... designer.”’ Of course, this was before the novelty 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, concurs: “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.
Designed by Stefan Sagmeister
Designed by Antipo Shop
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, regardless 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 letter, or even word by word, but, rather, phrase by phrase. A consensus favors an average of ten to twelve words per line.
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—Tog 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.
“The audience should always be paramount in the designers approach, and it is the audience . . . that defines the the level of difficulty and ease with which a piece is read. “
“ ‘Good designers can make use of almost anything. The typeface is the point of departure, not the destination.’ “ Designed by David Carson
18
Getting Hooked Insanely addictive font games Grace Smith
Web designer twitter.com/gracesmith mashable.com/author/grace-smith/
is an experienced web designer and founder of Postscript5, a successful micro design studio based in Northern Ireland. Grace is the creator of The Freelance Feed, the premium resource on freelance related resources and is a wireframe junkie.
Design by Jeremy Pettis
1.) The Font Game From I Love Typography
The "rather difficult font game" from I Love Typography tests your general knowledge of fonts by displaying 34 samples. Each answer is multiple choice — you click one of four answers, and then move on to the next question.
Typography helps you engage your audience and establish a distinct, unique personality on your website. Knowing how to use fonts to build character in your design is a powerful skill, and exploring the history and use of typefaces, as well as typographic theory, can help. This selection of online and mobile font games will help test and expand both your knowledge and identification skills.
Design by Michael Charles
Design by Jeremy Pettis
3.) Kern Type
4.) Type war
Kern Type is a game in which you try to achieve pleasant and readable text by distributing the space between letters, called “kerning” by typographers. You can move the letters by dragging them from left to right, and your score depends on how close you are to a typographer’s solution.
Typewar is a typographical skill game that tests your knowledge and awareness of individual fonts. It presents you with a letter and two choices — you can choose to answer or skip to the next question. New to the site are quests, which test your knowledge of a particular subset of typefaces.
“ The problem with the world is that the intelligent people are full of doubt, while the stupid people are full of confidence.“ - Charles Bukowski Design by Dan Hoopert Found on Colagene.com
2.) Type Connection Type Connection is a fun "type dating" game that helps you learn how to pair typefaces. You start by choosing a typeface to pair, such as Univers or Archer, each having its own unique personality. Then you look for a match by developing a strategy, exploring typographic terminology and learning type history.
1.) The Font Game From I Love Typography
I Shot The Serif is an arcade puzzle game for budding designers. All you have to do is shoot the the Serif fonts within the time limit to move to the next stage.
20
“ Typography begins with arranging meaningful marks that are already made. “
Legal considerations Check the license before tuning a digital font
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.
Digital fonts are usually licensed to the user, not sold outright, and the license terms vary. Some manufacturers 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 manufacturer - 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 phototype 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.” FontShop’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 may 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.
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 instruments they play.
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 11eed be, by this means.
Designed by Sean Freeman
Grooming the font
Careful editing
Barry Manelo Editor & Typographer YOLO.com
Honorary unicorn (Association of all that is rainbows and unicorns and magic and puppies and kittens) (Super sassy pants) Written & edited books; Language of unicorns: international type design in the age of unicorn (2002) Contemporary unicorn design: Shaping the news in the unicorn world (2004) God bless the almighty unicorns for they are the mystical beasts of the world and should be forever cherished as such Designed by Sany Design
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.
22
Jose Mendoza y Almeida’s Photina is an excellent piece of design, but in every weight and style of Monotype digital Photina, as issued by the foundry, arithmetical signs and other analphabetics are out of scale and out of position, and the copyright symbol and at sign are alien to the font. The raw versions are shown in grey, corrected versions in black.
Ethical and Aesthetic considerations If it aint 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 substitution. 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.
éùôã > éùôã Frederic Goudy’s Kennerley is a homely but quite pleasant type, useful for many purposes, but in Lanston’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 improvement. Below left: four accented sorts: from Robert Slimbach’s carefully honed Minion, as originally issued by ·Adobe in 1989. Below right: the same glyphs, revised by Slimbach ten years .later, while preparing the OpenType version of the face.
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 line 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.
áèïû > áèïû
Respect the text first of all, the letterforms second, the type designer third, the foundry fourth.
Designed by Deutsche&Japaner Creative Studio
Boning the character set
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.
If there are defective glyphs, mend them
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 the perfect font. Ethical and Aesthetic Considerations
Designed by John Rabbit
“ 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 . . .“
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 @ + ± x = · - - © 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. I+2=3<9>6±I· 2X4 a + b = c · a@b · © 2007 I+ 2 = 3 < 9 > 6 ± 1· 2 X 4 a + b = c · a@b · © 2007
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 text 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 S\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. 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 à ć d ė g h ï ñ ö r ś t û are usually .missing. So are the Welsh sorts w and y, 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 characters 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 “ < > \ I - ‘ positions, which are accessible directly from the keyboard, or slots such as ¢ + 123 TM o/oo :, which can be reached through insertion utilities or by typing character codes or by customizing the keyboard.
24
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 to be shared, every new glyph should be labeled with its PostScript name and Unicode number. Check and correct the sidebearings. The spacing of letters is part of the essence of their design. A well-made font should need little adjustment, except for refining the kerning. Remember, however, that kerning tables exist for the sake of problematical sequences such as f*, 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 an alphabetics, 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 wideopen spacing customary in France. If I worked in French all the time, I might increase these sidebearings further. abc: def; ghx? klm! «non» abc: def; ghx? klm! «hmm» ab: def; ghx? klmI « oui » Three options for the spacing of basic analphabetics 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. 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 irl 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 texture. A digital page is therefore apt to look aenemic next to a page printed directly from handset metal.
Grooming the font 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 ... qwqeqrqtqyquqiqoqpq ... (a(s(d(f(g(h(j(k(l...)a)s)d)f) g ... -1-2-3-4-5 ... TqTwTeTrTtT'yTuTiToTp… And so on. This will take several hours for a standard ISO font. For a full pan-European font, it will take several 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 á â ä à å ã â ā q, are treated as one and kerned alike. This is an excellent way to begin when you are kerning a large font, but not a way to finish. The combinations Ta and Ta, Ti and Tl, il and il, 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 legitimate text. (Tpig is the name of a town in the mountains of Dagestan, near the southern tip of the Russian Federation; Ttanuu is an important historical site on the British Columbia coast; sequences such as y = j(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 additional examples: McTavish, FitzWilliam, O'Quinn, dogfish, jack 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 missing or malformed characters and kerning pairs that are either too tight or too loose. On pages 204-205 is a short example of such a test file, showing the difference between an ungroomed font and a groomed one.
Designed by Service Plan
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 OpenType 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. For a well-groomed Latin-Greek-Cyrillic font, decompiling the kerning instructions can generate a table of 150,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.
“ The spacing of the letters is part of the essence of their design. A wellmade font should need little adjustment, except for refining the kerning.”
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 normally 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 fin either roman or italic. 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, Gill Sans, Poliphilus & Blado, Van Dijck and other masterworks in the Monotype collection. These are well-tried faces of superb 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 there is followed by a word space. The result is a large white blotch after every word ending unless a mark of punctuation intervenes.
26
Is it east of the sun and west of the moon - or is it - west of the moon and east of the sun? Monotype digital Van Dijck, before and after editing the kerning table. As issued, the kerning table adds 127 units (thousandths of an em) in the roman, and 22.8 in the italic, between the letter f and the word space. The corrected table adds 6 units in 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 typographers 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 topographic 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. This error documented in methodical tests of Monotype fonts in 1991 - was still present in fonts purchased from Agfa Monotype in the summer of
Designed by Jung Lee
2004
Hinting
Naming Conventions
If the font looks poor at low resolution, check the hinting Designed by Nick Keppol
“ Typography begins with arranging meaningful marks that are already made. “
Digital hints are important chiefly for the sake of how the type will look on screen. Broadly speaking, 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.)
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 legislation. 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. 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 a 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 transfer-' able. 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 versions must be placed in a font editor and renamed in order to make them work as expected.
28
Lenka Srsnova Fashion Editorial Sergiu Naslau
Web & Graphic Designer https://twitter.com/Serjeniu www.wabbaly.com
I am a web and graphic designer, with a background in marketing, interested in visual communication and more. I created wabbaly.com to share my point of view on this visual world.
Why this font choice? Why not go with something more “stylish”? (vogue’s bodoni, for example?) When it came the type choice, everything just came together. It was a really natural process for the graphic layout as there was no need to play with the background and suppress the clothing. I combined two fonts that I thought that they would fit into Lenka’s visual language. If Didot or Bodoni are fonts for elegant high end fashion editorials and brands, this is the equivalent type for the new and fresh Lenka Srsnova visual world.
What was the client’s feedback ? In this case the client was the photographer working for fashion magazine and basically gave me free hand, to do whatever I want. I think they were pleased about the final result and had no objections. That’s the type of collaboration every designer likes and deserves. Do whatever you like.
You want something to look really good? Just add type. This is what Veronika Licakova did to add some “visual magic” to Lenka Srsnova fashion editorial for Emma fashion magazine. To find out more about the project and the steps taken in its creation, I approached Veronika Licakova, the designer responsible for the layout design.
Who is Lenka Srsnova and what was the idea behind the project?
Why the need to add typography to these pictures? What do they bring to the message?
Lenka Srsnova is a very bold and talented fashion designer that completely lacks fear of colors and patterns. In fact, her clothes are very graphical. Fashion photographer Branislav Simoncik, who made the photos of the new collection for Emma fashion magazine, called and showed me the photos. He asked if I would be able to push the editorial photos further and add some graphical treatment. Lenka’s clothes are really playful so he wanted the editorial to look as good.
There was no special brief or assignment for the project. Basically, just do something nice with it. When I saw the photos color and style, it just came to me what kind of playful typography I would like to see in it. It was one of those rare projects that took me literally just a few seconds to figure out, as the source of the source of this instant inspiration was provided by the clothing presented in each photo.
30
Photo by Anabel Anderson
Overlooked What is type?
Creative Director/Photographer: Anabel Anderson Head Communication Director/Spokeswoman: Chelsea Reppin Head creative solution seeker: Nicholas Droleski
Ivestigation
Insight
Idea
Research started with brainstorming as a group and lots of arguing and creative design differences. Once we all decided on a design concept (a word and a material) we all moved on to mapping out and mocking up prototypes of how we wanted our installation to look. Furthering our research and knowledge, we all eventually settled on a font, layout, and location for the typographic installation piece.
the insights I gained from my investigation helped in fueling a concept for the final product of our project. All the steps we had to take before we could start our project was very impactful in terms of looking past initial ideas and reaching for deeper and more well thought out ones.
Our ideas centered on the notion of making the public aware of the importance of typography in society today; and how we could find both a word and material that conveying itâ&#x20AC;&#x2122;s importance that our targeted audience would pick up on. In our case we chose plastic cups in context to the word Overlooked.
Videographer: Charle Reign Volunteer: Chandler towell
Situation To design a project that raises awareness for typography; by creating an installation out of a chosen word and material that represents the importance of that type plays in society today.
32
Challenges To be frank – as far as challenges were concerned almost anything that could have gone wrong did. Firstly, finding the time to get our group together was almost impossible as everyone’s schedules were conflicting. After that, assembling the actual installation was very tedious and didn’t quite go as planned. The wave pattern that was supposed to occur ended up being less noticeable as the anticipated as the 7,500 were being used up at a rapid pace. Also, a mix up in ordering cups occurred and so we ended up having to use two different sizes of solo cups, which took a lot of quick thinking to resolve the issue. Lastly, and one of the biggest issues was moving are rather large installation to its designated site – which after lots of illegal efforts made it to its destination.
Budget
Strategy
Effectiveness
As this was as a group project materialistic needs were split up between group members.
My ideas centered on bringing awareness to typography in society. For this we created a group installation piece portraying the overlooked quality of typography using a material that is just that, overlooked. Plastic cups are an item that most people use and dispose of without thinking twice – the very definition of typography in society today. Therefore our intentions were to portray to the audience of art walk the necessity and underappreciated qualities that typography offers.
Despite all the challenges our project came together to achieve its ultimate goal success. The project was quite successful in that we were able to take our design concept, craft, and passion to another level. The project also gathered quite a bit of favorable feedback from the community, as most people were fascinated and amazed by it. It had the ability to draw its audience in and make them reach for it’s meaning. That was the main goal, to have the community understand typography’s under appreciation.
Each member was responsible for buy in bulk 2500 5oz plastic cups. We ended up switching up that ratio – I only spent about $25. As well as another $20 bucks on a few other supplies such as glue sticks and particleboard.
In the end of what we thought would be a disastrous monstrosity - arose from its ashes a beautiful statement piece of knowledge, and not just for its audience but for its designers as well. It really makes one appreciate the work that goes into typography and all of its very important uses in society. So now the question is, was it worth it? To which I answer with a quote by Aristotle – “ Educating the mind without educating the heart is no education at all”.
34
The form is intended to facilitate their consumption. Honoring his field’s long history of text-based posters and messaging, Brunfaut hoped to settle on a series that was easy to make—and just as easy for people to share. The images do have a bit more impact than they would if you just saw their quotes posted as Tweets or plain text status updates on Facebook, but they avoid falling into that trap of the cloying, laboriously designed quotation poster we’re so used to seeing of late. Brunfaut sees his slapdash images as the "meeting point between the text quote and the designed quote." The quotes are all set in Baseville, the studio’s signature typeface, which is slightly heavier at the bottom of the letters (the base—get it?).
Design Wisdom By Thiery Brunfaut Bite sized bits of design wisdom, made in just 5 minutes. Kyle Vanhemeret
Writter www.fastcompany.com/user/kyle-vanhemert
Over the course of the last two weeks, Thierry Brunfaut, a partner at the design studio Base, has taken exactly a hundred minutes to create 20 typographic works, each dedicated to a short bit of wisdom. He calls them “Five-Minute Posters,” and while he’s been gathering the quotes for some time, he gives himself just 300 seconds to compose them before he blasts the finished product out on his studio’s Twitter and Facebook page. www.basedesign.com/#/cat/all www.facebook.com/basedesignfb
Brunfaut writes some of the text himself; others are quotes he’s collected from colleagues. In a way, they’re a response to younger designers’ insatiable appetite for wisdom and tips, or “recipes for design,” as Brunfaut deems them. “In any case,” he says, “I always like it when it doesn’t sound too serious. It has to be light.”
Some convey Internet-age bon mots, like "Your username slowly becomes your real name." Others are bits of studio advice, such as "Treat your intern like a director" or "Cook once a week for your teammates." Others yet are more abstract things to meditate on, koans like "WIRE/LESS/PAPER/ LESS," for example. But the hope is that one of the messages might be something that sticks with its recipient a bit longer than the few minutes it took to create.
But even for Brunfaut, the time limit poses a fun challenge. "This acceleration forces you to make immediate design decisions," he explains. "How do you get the message across with impact? One type, no colors, lower- or upper-case, block or aligned, big or small. Five minutes and stop. Finished." Some of the finished images resonate a bit more than others. The most popular one so far, at least according to the number of Facebook likes, is a reminder that all the design recipes in the world don’t matter if you’re not making good work for the greater community. That poster reads: "Don’t design for designers. Design for people."
36
Starting January 30, you should be able to buy a pair of Helvetica or Garamond frames for ¥24,150, or around $231. They are unisex, although it goes without saying that these glasses would look best with some typographically correct facial hair.
Buisness + Innovation + Design Fonts into frames John Brownlee
Writer twitter.com/drcrypt john.brownlee+fastco@gmail.com
John Brownlee is a writer who lives in Boston with two irate parakeets and his wife, who has more exquisite plumage. His work has appeared at Wired, Playboy, PopMech, Cult Of Mac, Boing Boing, and Gizmodo. A Japanese designer has translated two of the world’s most famous fonts into a line of eyeglasses Inspired by two classic fonts—Garamond and Helvetica—each family of glasses comes in three separate weights: light, regular, and bold.
The visual association with Garamond and Helvetica isn't just name deep. These glasses really do look like the fonts they are named for. Helvetica's sans-serif design, created in 1957 by Max Miedinger at Switzerland's Haas Type Foundry, was originally meant to be neutral while emphasizing clarity. This aspect of Helvetica as a typeface is reflected quite accurately by Type's eponymous line of glasses, where the character of Helvetica's ascenders, spines, and terminals are mirrored pretty much exactly in the bridge, temples, and fronts of the frame. Just as Helvetica is a font for the unpresumptuous, the Helvetica glasses are for people who don't want to be thought of as wearing glasses.
Given how attractive these first pairs are, my fingers are crossed that Type decides to extend the line. Imagine Tobias Frere-Jones symbolically crushing a pair of Hoefler-inspired glasses under heel, or Wes Anderson showing up to Sundance in a pair of slick Futura glasses. Me, though? When it comes to a pair of specs, the only ones that suit my face are Comic Sans. Get on it, Type!
The character of the Garamond glasses is quite different: they are for bookish intellectuals who revel in wearing a pair of specs. Like the typeface, Garamond features a round, pronounced design, where the link and ear of a Garamond 'g' becomes mirrored in the frame's own end pieces and temple covers. There's something retro but slightly gittish about them: the kind of glasses that Gussie Fink-Nottle would wear to an evening at the Drone's Club.
38
Honorable mentions
Stopping sloppy typography
Christian Marclay Frederico Bambina Andreas Scheiger Sergio Albiac Mathieu Lehanneur Maria Popova Pink Eye Studio Aron Jancso
A special section dedicated to some of the typographic images that didn’t make the cut. Each image is equally deserving of its own spot in “BOLD”. So, in honor of those - I present the top 8 The best of the best of the cut.
Designed by Christian Marclay
Designed by Frederico Bambina
40
Designed by Andreas Scheiger
Designed by Sergio Albiac
42
Designed by Mathieu Lehanneur
Designed by Maria Popova
44
Designed by Pink Eye Studio
Designed by Aron Jancso
46