1

A Journey Through Beautiful Typography in Web DesignCreating Exciting and Unusual Visual Hierarchies

What you wished you knew about typography

Tips for Designing better Mobile TypographyWhen Typography Speaks Louder Than Words

Decem

ber 2014Issue O

ne

Inevitable

A Jo

urne

y Th

roug

h Be

autif

ul T

ypog

raph

y in

Web

Des

ign

Cre

atin

g Ex

citin

g an

d U

nusu

al V

isua

l Hie

rarc

hies

Tips

for D

esig

ning

bet

ter M

obile

Typ

ogra

phy

Whe

n Ty

pogr

aphy

Spe

aks

Loud

er T

han

Wor

ds

DecemberIssue One

2014

2

3

Ever wonder how the pros create such beautiful magazines, layouts, websites, and just typography itself? This magazine is a great read to learn the basics, cool tricks, and helpful tips to bring anyone’s design work to its highest level.

The four main articles can really help spice up any designers work. “A Journey Through Beautiful Typography in Web Design” by Savaughn Haack shows great examples of good typography throughout different types of websites. It gives a variety of examples showing sites with lots of typography with details and it shows simple typography and how to keep things clean and pretty. This ties in well with “Tips for Better Designing Mobile Typography” by Carrie Cousins because the first article shows examples of good typography and the second article explains how to execute good typography properly. Carolyn Knight and Jessica Glaser wrote both “Creating Exciting and Unusual Visual Hierarchies” and “When Typography Speaks Louder than Words.” The first article expresses the importance of placement and typeface choice and how they can work so well together to create great hierarchy throughout a webpage or anything the designer wants to create. The second article has beautiful examples of how typography can change the meaning of anything if you use it correctly.

Another great reason why this magazine is a good read is because of the columns, “Grooming the Font,” “Back to the Basics: Stopping Sloppy Typography” by John D. Berry, and “Type Casting” by Steven Bower and how helpful they can be to any designer because of their tips but also for their reminders that people often forget about when designing typography or any kind of layout. Even the best designers can sometimes need to be reminded the simple things to create clean beautiful typography.

Typography is everywhere, surrounding us on the street corner, on our televisions, and in our phones – it is inevitable. That is why it is so important as designers to learn all the rules, helpful tricks, and guidelines along the way in order to become the best designers we aspire to be. Everyone is definitely able to learn or be reminded of the helpful tricks and rules within this magazine.

4

Table of ContentsTable of ContentsType Casting...........................................................6-11

Back to the Basics: Stopping Sloppy Typography......12-15

Grooming the Font................................................16-24

When Typography Speaks Louder than Words.........26- 32

5

Table of ContentsTable of ContentsCreating Exciting and Unusual Visual Hierarchies......33-39

Tips for Better Desiging Mobile Typography..............40-45

A Journey Through Beautiful Typography in Web Design.........................................................................46-53

Inevitable- Typography Installation.............................54-59

6

7

citation here

By Steven Brower

M y 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 measured 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 then 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”x9”).

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 myriad of special effects (i.e., gold or silver foil, embossing and de-bossing, spot lamination, die cut, 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.

What I LearnedSo, when I made my entry into the elite world of literature, I began in the “bullpen” of mass- market house. I believed I would be afforded a good opportunity to learn something about

8

Typefaces

Square serifScript and cursive

LED facesNueland

LatinFat, round serif faces

Sans serifsHand scrawl

1950s bouncy type

Genre

WesternRomanceScience FictionAfrican (in spite of the fact thatthe typeface is of German orgin)MysteryChildren’s NonfictionHorrorHumor/Teen titles

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 then I ever dreamed possible.

There, type was always condensed or stretched so the height would be greater in a small format. The problem was 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 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:

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 romance covers around. Sure, I would use script and cursive 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 images that contained 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 ting 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 letterspacing became paramount. Finding the right combination of a serif and sanserif 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.

(Image: inspirewetrust.com)

(Image: cargocollective.com)

9

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 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:

SerifBodoniCaslonCheltenhamGaramond

San SerifFranklin GothicFuturaGill SansNew GothicTrade Gothic

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 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.

Do not stack type. The result is odd-looking spacing that looks as if it is about to tumble on top 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 car. Also, as I noted, much care should be given to letterspaceing 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 opposed to

(Image: aisleone.net ) (Image: fromupnorth.com)

(Image: welovetypography.com)

10

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 to 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 sold 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, causing 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 texts look 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 is to consider 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-

(Image: behance.net)

11

phrase. A consensus favors and average of ten to twelve words per line.

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 on line

ends and another begins. The audience should always be paramount in the designers

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 apiece 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 1950’s 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 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 rulesOf 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 has 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:

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 Émigré, 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.

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 good general rule of what not to do.

“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.”

(Images: flickr.com and modernlove20.tumblr.com) (Image: graphicdesignjunction.com ) (Image: insidestylehome.com)

12

(Image: flatmade.com)

13

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 “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.

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 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 have 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.

John D. Berry

Bac

k to

the

Bas

ics:

14

Automated ErrorsAs 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 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 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 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.

(Imag

e: th

eorg

anic

type

.com

)

(Image: adteachings.com)

15

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 sometimes 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, spindle-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.)

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, inmost 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 litter taller, and with stroke weights that math the weight of the lowercase and the full caps of the same typeface. Make sure you’re using a typeface that has true small caps, if you want small caps. Letterspace 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 produce 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.

