Types

When Typography Speaks Louder Than Words

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

Tips for Designing better Mobile Typography

2014

Issue One

December

A Journey Through Beautiful Typography in Web Design Creating Exciting and Unusual Visual Hierarchies Tips for Designing better Mobile Typography When Typography Speaks Louder Than Words

December 2014

Issue One

What you wished you knew about typography

Inevitable 1

2

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.

3

able of Table of

Type 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

4

f Conte Contents Creating 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

5

6

M

y first job in book design was at New American Library, A publisher of massmarket 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 DayGlo 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 Learned So, when I made my entry into the elite world of literature, I began in the “bullpen” of massmarket house. I believed I would be afforded a good opportunity to learn something about

By Steven Brower

citation here 7

(Image: inspirewetrust.com)

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

Square serif Script and cursive LED faces Nueland

Genre

Western Romance Science Fiction African (in spite of the fact that the typeface is of German orgin)

Latin

Children’s

Sans serifs

Nonfiction

Hand scrawl 1950s bouncy type

(Image: cargocollective.com) 8

Mystery

Fat, round serif faces

Horror Humor/Teen titles

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.

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:

(Image: fromupnorth.com)

Serif Bodoni Caslon Cheltenham Garamond San Serif Franklin Gothic Futura Gill Sans New Gothic Trade Gothic

(Image: welovetypography.com)

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

9

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)

10

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 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 has developed with the wood type settings (Images: flickr.com and modernlove20.tumblr.com)

(Image: graphicdesignjunction.com )

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

(Image: insidestylehome.com) 11

(Image: flatmade.com) 12

Back to the Basics:

John D. Berry

T

here’s a billboard along the freeway in San Francisco

the sentence just serve to make the loud “blat!” of the

that’s entirely typographic, and very simple. Against

apostrophe stand out. If that had been the purpose of

a bright blue background, white letters spell out a

the billboard, it would have been very effective. But

single short line, set in quotation marks: “Are you lookin’

unless the billboards along Highway 101 have become

at me?” The style of the letters is traditional, with serifs;

the scene of an exercise in typographic irony, it’s just a

it looks like a line of dialogue, which is exactly what it’s

big ol’ mistake. Really big, and right out there in plain

supposed to look like. Since this is a billboard, and the

sight.

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.

The Devil Is in the Details

This may be a particularly large-scale example, but

But, as my partner and I drove past and spotted

it’s not unusual. Too much of the signage and printed

this billboard for the first time, we both simultaneously

matter that we read—and that we, if we’re designers or

voiced the same response: “No, I’m looking at your

typographers, create—is riddled with mistakes like this.

apostrophe!”

It seems that an amazing number of people responsible

The quotation marks around the sentence are real quotation marks, which blend in with the style of the

for creating graphic matter are incapable of noticing when they get the type wrong.

lettering—“typographers’ quotes,” as they’re sometimes

This should not be so. These fine points ought to be

called—but the apostrophe at the end of “lookin’” is,

covered in every basic class in typography, and basic

disconcertingly, a single “typewriter quote,” a straight

typography ought to be part of the education of every

up-and-down line with a rounded top and a teardrop tail

graphic designer. But clearly, this isn’t the case—or else

at the bottom.

a lot of designers skipped that part of the class, or have

To anyone with any sensitivity to the shapes of letters,

simply forgotten what they have once learned about

whether they know the terms of typesetting or not,

type. Or, they naively believe the software they use will

this straight apostrophe is like a fart in a symphony—

do the job for them.

boorish, crude, out of place, and distracting. The normal quotation marks at the beginning and end of

Maybe it’s time for a nationwide—no, worldwide— program of remedial courses in using type.

13

Automated Errors

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

14

(Image: theorganictype.com)

(Image: adteachings.com)

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

(Image: thisisnthappiness.com)

any. It just goes ahead and makes those familiar old fake small caps.) You don’t really need small caps at all, inmost Anemic Type

