Meet your type

1,020 views

Published on

a great book about typography

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,020
On SlideShare
0
From Embeds
0
Number of Embeds
60
Actions
Shares
0
Downloads
34
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Meet your type

  1. 1. MEET YOUR TYPEa field guide to love & typography
  2. 2. CONTENTS
  3. 3. CONTENTS TIME FOR “THE TALK” the elements of typography page 04 COULD THIS BE THE ONE? appropriate typeface selection page 16 MAKING IT WORK typographic details page 26 TIME TO COMMIT font licensing and creation page 38
  4. 4. Why settle for casual flirtationwhen looking for a long-lastingrelationship? Finding the perfectmatch is easy if you know therules. MEET YOUR TYPE will helpyou overcome common obstacles,and keep your heart thumping foryour one true love:
  5. 5. Ø5 THE BIRDS & THE BEES typeface vs. font typography.
  6. 6. TIME FOR ”THE TALK” the elements of type
  7. 7. fuzz peach MILO THIN 08 bra MILO REGULAR ITALIC MILO TEXT TRAININGMILOTHIN.OTF = FONTABCDEGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz MILO EXTRA BOLD
  8. 8. 007 THE BIRDS & THE BEES typeface vs. fontYou may notice that you’re changing. You’re noticingdifferent letterforms. You may feel different aroundthem. Don’t be embarrassed; these feelings are natural.A few basics can help you through the awkward years. TYPEFACE A typeface is a single set of characters that share stylistic unity. A typeface usually comprises an alphabet of letters, numbers, punctuation and diacritical marks. FONT Old school typographers defined a font as a complete character set of a particular typeface in one size. When type made the leap to the digital realm, a font became an electronic file that rendered the typeface in all sizes. A typeface is what you see– a font is what you use to make it happen.
  9. 9. YOU JUST WANT ME FOR MY BODYtype anatomyDouble chin, big feet, or bowed legs. Little details willtell you a lot about your type. Go ahead and check themout – it’s not shallow. It’s your job.FF DIN PRO CAP HEIGHT BASELINE COUNTER The distance between the baseline The imaginary, yet crucial line The enclosed negative and the top of a capital letter. where all obedient letterforms sit. space within a letter.
  10. 10. X HEIGHT More than any other part of the body, the x-height can dramatically affect type readability. Avoid extremely small or The height of a lower very large x-heights if that is important to you. case x or the height of lower case letters.ASCENDER SET WIDTHQuite ambitious, this part Width of a character in relation toof a lower case letter rises the height. Being wider than youabove the x height. are tall isn’t always a bad thing. DESCENDER TERMINAL The male anatomy of a Even though it sounds lower case letter that hangs life-threatening, it is below the baseline. just the endpoint of the letterform.
  11. 11. DOES (POINT) SIZE MATTER? 010type measurementYou’ve probably heard the rumor: the bigger your type,the better. While that is sometimes true, on otheroccasions smaller is better. No matter what size you’reworking with, if used properly, it can be effective. THE POINT SYSTEM The point system is used by women everywhere to reward their men for good behavior. A similarly archaic system, using points and picas, measures typographic dimensions. POINT SIZE Worrying too much about size can lead to an When concerned about inferiority complex. Point size has very little to do readability, pay as with the actual size of your type anyway. Some much attention to the typefaces can appear much larger than others x-height as the point at the same point size. So measure however size. X-heights that are you want – points, picas, inches, centimeters, too small or too large can dramatically affect or (gulp) millimeters. Just remember to always readability. print a test page before committing to a size.
  12. 12. 12 POINTS = 1 PICA POINT PICA 011 INCH 72 POINTS = 1 INCH 6 PICAS = 1 INCHOh, 196 PT 17.5 PT THE LENGTHS I GOto plea∞e you.OXTAIL OT 44 PT
  13. 13. ARE WE MEANT FOR EACH OTHER?type history & classification SERIF SANS SERIF SLAB SERIFEveryone has a past.While some thingscan be overlooked,type history is not GARAMOND FF SCALA SANS STYMIEone of them. Based on Lean and clean, The big-boned the carvings these love cousin in everyPre-screen with a of the ancient machines were type family–theirlittle background Romans–now designed for the serifs are blunt there’s a group industrial age. and opinionated.check and avoid a lot who knew about They’re hard- No nonsense lovin’–serifs working and here–say I loveof baggage later. feature small modern, with no you like you ‘feet’ at the end of need for fancy mean it. the letterforms. serifs. At FONTSHOP.COM you can browse through thousands of fonts in these and other categories. Consider it your personal ”little black & yellow book”.
  14. 14. 013BLACKLETTER DISPLAY NON-WESTERN SCRIPT SYMBOLS FETTE FRACTUR ZEBRAWOOD HELVETICA CYRILLIC WAZA ZAPF DINGBATSBlackletter type Display faces are Don’t expect The trashy Telling someonewas originally the crazy ones your parents to romance novel how you feel candesigned to you date before understand the you hope will be hard to putmimic the getting married lure of exotic, never end–script into words–entercalligraphy of to someone nice non-western type. evolved from dingbats, or12th century from the Midwest. The language of cursive styles. symbol fonts–European monks. They’re not built love knows Best used when the best wayPoor lonely, for long-reading no bounds. things start to get to say…single monks. relationships. serious. f+O=Ù “If I could rearrange the alphabet I would put U and I together.”
  15. 15. MEET THE PARENTS 014type familyWhoa! It seems early, but sometimes the true test comeswhen you meet the whole family. Regardless, it’s alwaysgood to know ‘what you’re getting into.’ TRADITIONAL FAMILY The traditional type family includes roman, italic, bold, and small cap styles. Modern families can break the mold and include other styles. EXTENDED FAMILY Extended families can branch out to include not- ‘isn’t our so-distant cousins like hairline, black, extendedfamily super?’ and condensed styles, to name a few. SUPER FAMILY The yours, mine, and ours of typography: some families include serif, sans serif, and every styleï in between. They begin to work as complete typographic systems–in-laws and all.
  16. 16. TRADITIONAL FAMILY : FF Scala just wait BOLDSMALL CAPS until you meet ITALIC my family ROMAN (REGULAR) SUPER FAMILY : FF Scala / Scala Sans Uncle Rick BLACK ITALIC SMALL CAPS FINALLY MADE Parole! CONDENSED BOLD
  17. 17. COULD THIS BE THE ONE? appropriate typeface selection
  18. 18. THE CHASE 018type selectionIn order to attract a mate, you’ve got to set the bait.Some people are drawn to curvy swashes, some likegrungy scripts, and some go for bold and simple.Knowing what your audience wants can help youchoose a typeface that will make ’em tingle. When surveying the dating Avoid the embarrassment of typographic rejection pool, consider the following: by first determining the likes and dislikes of your age, income, marital status, target audience. Get inside their head. Grab their dental hygiene, ethnicity, sex, education, geographic attention. Unleash the pheromones and cast your location, buying patterns, spell. Understanding their preferences is essential political interests, etc. before wooing them with type.
  19. 19. Who is your audience?COUGAR on the prowl AQUAMARINE OT POSTER BODONI BT Make OFFICE ROMANCE Play theGame FF FONTESQUE SANS & BOKKA SHADOW yourself@---------->------------------FIRST CRUSH PRESENTABLE TIMES NEW ROMAN
  20. 20. headline copy? NO YES does it need to set a mood? YES NOWHAT’S YOUR MESSAGE?HOW ARE YOU USING THE TYPE? PRINT what medium? SCREEN NO large amounts of copy? YES
  21. 21. DISPLAY FACE Life of the party FF MINIMUM boy toy Consider this type when you need to make a statement, put on a show for your friends, or just have some fun. These outspoken faces are FF TOKYO known for setting a mood, but can sometimes be over the top. They may be great for a summer fling – just don’t get too attached.TEXT FACEAfter a wild night on the town, sometimes a littlequiet is what you need. Look for someone who iseasy to read and in it for the long haul. Classic facesmay not be as flashy, but their loyalty and simplicitywill win you over in the end. & My FF SERIA one ONLYSCREEN FONT friend request FF META OFFICE Avoid the disappointment of an online profile MASS TEXT FF SCREEN MATRIX that doesn’t quite measure up in real life. Some fonts simply look better on screen while others look better in print.
  22. 22. MAKE ME A MATCH 022type pairingAny love doctor will tell you, to make it work, you’ve gotto be in synch. So when playing matchmaker, chooseyour typefaces carefully. Each one has a role to play –whether the task is commonplace or kinky. SIMPLICITY One lover at a time; maybe two. No need for three if you’ve got a winner. Even the most complicated projects, like the Frederick’s of Hollywood catalog, can be solved using only one or two typefaces. When combining CONTRAST Opposites attract. If your fonts are too similar two typefaces (even to each other, it seldom works. Consider if they’re the same pairing a flashy, extrovert (display face) with an point size), you may need to adjust their understated, introvert (text face). Also consider point sizes to make pairing another weight from the same family their x-heights match. (type family that is).
  23. 23. 023
  24. 24. MAKING IT WORK typographic details
  25. 25. TAKING THE LEAD 026hierarchy Someone always seems to dominate in a relationship. It’s important to know when to lead and when to follow. There are clear ways of establishing hierarchy, regardless of who’s wearing the pant-suit. HIERARCHY Effective hierarchy gets people to look where you want them to look, when you want them to look there. Emphasis can generally be Without it the reader is left confused created by using a single style and frustrated. Emphasis can be change–nearly eliminating the need to ever use a bold stressed by size, weight, color, style italic. Ever. and placement. Hierarchy = Rank = Order of Importance
  26. 26. crack FF CHAMBERS BLACK 1 THE WHIPFF AVANCE BOLD **************** Make your type BREE THIN FF CHAMBERS REGULAR SCREAM! POPPI 3 HONEY, can you loosen the handcuffs?
  27. 27. JUSTIFIED→ CENTERED ←←← FLUSH LEFTFLUSH RIGHT →→
  28. 28. 029 WHEN THE STARS ALIGN type alignmentEffective communication will help you avoid classiccourting catastrophes like the snuggle-blunder and themiss-kiss. When you talk it out and align yourselves,there’ll be no need for a blooper reel. FLUSH LEFT CENTERED Type purists prefer this default for Handy for prim, poetic passages. a good reason: it’s the easiest to read Not meant for large amounts of text. because we read it most often. FLUSH RIGHT JUSTIFIED A nice break from the norm, but a bit A crisp, handsome look, but vulner- hard to read; should only be used for able to awkward hyphens and rivers small captions or special callouts. (gaps running through the text.)
  29. 29. HOW CLOSE IS TOO CLOSE? 030kerning, leading, letterspacingEven in the best relationship, everybody needs a littlespace. Take some time to breathe. Don’t ruin a beautifulthing just because someone gets clingy. LEADING The amount of horizontal space between two lines of text – leading is measured from baseline While adding to baseline. A healthy balance between point size space between capital letters is and leading can keep things together and acceptable, extra moving ahead smoothly. space between lowercase letters usually causes KERNING Adjusting the space between individual letters the love to fade. when awkward pauses come between them. quickly. LETTERSPACING The overall spacing between letters in a block of text, it is also known as tracking. Generally, the larger the type, the less letterspacing required.
  30. 30. LEADINGXOXOXOXOXOXXOX Generally, largerOXOXOXOXOXOX type requiresXOXOXOXXOXOXOXO tighter kerning. LustXOXOXOXOXXOX0UPTIGHT AND HARD TO READXOXOXOXOXOXXOXOXOXOXOXOXOXXOXOXOXXOXOXOXO LoveXOXOXOXOXXOX0 IT‘S GETTING AWKWARDPLAYING TOO FAST AND LOOSEXOXOXOXOXOXXOXOXOXOXOXOXOX KERNINGXOXOXOXXOXOXOXOXOXOXOXOXXOX0AHH, PERFECTION CORPULENT COMPATIBLE CHARACTERS FF META PRO MEDIUMLETTERSPACING DELICATO BOLDl o n e l y healthy smotherWE’RE DRIFTING APART LOVE AT FIRST SIGHT I NEED SOME SPACE
  31. 31. LOVE ME AS I AM 032type distortion The longer you’re with someone, the more flaws you notice. When things get really bad, remember your mother’s warning: you can’t change ’em. True love is unconditional. Love them the way they are. If you feel the urge to widen, shorten or outline your type –resist! Abuse is not the answer. Type designers have meticulously created the Instead of resorting to type ideal proportions for each letterform. If the distortion, consider using type isn’t working, never feel ashamed to get FONTSHOP’S TYPE NAVIGATOR. Search for the perfect out of the relationship and find a different type typographic proportions like that suits you better. width, height and weight at typenav.fontshop.com DISTORTION: VERTICAL HORIZONTAL FAUX ITALICS
  32. 32. “I’m notstretched, I’mjust big boned” Don’t forget to hold down the shift key when scaling to preserve natural proportions! FF META & FF META SERIF
  33. 33. ALTERNATIVE TYPESTYLES 034special charactersSome characters are in a class of their own. While theymay seem flamboyant or eccentric, don’t be afraid to givethem a try. Adding a little spice can be very liberating. LIGATURES An elegant expression of typographic fondness, ligatures create a single character out of two.456 789 NUMBERS Old style figures1 are designed to work within text, while lining figures2 align better in charts 1 2 and graphs. SMART QUOTES Make sure to always activate smart quotes and standard ligatures in your application prefer- ences.XO SWASH CHARACTERS On occasion, some typographers prefer characters with a little more style and flourish than those set in straight letterforms. Used in moderation, these alternate or swash characters are a great way to dress up boring type.
  34. 34. 2Make sure to always activateSMART QUOTES and LIGATURESin your application preferences.
  35. 35. TIME TO COMMITfont licensing and font creation
  36. 36. L&BALAINCH
  37. 37. 039 MAKING IT LEGAL licensing a typeface When you’re sure you’ve found the one, you gotta lock it down. Licensing a font sounds like a big commitment, but making it official supports the development of the next generation of beautiful type. Do it for the kids. FONT LICENSE I, (insert name), do take you, (insert typeface), to be my lawfully wedded font. To love, honor and cherish – and not pass around in class, post online, email to friends, siblings, or co-workers – from this¡ Cold feet? Shack up first. Many type day forward until death do us part. Amen. foundries offer a try-before-you-buy Congratulations! You’ve just committed to a option. Preview single-user font license. Luckily, type foundries before you purchase your favorite fonts at are open to polygamous relationships and will FONTSHOP.COM. gladly license their fonts to multiple users.
  38. 38. NINE MONTHS LATER 040type creationNow that you’ve found your match, it’s only natural towant to make beautiful type together. Maybe it’s time tostart thinking about expanding your family. Designing a typeface is a huge commitment. Prepare for long hours, sleepless nights and lots of nasty surprises –it ̓s definitely not for everyone. For If you decide to those willing to take on the challenge, designing create your own original type can be a rewarding experience. typeface, the fertility experts at Don’t be embarassed if it ̓s not happening for you. FONTSTRUCT.COM Some people aren ̓t able to conceive. For them, can provide all the necessary tools for adoption might be the best bet. After all, there are the typographic plenty of fonts out there just waiting to be incubation process. adopted, nurtured, and loved.
  39. 39. 41BE ADVISED:Abduction is not the same as adoption.
  40. 40. CALL THE LOVE DOCTOR 042expert adviceThe honeymoon is over­. Isn’t this what you expected? Itdoesn’t have to be this way: if you feel the magic start tofade, refer to this handy list of interventions. We neversaid it would be easy, we only said it would be worth it. NUMBERS When set in body FONT SELECTION Make sure the typeface and everything copy, numbers can look large. associated with it is appropriate Try reducing the point size of for your project. There is nothing the numbers slightly so they worse than dating someone who blend in better. is stuck in the seventies when everyone else has moved on to the eighties. READABILITY Columns that are too short or too wide are hard to read. An ideal measure is 60–70 characters per line, or 40 when romancing online.
  41. 41. HIERARCHY Design a clear visualWhen small type is REVERSED on path for the viewer to follow.a dark background, adding a bit Just like your significant other,of tracking can help readability. the most important text should get the most attention. CLUTTER Avoid distracting Use fewer fonts and typefacei background patterns or busy styles in your project. The old photos behind the type. adage ‘two’s company three’s a crowd’ works with type as well. POINT SIZE Always choose the body copy size first, and make WIDOWS & ORPHANS Show everything else work with it. compassion to orphans (words abandoned at the beginning SPACING ISSUES Tighten up the of a column) and widows letterspacing when using large (words left alone at the end type, such as in a headline. of a paragraph). LEADING The bigger the body CONTRAST Squint at your layout copy, the smaller the leading, to see the type color. If everything especially if you use all caps. is gray, add emphasis somewhere. BOREDOM Consider adding drop caps, rules, or other special graphic devices into the mix.
  42. 42. IT DOESN’T HAVE TO END THIS WAY 044FontShop resourcesWhen it comes to love, some people are clearly moreexperienced than others. Look to these tried and trueFontShop resources as your own typographic supportgroup–always on hand when an ugly relationship is get-ting you down. FontStruct fontstruct.com Hate the game? Make the typeface of your dreams with this online font generator. You don’t even have to wait for a visa! FOLDSTRUCT
  43. 43. 045
  44. 44. IT ONLY GETS SWEETER 046more FontShop resourcesFont fontshop.com/blog/fontmagTalk about free love! Create a FontShop account, and get this acclaimedtypography publication and regular new font updates for nothing.
  45. 45. “Baby, if you were on a page, they’d call you fine print.”TheFontFeed fontfeed.comImpress them with your typographic knowledge. This über blog has it all:interviews, eye candy and new typefaces, all gleaned from sources worldwide.FontShuffle apple.com/iphone/apps-for-iphoneSay goodbye to boring dates! Bust out this handy app when your date just isn’tcutting it. Just don’t let him catch you drooling at all the other FontFont hotties.FontShop Education fontshop.com/help/educationEveryone needs a mentor. Come here for answers to all of your type-relatedquestions. There’s even some info for your know-it-all professors.FontCase fontshop.com/products/fontcaseIt’s hard to keep track of them all, so let this award-winning font manager keepyour fonts organized and at your fingertips.Type Glossary fontshop.com/help/glossaryThe language of love has a lingo all its own. Use this official Type Glossary togain fluency in essential type terminology.
  46. 46. WATCH & LEARN 048other resourcesBooks Websites & BlogsDesigning Type by Karen Cheng 100types.comDesigning With Type: The Essential Guide to Typography aiga.orgby James Craig, William Bevington, Irene Korol Scala bitique.co.ukStop Stealing Sheep by Erik Spiekermann dailydropcap.comThe Complete Manual of Typography by Jim Felici designobserver.comThe Elements of Typographic Style by Robert Bringhurst designworklife.comThinking With Type by Ellen Lupton formfiftyfive.comType: The Secret History of Letters by Simon Loxley friendsoftype.com grafikcache.comMagazines ilovetypography.comCommunication Arts commarts.com ministryoftype.co.ukCreative Review creativereview.co.uk tdc.orgEye eyemagazine.com thinkingwithtype.comHOW howdesign.com thevisualdictionary.netIdea idea-mag.com typographer.orgPrint printmag.com typographica.org typophile.com welovetypography.com “What’s a nice ligature like you doing in a place like this?”
  47. 47. 049 TERMS OF ENDEARMENT indexALIGNMENT 028 JUSTIFIED 028 SLAB SERIF 012ASCENDER 009 HIERARCHY 026 SMART QUOTES 034BASELINE 008 KERNING 030 SPECIAL CHARACTERS 034BLACKLETTER 013 LEADING 030 SWASH CHARACTERS 034CAP HEIGHT 008 LETTER SPACING 030 SYMBOL 013CENTERED 028 LIGATURE 034 TERMINAL 009CLASSIFICATION 012 NON WESTERN 013 TEXT FACE 021COUNTER 008 NUMBERS 034 TYPE CREATION 040DESCENDER 009 POINT SIZE 011 TYPE DISTORTION 032DISPLAY FACE 013 SANS SERIF 012 TYPEFACE 007FLUSH LEFT 028 SCREEN FONT 021 TYPE FAMILY 014FLUSH RIGHT 028 SCRIPT 013 TYPE PAIRING 022FONT 007 SERIF 012 TYPE SELECTION 020FONT LICENSE 042 SET WIDTH 009 X HEIGHT 009© 2010 FSI FONTSHOP INTERNATIONAL. ALL RIGHTS RESERVED.BOOK DESIGN: BYU, CLASS OF ‘09–’10.
  48. 48. MEET YOUR TYPEI’m obviously a typomaniac. Other people like lookingat girls’ bottoms. I get my kicks out of looking at type.ERIK SPIEKERMANN

×