“Fake small caps are a distraction and an abomination.”

(Image: thisisnthappiness.com)

(Image: etsy.com)

16

17

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.

17

18

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.

Legal Considerations

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 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 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.

Ethical and Aesthetic Considerations

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.

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

18

(Image: typetoken.net )

“What doesn’t need tuning or fixing shouldn’t be touched.”

19

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.

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.

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.

Honing The Character Set

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 XXXXXX are poorly drawn, poorly positioned, or out of scale with the letterforms.

Kirkshelton.com

20

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 (XXX), 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

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 ¢ ÷ ™ , 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.

Check and correct sidebearings.

The spacing of letters is part of the essence of their design. A well-made font should need little adjustment, except for

(Image: webdesigndev.com)

www.designyourway.net

21

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 sidebearings further.

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 texture. 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 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 á â ä à å ã 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 combination Ta and Tä, Ti and Tï, il and íl, i) and ï), are likely to require different treatment.

21 Found on logo-pogo.de

22

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 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 missing 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 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. 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.

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 ƒ in 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, 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 punctuation intervenes.

(Image: designspiration.net )

23

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.

Hinting

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 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.)

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 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 smorgasbord of weights and variations. Most editing and typesetting

23

(Image: annaleenashem.blogspot.de )

24

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 expected.

(Image: Flickr.com)

24

25

About the Authors

“A Journey Through Beautiful Typography Through Web Design’s” Shavaughn HaackShavaughn studied Journalism and Media Studies, and specialized in Communication Design at the Rhodes University in sunny South Africa. She is interested in the way we interact with and are affected by the visual world around. Social media enthusiast. Traveler. Writer.

“Tips for Designing Better Mobile Typography’S” Carrie CousinsSports fanatic. Information junkie. Designer. True-believer in karma.

“When Typography Speaks Louder Than Words” and “Creating Exciting and Unusual Visual Hierarchy’s” Carolyn Knight and Jessica Glaser are academics from the University of Wolverhampton in the UK, graphic designers, and prolific design writers. Their numerous books focus on topics including the use of space in graphic design, mnemonics and memory devices and the understanding and creation of visual hierarchy. Their latest book is the best selling ‘Graphic Design Exercise Book’, published in English by RotoVision and in Spanish by Editorial Gustavo Gili. Their company Bright Pink Communication Design, works in such areas as healthcare, construction, education, financial services and the public sector.

26

When

S p e a k sL o u d e r t h a n

26

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

2727

28

Manipulating Feelings and Reactions

The visual language established when designing with type can bring into play not only emotions, but

also physical responses. The following examples are simple illustrations of the varied and emotive effects and highly dominant control that can be achieved by changing the visual language of a message, while still presenting the same verbal language.

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

font, case, scale, color and positioning all suggest a considerably more distant and hesitant meeting. In fact, you would be forgiven for thinking that the person speaking here is not at all sure they even want to acknowledge you and would have preferred to ignore you completely.Reading these examples aloud helps us instantly appreciate the different effects of visual language. If you read the first example out loud, it would be a loud enthusiastic call that exudes genuine delight, friendliness and openness. Reading aloud the second example, the exact same word, it would be delivered in a much quieter tone, an almost hesitant voice, lacking the assurance and delight of the first. There is an infinite range of typographic alternatives that achieve subtle or dramatic changes in volume and tone of voice.

28

29

Making The Most Of Visual LanguageVerbal language is often used to inspire and shape design and typography in order to get a message across, with the goal being to make the most of the viewer’s reaction. Carefully mixing a design’s implication with literal meaning can lead to a memorable outcome. The following designs are great examples of the effects that can be achieved by employing verbal language that has helped to inspire a visual treatment.Our first illustration is taken from the work of renowned American graphic designer Herb Lubalin, who was described in a monograph about him by Gertrude Snyder and Alan Peckolick as being “a tenacious typographer, whose graphic concept employed copy, art and typography, and he used available production methods to underline the drama inherent in the message. Idea preceded design.”Given the subject of this article, this quote is especially fitting. It shows Lubalin as a designer who valued the combined communicative power of language, typography and composition. The book goes on to