typesetting situations; small caps are a typographic

The other rude noise that has become common in the

refinement, not a crutch. If you’re going to use them,

symphony hall is fake small caps. Small caps are a

use real small caps: properly designed letters with the

wonderful thing, very useful and sometimes elegant; fake

form of caps, but usually a little wider, only as tall as the

small caps are a distraction and an abomination.

x-height or a litter taller, and with stroke weights that math

Fake caps are what you get when you use a program’s

the weight of the lowercase and the full caps of the same

“small caps” command. The software just shrinks

typeface. Make sure you’re using a typeface that has true

the full-size capital letters down by a predetermined

small caps, if you want small caps. Letterspace them a

percentage—which gives you a bunch of small, spindle-

little, and set them slightly loose, the same way you would

looking caps all huddled together in the middle of the

(or at least should) with a word in all caps; it makes the

text. If the design calls for caps and small caps—that is,

word much more readable.

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

Pay Attention, Now

There are plenty of other bits of remedial typesetting that

caps to spell out an acronym, this might make sense; in

we ought to study, but those will do for now. The obvious

that case, you might want the initial caps to stand out.

corollary to all this is, to produce well-typeset words,

Otherwise, it’s silly. (And—here comes that word again—

whether in a single phrase on a billboard or several pages

distracting.)

of text, you have to pay attention. Proofread. Proofread

If it weren’t for a single exception, I’d advise everyone

again. Don’t trust the defaults of any program you use.

to just forget about the “small caps” command—forget

Look at good typesetting and figure out how it was done,