explain that he used production methods not just for effect but also as a way to emphasize the meaning and message of a project. In Lubalin’s time, these decisions would have entailed manual labor, posing greater limitations than we face today. Finally, this quote confirms that, for Lubalin, concept was of paramount importance and always came before design.One of his many entries in the Visual Graphics Corporation’s 1964 competition features a carefully selected quote by US editor and writer Caskie Stinnett. Using delicate and well-considered composition of typographic detailing, Lubalin has succeeded in making an unpleasant message seem attractive and pleasing. The quote states “A diplomat is a person who can tell you to go to hell in such a way that you actually look forward to the trip.” The focal point of this statement, being told to “go to hell,” is shown in an elaborate and elegant calligraphic form, enabling this mildly offensive statement to be mistaken for something that could be looked forward to with great anticipation at first sight.

(Image: Peter Gabor)

30

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

Type Tarts is a UK initiative established to raise awareness of the plight of workers trafficked into the sex industry. Contributing designers are asked to send type-oriented “Tart cards” for exhibition. Many London prostitutes advertise their services by displaying promotional cards in phone boxes. Even in the age of the Internet and mobile phones and in the face of police crackdowns, these cards have achieved a cult following, being highly praised and collected as art.Both examples below use expressive typefaces and type manipulation to visually reinforce the meanings of the provocative text. In the context of the campaign, figuring out the meaning of the cards is easy enough.

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

“Nice and Tight” by Duncan Bancroft

31

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

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

“Big and Bouncy” by Peter Fletcher Jason Munn’s poster for the US band Liars

31

32

The example above features a quote from the BBC sitcom Keeping Up Appearances. The words themselves are spoken by the program’s main character — the eccentric, social-climbing and bossy Hyacinth Bucket, a lady in her 60s with grand aspirations. Typographically, the letterforms have been selected and grouped to emphasize the desires of the character. The words “I want” and “my” stand out because of a dramatic change of scale. “Superiors” is emphasized with capital letters, whereas “your” is reduced in size and given lowercase letters, thus downgrading the importance of whom she is talking to, in keeping with the character’s bossy nature and tone of voice when speaking to her milkman.In this design, the typeface has been dictated by the character’s tone of voice. The serif typeface with its stylish italics and capital letters captures the meaning and cultural context of this statement from a “woman of a certain age.” (Credit: Bright Pink Communication Design)

(Credit: Bright Pink Communication Design)

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

32http://www.smashingmagazine.com/2012/04/13/when-typography-speaks-louder-than-words/

33

Layout, for both print and screen, is one of the most important aspects of graphic design. Designs that extend across multiple pages or screens, whether containing large or small amounts of type, must be

carefully controlled in a way that is enticing and is easy for all to access. Careful control of visual hierarchy is a key aspect of the design decisions we have to consider.In this article, we will look at how frequently type needs to be broken down into different levels, such as topic, importance and tone of voice. We will explore how this can be achieved visually by relying on several things: texture and tone, seeing the designer as reader, combining typefaces, using color, employing multiple types and, of course, using the grid. Seeing the complexities that can be expressed through typography is fascinating — not to say that images cannot help to order content, but simply that the most significant elements are expressed typographically.

33

Hiera

rchie

s C r e a t i n g E x c i t i n g a n d U n u s u a l V i s u a l

Carolyn Knight and Jessica Glaser

34

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

In order to improve the target audience’s understanding of the design and facilitate their interaction with it, the designer needs to step into their shoes and interpret the hierarchy that they’re given, perhaps augmenting it or suggesting alternatives.Being able to interpret the connotations of different typefaces is valuable. For example, large, bold full-caps sans-serif typefaces are highly visible, but they are frequently used to warn of danger, and they dramatically increase the significance of certain words within the overall design.

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

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

This poster and Web page, designed by Johnson Banks, reflect these matches by connecting the same letter in two different words.

35

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

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

We cannot ignore the Western convention of reading from left to right and top to bottom and, in particular, the Western viewer’s instinctive response to return to the left edge; these can be extremely valuable tendencies. However, carefully selected textures and tones should be the overriding influences on hierarchy. Of course, all typographic textures and tones are relative to each other and to other elements on the page. Some of the most powerful uses of layout stem from choices of scale and composition. A lot of surrounding space can really make type stand out. In the first image, despite “sports” being set in large black condensed all caps, “badminton” is prominent because it is surrounded by white space. The second image continues the same principles, but by making “badminton” white and setting it against a black bar, it becomes even more noticeable. However, by adding emphasis to “badminton,” a little confusion could be created. Where is the reader drawn first? Keeping the intended hierarchy clear is vital. In the third image, the drawing almost swallow up “sport,” leaving it hardly visible and giving “badminton” clear prominence.

(Images: Bright Pink).

35

36

Combining Typefaces To Create HierarchyIn this section, we’ll discuss the value of combining typefaces to generate interest and excitement, to reinforce identity and to support hierarchy.

which can come from simple changes in weight, scale, positioning, color, tone or font. Although this might sound easy, it can be complex. For example, altering line spacing or inter-character spacing can certainly add character, but it could also increase or decrease the tone of the type.

So, despite using what seems to be a completely different typeface, you might not be having the effect you imagine. As with many other situations when working with type, visual judgment is crucial.A simple and very general starting point for creating contrast is to combine one serif font with a sans-serif partner. Fonts with multiple weights prove to be the most useful. Faces from the same family also sit well together. Pairing two serif or two sans-serif fonts together would not be impossible, but would be much more demanding and time-consuming to pull off.There are no shortcuts to combining fonts, and at the risk of sounding repetitive, visual

judgement of texture and tone is key. If two different fonts need to have the same prominence, again, visual judgement is the best guide. Look carefully at the size of type, because simply using the same size can be problematic when x-heights and ascenders and descenders vary.Museum and gallery websites are excellent demonstrations of complex hierarchy. Typefaces are combined to reinforce an institution’s visual identity, and different fonts are often adopted as part of the identity of special exhibitions. These websites also have complex grids and structures, making careful typographic choices even more important.

The key to creating hierarchy is contrast

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

36

37

Colorful TypeColor has numerous roles to play in creating hierarchy, adding a dimension to the order of information. Bright and vibrant colors tend to attract us, while softer paler colors can be used to subdue detail. Certain colors have different associations in different cultures. You’ll need to carefully select not only the hue, but also the tone of a color.An excellent way to test prominence and priority created by combinations of color is to view a design in grayscale. Inevitably, if the background’s tone is dark, it will merge with darker shades and throw out lighter colors, and vice versa.

(Frost Images)

37

38

Why Grids Are So PracticalGrids play a useful role in almost every area of graphic design. And in layout, a grid is an essential organizational tool. The grid provides a framework and structure for the combination of type and images. Across multiple pages, a consistent grid enhances communication, brings cohesion and improves legibility. We asked numerous designers to describe their approach to grid design.One interesting result of these inquiries is that a surprisingly large number of professionals noted their preference for working with grids that have an uneven number of columns, which, they say, establishes a more intriguing dynamism and asymmetry.Designing a grid with flexibility is important. We should seldom settle for a two-column structure, but should rather consider systems with a greater number of columns, providing plenty of scope for exciting groupings.

This page from the publisher Gestalten has plenty of columns. Five are used with great flexibility, with text and images extending across them, and the varying widths set priorities among the topics. Also, the different weights, faces, colors, cases and scales lead the user through different elements of the website in a particularly enjoyable Pages of the art magazine MAP. (Images source: Map Magazine, Issue 1 & 12-20)

3939

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

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

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

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

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

http://www.smashingm

agazine.com/2013/02/26/creating-visual-hierarchies-typography/#m

ore-82896

4040

Tips forBetterDesigning Mobile

“Mobile is big right now. But often the typography is small. When it comes to creating great type on small screens, there are plenty of challenges.”

41

So how can you make the most of responsiveness, mobile design and typography? The first step is really understanding type and the

second is by thinking about how people read. Put the two together and you will get a handle on creating great mobile type in no time. It’s a skill that every designer needs to master in the digital age.

41

By Carrie Cousins

4242

Mobile and Responsive Typography BasicsUnlike type designed for print and even many desktop web design projects, mobile and responsive typography is often not measured using the traditional point system. Rather than selecting a typeface and using it at “14 points with 15 points of leading,” mobile and responsive type is designed using pixels, ems or rems. These flexible units are percentage based and can help designers more easily create type for multiple devices.Two of the most important considerations when designing type for mobile devices are size and space. Type must be large enough to read easily and there should be enough space between lines so that text does not feel cramped in the small space.There is no magic formula for what size or spacing to use. But typically mobile type should be a bit larger proportionately than that on desktops and include more line spacing. While many argue that the optimum number of characters per line for print and desktop design is 60 to 75 characters, for mobile this number should be cut in half.

How People Read The key to any style of typography, on any device, is readability. If the user can’t read it, the design does not work.This is especially important on mobile devices. And there are so many mobile options, it is practically impossible to know how your lettering will render on every device. So really work to refine your type for the most popular device screen widths.Think about how people read when planning your mobile design. You may have to adjust the relationships between different type elements, such as the header and the main text. (The Chattanooga Renaissance Fund site, above, does a great job of this.) Any type that is too big can eat away at the screen quickly, distracting readers. Type that is too small can be missed or seen an unimportant.Consider alignment as well. Generally, people read from left to right. Especially on a small device, keep alignment styles simple for maximum readability.

43

Design in SpaceWhen it comes to small screens, space is a key consideration. Think about the elements your users may encounter – low contrast on the screen because of lighting, padding so that text does not bump the edge of the screen (or a loose-fitting phone case) or somewhere users can scroll the screen without inadvertently clicking a link.By adding a little space to text – both between lines and in the margins – you are helping users better interact with the words. Good spacing also aids readability, especially in subpar conditions. As with other techniques, the right amount of spacing is critical and an overabundance of white space can take away from the content area on the screen or even hinder readability.A good place to start is in the 10 to 20 percent range. Play with the numbers as a guideline as to how much extra space to add between lines of type. You may also consider using paragraph spacing as well since graphs