it ever existed, and never, ever, touch it again. (The

then do it yourself. Don’t be sloppy. Aim for the best.

exception is Adobe InDesign, which is smart enough to find the real small caps in an OpenType font that includes

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

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

(Image: etsy.com)

15

16

W

riting 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 17

(Image: typetoken.net )

You may prefer to entrust the editing of your fonts,

says instead that “You my not alter Font Software for the

like the tuning of your piano, to a professional. If you

purpose of adding any functionality.... You agree not to

are the editor of a magazine or the manager of a publishing

adapt, modify, alter, translate, convert, or otherwise change

house, that is probably the best way to proceed. But devoted

the Font Software….”

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

Legal Considerations

the kerning table built into the font. This is the least elegant

Check the license before tuning a digital font.

can be masked, if need be, by this means.

Digital fonts are usually licensed to the user, not sold outright,

Ethical and Aesthetic Considerations

and the license terms may vary. Some manufacturers claim to believe that improving a font produced by them is an

way to do it, but a multitude of errors in fitting and kerning

If it ain’t broke….

infringement of their rights. No one believes that tuning a piano or pumping up the tires of a car infringes on the rights of

Any part of the font can be tuned – lettershapes, character

the manufacturer – and this is true no matter whether the car

set, character encoding, fitting and sidebearings, kerning

or the piano has been rented, leased or purchased. Printing

table, hinting, and, in an OpenType font, the rules governing

type was treated the same way from Bi Sheng’s time until the

character sub-situation. What doesn’t need tuning or fixing

1980s. Generally speaking, metal type and phototype are

shouldn’t be touched. If you want to revise the font just for the

treated that way still. In the digital realm, where the font is

sake of revising it, you might do better to design your own

wholly intangible, those older notions of ownership are under

instead. And if you hack up someone else’s font for practice,

pressure to change.

like a biology student cutting up a frog, you might cremate

The Linotype Library’s standard font license says that

or bury the results.

“You may modify the Font’ Software to satisfy your design requirements.” FontShop’s standard license has a similar

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

provision: “You do have the right to modify and alter Font Software for your customary personal and business use,

One way to refine the typography of a text is to work your

but not for resale or further distribution.” Adobe’s and Agfa

way through it like by line, putting space in here, removing

Monotype’s licenses contain no such provision. Monotype’s

it there, and repositioning errant characters one by one. But

18 18

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

if these refinements are made to the font itself, you will never need to make them again. They are done for

Honing The Character Set

good.

If there are defective glyphs, mend them.

Respect the text first of all, the letterforms second, the

If the basic lettershapes of your font are poorly drawn,

type designer third, the foundry fourth.

it is probably better to abandon it rather than edit it.

But many fonts combine superb basic letterforms

The needs of the text should take precedence over the

with alien or sloppy supplementary characters.

layout of the font, the integrity of the letterforms over

Where this is the case, you can usually rest assured

the ego of the designer, the artistic sensibility of the

that the basic letterforms are the work of a real

designer over the foundry’s desire for profit, and the

designer, whose craftsmanship merits respect, and

founder’s craft over a good deal else.

that the supplementary characters were added by an inattentive foundry employee. The latter’s errors should

Keep on fixing.

be remedied at once.

You may find for example that analphabetic

Check every text you set to see where improvements

characters such as @ + ± × = - − © are too big or too

can be made. Then return to the font and make them.

small, too light or too dark, too high, or too low, or are

Little by little, you and the instrument – the font, that

otherwise out of tune with the basic alphabet. You may

is – will fuse, and the type you set will start to sing.

also find that diacritics in glyphs such as XXXXXX are

Remember, though, this process never ends. There is

poorly drawn, poorly positioned, or out of scale with the

no such thing as a perfect font.

letterforms.

Kirkshelton.com

19

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 (Image: webdesigndev.com)

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 20

www.designyourway.net

refining the kerning. Remember, however, that kerning tables

cleanly and sharply than three-dimensional type, but the gain

exist for the sake of problematical sequences such as ƒ*, gy,

in sharpness rarely equals what is lost in depth and texture.

“A, To, Va and 74. If you find that simple pairs such as oo or oe

A digital page is therefor apt to look aenemic next to a page

require kerning, this is a sign that the letters are poorly fitted.

printed directly from handset metal.

It is better to correct the sidebearings than to write a bloated

kerning table.

into two dimensions. Digital type is capable of refinements of

This imbalance can be addressed by going deeper

The spacing of many analphabetics, however, has as

spacing and kerning beyond those attainable in metal, and

much to do with editorial style as with typographic design.

the primary means of achieving this refinement is the kerning

Unless your fonts are custom made, neither the type

table.

designer nor the founder can know what you need or prefer.

Always check the sidebearings of figures and letters before

I habitually increase the left sidebearing of semicolon, colon,

you edit the kerning table. Sidebearings can be checked,

question and exclamation marks, and the inner bearings of

quickly for errors by disabling kerning and setting characters,

guillemets and parentheses, in search of a kind of Channel

at ample size, in pairs: 11223344 … qqwweerrttyy…. If the

Island compromise: neither the tight fitting preferred by most

spacing within the pairs appears to vary, or if it appears

anglophone editors nor the wide-open spacing customary in

consistently cramped or loose, the sidebearings probably

France. If I worked in French all the time, I might increase

need to be changed.

these sidebearings further.

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:

…(a(s(d(f(g(h(j(k(l

1213141516 …

…

)a)s)d)f)g

qwqeqrqtqyquqiqoqp …

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

Refine the kerning table.

Class-based kerning (now a standard capability of font editing software) can be used to speed the process. In class-

Digital type can be printed in three dimensions, using zinc

based kerning, similar letters, such as a á â ä à å ã are

or polymer plates, and metal type can be printed flat, from

treated as one kerned alike. This is an excellent way to begin

photos or scans of the letterpress proofs. Usually, however,

when you are kerning a large font, but not a way to finish. The

metal type is printed in three dimensions and digital type is

combination Ta and Tä, Ti and Tï, il and íl, i) and ï), are likely to

printed in two. Two-dimensional type can be printed more

require different treatment.

Found on logo-pogo.de

21 21

Kerning

sequences

such

Check the kerning of the

as Tp, Tt and f( may seem

word space.

to you absurd, but they can and do occur in legitimate

The

text. (Tpig is the name of

invisible blank box – is the

a town in the mountains of

most

Dagestan, near the southern tip

in almost every text. It is

of Russian Federation; Ttanuu

normally

is an important historical site

sloping and undercut glyphs:

on the British Columbia coast;

quotation marks, apostrophe,

sequences such as y = ƒ(x)

the letters A, T, V, W, Y, and

occur routinely in mathematics.)

often to the numerals 1, 3, 5.

If you know what texts you

It is not, however, normally

wish to set with a given font,

kerned more than a hair either

and know that combinations

to or away from a preceding

such as these will never occur,

lowercase ƒ in either roman or

you can certainly omit them

italic.

from the table. But if you are

(Image: designspiration.net )

space

common kerned

cautionary

–

that

character against

example.

preparing a font for general use, even in a single language,

Most of the Monotype digital revivals I have tested over the

remember that it should accommodate the occasional foreign

years have serious flaws in the kerning tables. One problem

phrase and the names of real and fictional people, places

in particular recurs in Monotype Baskerville, Centaur and

and things. These can involve some unusual combinations.

Arrighi, Dante, Fournier, Gills Sans, Poliphilus and Baldo,

(A few addition examples: McTavish, FitzWilliam, O’Quinn,

Van Dijck and other masterworks in the Monotype collection.

dogfish, jock o’-lantern, hallowe’en.)

These are well-tried faces of suberb design – yet in defiance

It is also wise to check the font by running a test file –

of tradition, the maker’s kerning tables call for a large space

a specially written text designed to hunt out missing or

(as much as M/4) to be added whenever the ƒ is followed by

malformed characters and kerning pairs that are either too

a word space. The result is a large white blotch after every

tight or too loose.

word ending in ƒ unless a mark of punctuation intervenes.

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.

22

A

word

Professional typographer may argue about whether the added space should

Naming Conventions

be zero, or ten, or even 25 thousandths of an em. But there is no professional

The presumption of common

dispute about whether it should be on

law is that inherited designs,

the order of an eighth or a quarter of

like inherited texts, belong in the

an em. An extra space that large is

public domain. New designs (or in

a prefabricated typographic error

the USA, the software in which they

â&#x20AC;&#x201C; one that would bring snorts

are enshrined) are protected for

of disbelief and instantaneous correction

from

a certain term by copyright;

Stanley

the

Morison, Bruce Rogers, Jan

names

of

the

designs are also

van Krimpen, Eric Gill and others on whose expertise and genius the Monotype heritage is built. But it is

normally

an easy error to fix for

protected

anyone equipped with

by trademark

the requisite tool: a

legislation. The

digital font editor.

names are often better protected, in fact, because infringements on the

that apply to the font as a whole

rights conferred by a

and specific hints applicable only to

trademark are often

individual characters. Many fonts are

much easier to prove

sold unhinted, and few fonts indeed are 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

than infringements

sold with hints that cannot be improved.

of copyright.

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

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

(Image: annaleenashem.blogspot.de )

23 23

(Image: Flickr.com)

24

software

takes

a

narrower,

more

and not all manufacturers name their fonts

stereotypical view. It recognizes only the

according to the same conventions. For the

nuclear family of roman, italic, bold and

fonts to be linked, their family names must

bold italic. Keyboard shortcuts make it

be identical and the font names must abide

easy to switch from one to another of

by rules known to the operating system and

these, and the switch codes employed are

software in use.

generic. Instead of saying “Switch to such

If, for example, you install Martin Majoor’s

and such a font at such and such a size,”

Scala or Scala Sans (issued by FontShop)

they say, for instance, “Switch to this font’s

on a PC, you will find that the italic and the

italic counterpart, whatever that may be.”

roman are unlinked. These are superbly

This convention makes the instructions

designed fonts, handsomely kerned and

transferable. You can change the face and

fully equipped with the requisite text figures

size of a whole paragraph or file and the

and small caps – almost everything a digital

roman, italic and bold should all convert

font should be – but the PC version must be

correctly. The slightest inconsistency in font

placed in a font editor and renamed in order

names can prevent this trick from working –

to make them work as expected.

About the Authors “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.

“A Journey Through Beautiful Typography Through Web Design’s” Shavaughn Haack

Shavaughn 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 Cousins

Sports fanatic. Information junkie. Designer. Truebeliever in karma.

25

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

When

Speaks Louder than

26 26

27 27

Manipulating Feelings and Reactions

T

he 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

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.

still presenting the same verbal language.

Reading these examples aloud helps us instantly

This first of a pair of illustrations shows a single large

If you read the first example out loud, it would be a

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

28

font, case, scale, color and positioning all suggest

appreciate the different effects of visual language. 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.

Making The Most Of Visual Language

explain that he used production methods not just for

design and typography in order to get a message

and message of a project. In Lubalin’s time, these

Verbal language is often used to inspire and shape 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

(Image: Peter Gabor)

effect but also as a way to emphasize the meaning 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.

29

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.

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

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.

30

“Nice and Tight” by Duncan Bancroft

“Big and Bouncy” by Peter Fletcher

Jason Munn’s poster for the US band Liars

Another stunning example of the visual language of type is by American designer Jason Munn, well

The designs above use type to reinforce the

known for his highly acclaimed music posters.

meaning of their statements. Meanwhile, the British

This example for Liars is mainly typographic, with

Battleaxe Collection’s visuals for a proposed range

sections of each letter cleverly removed so that

of type-based tea towels feature quotes from strong

the viewer doesn’t get the full picture. What is the

UK female comedy characters. These designs are

truth? The choice of typeface is also significant; its

doing something slightly different; type is used

extreme contrasts of thick and thin strokes point to

primarily to reinforce the agenda and assertive tone

the contrast between truth and lies.

of the speakers.

31

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.

(Credit: Bright Pink Communication Design)

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

32

(Credit: Bright Pink Communication Design) http://www.smashingmagazine. com/2012/04/13/when-typography-speakslouder-than-words/

r e a t i n g x c i t i n g n d n u s u a l i s u a l

Hierarchies

C E a U V

Carolyn Knight and Jessica Glaser

L

ayout, 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 â&#x20AC;&#x201D; not to say that images cannot help to order content, but simply that the most significant elements are expressed typographically.

33

The Designer As Reader

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

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.

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.

34

(Images: Bright Pink).

Texture And Tone

Hierarchy based on type is usually shaped by relationships of visual texture and tone; that is, letterforms, words and lines of type come together to form different tonal values and varying characteristics of patterns or texture.

Depending on these tonal values and the scale and texture, the viewer will be attracted to a greater or lesser degree. Typeface, point size, tint, weight, letter spacing, line spacing and general spatial distribution are also important because they affect the density of type and, therefore, the lightness and darkness and the texture and tone.

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.

35

Combining Typefaces To Create Hierarchy

So, despite using what seems to be a completely

judgement of texture and tone is key. If

In this section, weâ&#x20AC;&#x2122;ll discuss the value of

different typeface, you might not be having the

two different fonts need to have the same

combining typefaces to generate interest and

effect you imagine. As with many other situations

prominence, again, visual judgement is the

excitement, to reinforce identity and to support

when working with type, visual judgment is

best guide. Look carefully at the size of type,

hierarchy.

crucial.

because simply using the same size can be

A simple and very general starting point for

problematic when x-heights and ascenders

creating contrast is to combine one serif font

and descenders vary.

with a sans-serif partner. Fonts with multiple

Museum and gallery websites are excellent

which can come from simple changes in weight,

weights prove to be the most useful. Faces from

demonstrations of complex hierarchy. Typefaces

scale, positioning, color, tone or font. Although

the same family also sit well together. Pairing

are combined to reinforce an institutionâ&#x20AC;&#x2122;s visual

this might sound easy, it can be complex.

two serif or two sans-serif fonts together would

identity, and different fonts are often adopted

For example, altering line spacing or inter-

not be impossible, but would be much more

as part of the identity of special exhibitions.

character spacing can certainly add character,

demanding and time-consuming to pull off.

These websites also have complex grids and

but it could also increase or decrease the tone

There are no shortcuts to combining fonts, and

structures, making careful typographic choices

of the type.

at the risk of sounding repetitive, visual

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 36

Colorful Type

Color has numerous roles to play in creating hierarchy, adding a dimension to the order of information. Bright and vibrant colors tend to attract us, while softer paler colors can be used to subdue detail. Certain colors have different associations in different cultures. Youâ&#x20AC;&#x2122;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â&#x20AC;&#x2122;s tone is dark, it will merge with darker shades and throw out lighter colors, and vice versa.

(Frost Images)

37 37

Why Grids Are So Practical

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

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

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

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 38

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

http://www.smashingmagazine.com/2013/02/26/creating-visual-hierarchies-typography/#more-82896

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â&#x20AC;&#x2122;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

The Business of Design by London based design

well together without seeming forced is rather hard. As with an

studio Cartlidge Levene.

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â&#x20AC;&#x2122;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â&#x20AC;&#x2122;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.

39

Tips for Better Designing Mobile

40

â&#x20AC;&#x153;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.â&#x20AC;?

By Carrie Cousins

S

o 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â&#x20AC;&#x2122;s a skill that every designer needs to master in the digital age.

41

Mobile and Responsive Typography Basics

Unlike type designed for print and even many desktop web design projects, mobile and responsive typography

42

How People Read

The key to any style of typography, on any device, is

is often not measured using the traditional point system.

readability. If the user canâ&#x20AC;&#x2122;t read it, the design does not

Rather than selecting a typeface and using it at â&#x20AC;&#x153;14 points

work.

with 15 points of leading,â&#x20AC;? mobile and responsive type is

This is especially important on mobile devices. And there

designed using pixels, ems or rems. These flexible units

are so many mobile options, it is practically impossible to

are percentage based and can help designers more easily

know how your lettering will render on every device. So

create type for multiple devices.

really work to refine your type for the most popular device

Two of the most important considerations when designing

screen widths.

type for mobile devices are size and space. Type must be

Think about how people read when planning your mobile

large enough to read easily and there should be enough

design. You may have to adjust the relationships between

space between lines so that text does not feel cramped in

different type elements, such as the header and the main

the small space.

text. (The Chattanooga Renaissance Fund site, above,

There is no magic formula for what size or spacing to

does a great job of this.) Any type that is too big can eat

use. But typically mobile type should be a bit larger

away at the screen quickly, distracting readers. Type that

proportionately than that on desktops and include more

is too small can be missed or seen an unimportant.

line spacing. While many argue that the optimum number

Consider alignment as well. Generally, people read from

of characters per line for print and desktop design is 60 to

left to right. Especially on a small device, keep alignment

75 characters, for mobile this number should be cut in half.

styles simple for maximum readability.

may look longer on smaller screens. This additional space

Design in Space

When 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

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.

43

http://designshack.net/articles/typography/tips-for-designing-better-mobile-typography/

44

(Image Sources: Phil Roeder)

Keep Typefaces Simple

There 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

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

mobile site.

to tap and separated from other text actions so that only

Mobile Proportions and Scale

likely confuse and frustrate users.

H+W Design has one of the best out there. He detailed

Conclusion

While there is no perfect solution, Jason Pamental of 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.

one thing happens at a time. Any other configuration will

As 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

F

You need to ask yourself, what do you want to say

(unfortunately, performance is often an issue), but

Whether you realize it or not, your typography

and how do you want to say it? Consider the user:

they use type to engage the user and generate

helps to create an experience for users before

What do you want them to feel and experience when

interest. Good Web typography isn’t just about

they’ve even read a word or clicked a button.

the page loads? Typography establishes a mode of

a beautiful visual treatment, but about speed

Typography has the potential to go beyond merely

communication and, in turn, the personality of the

as well; many designers neglect performance

telling a story — it shows the user who is behind

website. The choice of typeface will determine how

entirely. Please keep in mind that these websites

the website and what you’re about. The treatment

people respond to your website.

haven’t been tested in old browsers or on mobile

irst impressions are lasting impressions.

of type creates an atmosphere and elicits a

The following websites have very distinct

devices — that wasn’t the point of this article.

response much the same way as tone of voice

personalities, largely established by the typography.

Instead, we’ll look closely at interesting treatments

does.

Granted, sometimes they aren’t perfect

and innovative uses of type.

Typography in Web Design

By Shavaughn Haack 47

uses

Exquisite Of Type I Shot Him

This Web design studio greets you with a

Banger’s

Matt Luckhurst

photographed welcome message, which is

This page is colorful and fun. You are greeted with

refreshing. The user immediately gets a sense

a down-to-earth eatery specializing in beer and

lovely serif letters — and after a bit, you realize

of the physical space that these designers work

sausage. Its story looks like it’s drawn on the

that the seemingly randomly scattered letters

in. There is a rawness to it, an authenticity. The

brown cardboard box that its food is delivered in.

spell Matt’s name. It’s quite effective how hovering

type is the focal point without being loud or

The logo looks like a hand-painted sign, unique

reveals a sample image of each project; it almost

overwhelming. I really like how they have moved

and imperfect but all the more beautiful for it. The

jumps out of the letter. The website shows how

away from the perfection of the computer and

fixed navigation works well as you scroll down,

type can be used as graphic elements and

show themselves as being unique. Although the

and the hover effect (turning the words red) is

incorporated into a design. The multicolored serif

home page isn’t as interactive as you’d expect,

simple yet effective. The type contributes a lot

typeface breaks away from the classic, maybe

the personality of the design studio is established

to the visual identity, and the graphics are great

even sober, idea we may have of serifs.

by the photograph, which has depth and texture.

— but the performance, not so much. A huge

This website has a lot of character. Banger’s is

downside is that the home page is 7.2 MB, with 254 HTTP requests. Frankly, that’s unacceptable.

Caava Design

Caava 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 Rijksmuseum

The hand-rendered type personalizes the website

throughout is used purposefully and is not

The large letters in a custom typeface span

and sets up an expectation of the kind of work the

necessarily loud, and the written content doesn’t

the screen and continue off page, making the

studio produces. The type treatment throughout

detract from the portfolio.

Rijksmuseum seem larger than life. The home

the rest of the website reinforces a relaxed yet

page then rotates through beautiful photographs

creative energy, as the wording is short and to the

of the museum’s contents. The main navigation

point. Another interesting aspect is the navigation;

is also rather interesting; when clicked, it slides

it’s hidden on the landing page, but hovering over

down for users to select a subcategory. The total

an icon provides access to it. As you scroll down,

size of the home page is 955 KB with 31 HTTP

the navigation is revealed and remains fixed at

requests — well optimized.

the top.

48

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

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.

Nocturnal

The 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 Hope

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

49

Browser Awareness Day

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

Carrera

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

Vogue

The 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 MCR

This 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

Crafting Type

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

Nautilus

This 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 Habits

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

Monocle

Monocle 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

Rezo Zero

The 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

More Sleep

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

Conclusion

It’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 Retinaready 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

Inevit

54

Team Sarah Howard, Asiah Bennett, and Maddie Zatkulak

Solution Maker:

Creative solution seekers:

was the solution when it came to taking all of the videos and

We came up we all the ideas, went to the store to buy all

pictures and putting them together in a beautiful video. She

the supplies, did all the labor work, and took all the pictures

also did a lot of the labor work with punching our hole pixels

together.

and drawing out our letters.

Creative Thinker:

Cash Register ladies checking us out at Hobby Lobby.

Sarah Howard had the most ideas and creative thinking to

Home Depot worker walking around showing us where the

put up for discussion, but as whole the final solution was built

chicken wire is.

together. While in Hobby Lobby, she had a lot of fresh ideas

Two random Flagler students helped us transport our project

to bring to the table when walking by different materials.

to our location.

Asiah was able to find our typeface for the final solution. She

able Situation

Our 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â&#x20AC;&#x2122;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â&#x20AC;&#x2122;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

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.

56

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

Research

and it can even grow or look differently. It is really just

Research was key to gaining insight, which in turn

apart of St. Augustine and its heritage because it has

led to many good ideas. The research started in the

been here for some time now. After researching and

middle of the fall 2014 semester in Typography 1. This

finding out that a lot of people have negative thoughts

stage of the project was focused on trial and error, and

towards it because they think it is damaging the trees.

finally just going outside to see that inspiration was just

This project could shed light on the fact that actually it

right above our heads.

is just a beautiful thing hanging there and it does not

What brought the Spanish moss idea front and

cause harm to any trees.

center for the team was the fact that it is such a strong

The team decided on placing our typography

part of the details that make up the town. As a group

installation in front of Cordova Street where it is right

we decided we really wanted to wrap this project

where everyone has to walk and it is right where all the

around St. Augustine and have something to show for

cars coming from the island will pass making it a really

its beauty. It also really ties into our word because if

hard area to avoid. The typeface was difficult to come

someone is anywhere around this area, it is inevitable

up with, the team decided on a curlier typeface that

they will see the Spanish moss.

has the ability to flow throughout each letter.

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.

Strategy

As a group, we wanted to convey a typographic

However, Spanish moss can definitely go into deeper

design incorporating a word and pixel to bring light to

discussion. After deeper research, Spanish moss

the importance of typography throughout St. Augustine.

is also known as the “air plant” because it just floats

The word was, “inevitable” and our pixels were circular

around and is not attached to anything; for example,

cutouts from cardboard. To really portray this importance

in St. Augustine, it is not growing from the ground and

we really needed to come up with a location that would

it is not its own bush, it is just hanging from the trees.

be in a very populated area that is why we picked on

It is known to lower the growth rate of trees because

Cordova Street right were all the cars are turning and

it is also like a shield guarding the tree from getting

there is high traffic of people walking.

57

Challenges

bathroom right in front of the word making

it was hard for anyone to really read the

it a bit smelly for the rest of the night. The

word because it was pretty dark out. Once

coming up with a solid idea for the

last challenge was lighting, the art walk

people started walking by and asking

started in the evening and the installation

questions about it however we were able

was on the sidewalk under a bunch of

to explain our project and how we wanted

trees. Once the sunset, it was too dark

to portray the importance of typography

to really see the installation. As car lights

and how it correlates with St. Augustine. A

drove by it the word would light up but

lot of people had never even heard of the

other than that it remained pretty dark.

word â&#x20AC;&#x153;typographyâ&#x20AC;? so we were also able

Our group really struggled for a while 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

58

Success and Learning Stories

to explain our class in a farther detail. We also handed out little postcards that had

We had to go out and show off our

an explanation of the project and why we

installations on the night of art walk so

were there. As a whole, the project went

there were a lot of people out and about

really well, people all over were engaging

in the town. Our main target audience

with conversations about typography and

for the night was tourists walking around

St. Augustine. A lot of people tried to warn

exploring the town. The challenge was

us about can live in Spanish moss as well.

Additional information

It 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