may look longer on smaller screens. This additional space gives readers the perception that text is not too dense and will feel easier to read.

It’s All About Width The key factor when designing type for mobile devices, apps or tablets is the width of the screen. And remember, there are two widths to consider – vertical (how most people hold their phones) and horizontal.Text that is too large will create lots of breaks in the type and if you use hyphenation, lots of hyphens. (It should be noted that few web designers use hyphens; they are a character seldom found in body text for the web.) Frequent breaks in the flow of text can cause the reader to stop too often and make the message choppy and more difficult to comprehend.Text that is too small can cause the reader to strain and make it hard to focus on the text. It can also be hard to find the beginning and end of lines of text when there are too many letters to digest at one time.

44

(Image Sources: Phil Roeder)http://designshack.net/articles/typography/tips-for-designing-better-mobile-typography/

45

Keep Typefaces SimpleThere is a reason you see so many sans serif typefaces on mobile websites and in apps. They are generally easy to read.When selecting typefaces for blocks of text in mobile design – think anything other than a logo or typographic art element – go with something simple, of a standard weight and that has a fairly uniform stroke width. Avoid novelty typefaces, condensed styles and letterforms with thin strokes.More designers are opting to use a second set of typefaces for mobile sites versus the desktop version, which may include a more elaborate type palette. While there are pros and cons to this concept, it can be a solution if you have your heart set on a certain specialty typeface for the desktop design.Also be wary of type tricks. Effects such as shadows or bevels can look great at larger sizes but might fall short or hinder readability on a screen that’s only a few inches wide. Forget the tricks when working on type plan for your mobile site.

Mobile Proportions and ScaleWhile there is no perfect solution, Jason Pamental of H+W Design has one of the best out there. He detailed his modern measured scale for the Typecast blog with CSS and a full scale of numbers.The idea is that every different piece of type in a web design should be thought about and scaled separately for an optimized web design experience. Often, we (collectively as designers) scale everything all at once. Pamental shows why this is not the best idea through a simple example, where the header takes up almost the entirety of the screen.

No conversation about mobile web typography would be complete without thinking about Pamental’s piece. Make sure to read it for yourself and see how his ideas might translate into your work.

Consider Functionality One last thing to think about when designing mobile typography is how it actually works. While some type on desktop websites is designed to click and link, mobile typography often does even more. Some text may allow users to make a call, other type contains a link, other text may allow users to buy a product, or text in an app may be part of a game.Design this type so that users know exactly what it will do. And make it large enough for users to complete this action with ease. Active text boxes need to be big enough to tap and separated from other text actions so that only one thing happens at a time. Any other configuration will likely confuse and frustrate users.

ConclusionAs with any design project, guidelines and tips are just a place to get started. Mobile typography is one of those areas that designers are really starting to dive into and trends will evolve.Make sure to mix and match the ideas above with your own for the best results. (And if you have additional tips, we’d love to hear them.) The No. 1 piece of advice is to test, test, test. The more devices you try text styles on, the better idea you will get of how it looks and works for users. 45

46

A Jounrey Through Beautiful Typography in Web Design

47

A Jounrey Through Beautiful Typography in Web Design47

By Shavaughn Haack

First impressions are lasting impressions. Whether you realize it or not, your typography

helps to create an experience for users before they’ve even read a word or clicked a button. Typography has the potential to go beyond merely telling a story — it shows the user who is behind the website and what you’re about. The treatment of type creates an atmosphere and elicits a response much the same way as tone of voice does.

You need to ask yourself, what do you want to say and how do you want to say it? Consider the user: What do you want them to feel and experience when the page loads? Typography establishes a mode of communication and, in turn, the personality of the website. The choice of typeface will determine how people respond to your website.

The following websites have very distinct personalities, largely established by the typography. Granted, sometimes they aren’t perfect

(unfortunately, performance is often an issue), but they use type to engage the user and generate interest. Good Web typography isn’t just about a beautiful visual treatment, but about speed as well; many designers neglect performance entirely. Please keep in mind that these websites haven’t been tested in old browsers or on mobile devices — that wasn’t the point of this article. Instead, we’ll look closely at interesting treatments and innovative uses of type.

48

Matt LuckhurstThis page is colorful and fun. You are greeted with lovely serif letters — and after a bit, you realize that the seemingly randomly scattered letters spell Matt’s name. It’s quite effective how hovering reveals a sample image of each project; it almost jumps out of the letter. The website shows how type can be used as graphic elements and incorporated into a design. The multicolored serif typeface breaks away from the classic, maybe even sober, idea we may have of serifs.

RijksmuseumThe large letters in a custom typeface span the screen and continue off page, making the Rijksmuseum seem larger than life. The home page then rotates through beautiful photographs of the museum’s contents. The main navigation is also rather interesting; when clicked, it slides down for users to select a subcategory. The total size of the home page is 955 KB with 31 HTTP requests — well optimized.

I Shot HimThis Web design studio greets you with a photographed welcome message, which is refreshing. The user immediately gets a sense of the physical space that these designers work in. There is a rawness to it, an authenticity. The type is the focal point without being loud or overwhelming. I really like how they have moved away from the perfection of the computer and show themselves as being unique. Although the home page isn’t as interactive as you’d expect, the personality of the design studio is established by the photograph, which has depth and texture.

The hand-rendered type personalizes the website and sets up an expectation of the kind of work the studio produces. The type treatment throughout the rest of the website reinforces a relaxed yet creative energy, as the wording is short and to the point. Another interesting aspect is the navigation; it’s hidden on the landing page, but hovering over an icon provides access to it. As you scroll down, the navigation is revealed and remains fixed at the top.

Banger’sThis website has a lot of character. Banger’s is a down-to-earth eatery specializing in beer and sausage. Its story looks like it’s drawn on the brown cardboard box that its food is delivered in. The logo looks like a hand-painted sign, unique and imperfect but all the more beautiful for it. The fixed navigation works well as you scroll down, and the hover effect (turning the words red) is simple yet effective. The type contributes a lot to the visual identity, and the graphics are great — but the performance, not so much. A huge downside is that the home page is 7.2 MB, with 254 HTTP requests. Frankly, that’s unacceptable. Caava DesignCaava Design has sans-serif typefaces, which maintains a neat, clean aesthetic. The typeface used for “Good design is good business” is large, easy to read and obvious, and the italicized introduction stands out. The typography throughout is used purposefully and is not necessarily loud, and the written content doesn’t detract from the portfolio.

Exquisite Of Typeuses

49

However, the small text is perhaps too small to be read comfortably, and the spacing in the justified columns is untidy. The contrast in size also discourages the user from reading the entire website. Again, the visuals don’t justify the size: 5.7 MB and 90 HTTP requests.

NocturnalThe beautiful slab serif used here is simple, clean, large and easy to read. It is round and widely set, giving the website plenty of breathing room. The simple, neat layout together with the type treatment give a good overall snapshot of the designer’s work. This website works effectively as a design portfolio; while it doesn’t do anything unusual, it focuses heavily on the artist’s work, and sometimes that’s all that is necessary.

Vintage HopeThe website’s heading looks like it was painted with a thick paintbrush in big heavy strokes. The typeface is so wonderfully bold and expressive. Together with the beautiful photography that fills the background, it gives the user a sense of the openness and freedom that characterize the organization. Vintage Hope raises money for the less fortunate in Malawi by loaning out vintage china, and the visual identity has an excited, happy and positive look to it. And that’s at 1 MB in size and 40 HTTP requests — impressive.

“First impressions are lasting impressions. Whether you realize it or not, your typography helps to create an experience for users before they’ve even read a word or clicked a button.”

50

Browser Awareness DayAs this page loads, the user is called upon to help make the Web “fun,” “fast” and “safe.” The keyword in each slide is set in decorative type. Creativity is evident in the lettering, which grabs attention, enticing the user to scroll down and learn more. The note on the right has a comic book-style typeface, adding to the playfulness of the website. When you scroll down, the same comic-book typeface is used, along with other playful typefaces. CarreraThere is a timelessness to the design of Carrera’s website, just as there is an authenticity and timelessness to its products. Website design should be consistent with product design. This eyeglass company cites one of its objectives as being to strike a “perfect balance between heritage and fashion.” The simple, bold uppercase type achieves this, having a classic feel without being outdated or overused. The typography is bold and prominent, although different enough that it doesn’t compete with the logo. Also worth mentioning are the interesting hover effects throughout the different sections of the website. VogueThe Playfair Display font, by designer Claus Eggers Sørensen, sets a bold yet not brash tone. The elegance of this serif is consistent with Vogue’s brand. According to the designer, the typeface is viewed best at larger sizes. Served MCRThis fun doodle-inspired website is for a ping-pong competition. The typography is rough and looks hand-drawn; in some areas, the type is animated or set against an animated background. Animated type is unusual in Web design, but here it grabs the user’s attention. The “Register” banner is an instance of this; the text is legible and prominent. This typography is appropriate because there isn’t much text, which keeps the website easy to use. However, the performance of the page is devastating: 7.5 MB with 175 HTTP requests. The main background image is 2032 × 4761 pixels and 2.2 MB — on both desktop and mobile.

50

51

Crafting TypeThis website is all about type, so the typography has to sell itself. The contrast between the light uppercase type for “Crafting” and the heavy lowercase typeface for “type” creates visual balance in the logo. The body text is large and legible. The serif typeface and simple elegant layout also contribute to the legibility. NautilusThis beautiful website is neat, clean and easy to navigate. The typography works well, with the three fonts coming from the same family. This is a nice way to differentiate your type while maintaining consistency and not disturbing the aesthetic. Unfortunately, Web typography has its cost: 12.6 MB and 73 HTTP requests, with two enormous images, at 3.5 and 2.4 MB, respectively. Kick My HabitsThe thick bold typeface of “Kick My Habits” is the first thing you see on the page. The skinny typeface (named KG How Many Times), with its charming handwritten feel, contrasts with the heaviness of the other type. The website, a beautifully designed and illustrated quiz that figures out how much money you waste on bad habits, has a relaxed, informal tone. And it doesn’t spend much of your bandwidth either. With all of the imagery on the page, it’s just 1.2 MB, although 161 HTTP requests are initialized upon the initial load; more content is loaded on demand. MonocleMonocle is a beautiful website with a classic quality. It uses serif and sans-serif typefaces in different weights, staying simple and elegant. Monocle is a global news website, with a focus on international affairs, business, culture and design. The layout is innovative, providing everything that the user could need right there. The categories are organized as tabs, with subcategories to further whittle down the information.

51

52

Rezo ZeroThe custom typeface here by Julien Blanchet is unique and grabs attention. It establishes the identity of the brand, setting a mint green against a monochromatic website. The typeface is neither overused nor underused, translating beautifully as a logo.

52

53

More SleepNeat but friendly and inviting! Those were my first thoughts upon visiting this website. The large type with slightly rounded corners has a friendliness to it. The typewriter-style font used for the descriptions and explanations has a round, soft, welcoming appeal. ConclusionIt’s not just about what you say, but how you say it, right? Depending on your purpose, we could try to experiment more and get creative with our typography. We can be bold and daring with strong, large letters, or get quirky and unique with handwritten type. We should keep in mind that type should always be legible, because there’s no point in showing off type that no one can read. Type can do so much for a design if it sets rhythm and creates an atmosphere.

It’s easy to get distracted by beautiful type treatments and large Retina-ready background images. But we shouldn’t neglect performance. Custom Web fonts can slow down loading times, so let’s find ways to counteract that.Finally, if you’d like to explore more interesting websites with a heavy focus on typography, make sure to visit Typewolf and Font in Use.

53

TeamSarah Howard, Asiah Bennett, and Maddie Zatkulak

Creative solution seekers:We came up we all the ideas, went to the store to buy all the supplies, did all the labor work, and took all the pictures together.Creative Thinker:Sarah Howard had the most ideas and creative thinking to put up for discussion, but as whole the final solution was built together. While in Hobby Lobby, she had a lot of fresh ideas to bring to the table when walking by different materials.

Solution Maker:Asiah was able to find our typeface for the final solution. She was the solution when it came to taking all of the videos and pictures and putting them together in a beautiful video. She also did a lot of the labor work with punching our hole pixels and drawing out our letters.Cash Register ladies checking us out at Hobby Lobby.Home Depot worker walking around showing us where the chicken wire is.Two random Flagler students helped us transport our project to our location.

54

Inevit able

SituationOur typography class was assigned to create an installation that portrays the importance of typography and what it means to us. The team wanted to show how inevitable type actually is and the fact that we need it, we use it constantly, and we can’t escape it no matter what. Specifically, we wanted to show beautiful aspects of St. Augustine in a modern typographic way. Everywhere you go whether it is walking down a neighborhood street, near the beach, or downtown anyone can see the beautiful Spanish moss hanging down from the trees.

Investigation The research really took off after the team got together after multiple rejected ideas. The group was sitting outside under a lot of trees on campus in down town St. Augustine and the wind was blowing, that’s when the idea finally came together. Walking around the streets, looking around at the trees and all the Spanish moss to watch how they blow in the wind was good research for how the group could layout the typeface.Insight: All the research and walking around downtown St. Augustine fired up the investigation. The solution brings light to how beautiful St. Augustine is.

55

Inevit able

56

Idea The idea started with the word “inevitable.” We wanted to have something to reflect St. Augustine that could not be avoided, that if you live or were to visit this area you would be able to avoid it. Finally, seeing how Spanish moss is everywhere and unavoidable and how beautiful it is hanging in the trees we knew it could really emphasize St. Augustine’s beauty. For the pixels we would use circular cutouts of cardboard to look very natural and the color would look kind of like a tree. Past ideas might have been crazy, fun, or out there but they were too underdeveloped to pursue. We came up with an idea to raise awareness of secondhand smoking and how it affects people, even if they do not smoke. We were going to collect cigarette butts and boxes to construct the letters. After discussing this further, we knew that we did not have enough time or money. Also, as good as the concept may be, it would probably come out as an unappealing statement that no one would want to stop by to learn more about. Another idea was to have the letters covered in hair. We liked the idea of having it blowing in the wind. A fun idea was to have smoke bombs running through and around the letters. Another idea was to incorporate wires. Our idea we researched the most before coming to the Spanish moss solution was using CDs. Communication is inevitable and no matter where you go you can’t avoid it. This was a great concept but CDs are becoming less and less popular and will soon no longer be used so it does not really apply to our main concept anymore.

57

Research Research was key to gaining insight, which in turn led to many good ideas. The research started in the middle of the fall 2014 semester in Typography 1. This stage of the project was focused on trial and error, and finally just going outside to see that inspiration was just right above our heads.

What brought the Spanish moss idea front and center for the team was the fact that it is such a strong part of the details that make up the town. As a group we decided we really wanted to wrap this project around St. Augustine and have something to show for its beauty. It also really ties into our word because if someone is anywhere around this area, it is inevitable they will see the Spanish moss.

The idea is simplistic in the fact that it is trying to show the detailed attraction about this town that no one would typically think about on a daily basis. However, Spanish moss can definitely go into deeper discussion. After deeper research, Spanish moss is also known as the “air plant” because it just floats around and is not attached to anything; for example, in St. Augustine, it is not growing from the ground and it is not its own bush, it is just hanging from the trees. It is known to lower the growth rate of trees because it is also like a shield guarding the tree from getting

enough sunlight. However, it does not take any of the trees nutrients, Spanish moss gets most of its nutrients form the air and debris.

Another thing about Spanish moss is that it likes to live and grow in moist areas, but the fact that it can absorb so much water it is even able to withstand dry areas, making it harder to avoid. A few down falls to Spanish moss are that it is home to some unattractive things like chiggers and other animals using it as shelter. However, some birds, such as songbirds, use the Spanish moss to build nests, making there homes very beautiful.

One can find Spanish moss in a lot of different areas and it can even grow or look differently. It is really just apart of St. Augustine and its heritage because it has been here for some time now. After researching and finding out that a lot of people have negative thoughts towards it because they think it is damaging the trees. This project could shed light on the fact that actually it is just a beautiful thing hanging there and it does not cause harm to any trees.

The team decided on placing our typography installation in front of Cordova Street where it is right where everyone has to walk and it is right where all the cars coming from the island will pass making it a really hard area to avoid. The typeface was difficult to come up with, the team decided on a curlier typeface that has the ability to flow throughout each letter.

StrategyAs a group, we wanted to convey a typographic design incorporating a word and pixel to bring light to the importance of typography throughout St. Augustine. The word was, “inevitable” and our pixels were circular cutouts from cardboard. To really portray this importance we really needed to come up with a location that would be in a very populated area that is why we picked on Cordova Street right were all the cars are turning and there is high traffic of people walking.

Challenges Our group really struggled for a while coming up with a solid idea for the installation. They were all too far out there or not strong enough. But once we came up with the final solution of having cardboard, Spanish moss, and chicken wire it all fell together. Another challenge was transporting the installation from our work place to Cordova Street, all of the cardboard circles kept falling out of their place. However, once we arrived to the location, we were able to slide them back into place quickly and cover up and missing areas with the Spanish moss. While we were standing there a horse and carriage went by and the horse went to the

bathroom right in front of the word making it a bit smelly for the rest of the night. The last challenge was lighting, the art walk started in the evening and the installation was on the sidewalk under a bunch of trees. Once the sunset, it was too dark to really see the installation. As car lights drove by it the word would light up but other than that it remained pretty dark.

Success and Learning Stories We had to go out and show off our installations on the night of art walk so there were a lot of people out and about in the town. Our main target audience for the night was tourists walking around exploring the town. The challenge was

it was hard for anyone to really read the word because it was pretty dark out. Once people started walking by and asking questions about it however we were able to explain our project and how we wanted to portray the importance of typography and how it correlates with St. Augustine. A lot of people had never even heard of the word “typography” so we were also able to explain our class in a farther detail. We also handed out little postcards that had an explanation of the project and why we were there. As a whole, the project went really well, people all over were engaging with conversations about typography and St. Augustine. A lot of people tried to warn us about can live in Spanish moss as well.

58

Additional informationIt was really interesting to learn how many people actually did not even know what typography was at all and half of our conversations were about that. It was also fun to have cars driving by and yelling out the window of how much they loved our project.My blog is http://maddiezatkulak.tumblr.com/

Works Cited Gill, Dan. “What You Need to Know about Spanish Moss.” LSU AgCenter. LSUAgCenter, 22 Jan. 2010. Web. 8 Dec. 2014. <http://text.lsuagcenter.com/news_archive/2010/january/get_it_ growing/What-you-need-to-know-about-Spanish-moss.htm>.

“Spanish Moss, Lichens & Slime Molds.” HGIC 2354 : Extension : Clemson University : South Carolina. Clemson Cooperative Extention. Web. 8 Dec. 2014. <http://www.clemson.edu/ extension/hgic/pests/plant_problems/hgic2354.html>.

“Spanish Moss.” - UF/IFAS Extension: Solutions for Your Life. Universtiy of Florida. Web. 8 Dec. 2014. <http://solutionsforyourlife.ufl.edu/hot_topics/environment/spanish_moss.html>.

59