Fsfinalbook spread


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Fsfinalbook spread

  1. 1. MEET YOUR TYPEa field guide to love & typography
  2. 2. CONTENTS TIME FOR “THE TALK” the elements of typography page 04 COULD THIS BE THE ONE?CONTENTS appropriate typeface selection page 16 MAKING IT WORK typographic details page 26 TIME TO COMMIT font licensing and creation page 38
  3. 3. Ø5 THE BIRDS & THE BEES typeface vs. fontWhy settle for casual flirtationwhen looking for a long-lastingrelationship? Finding the perfect typography.match is easy if you know therules. MEET YOUR TYPE will helpyou overcome common obstacles,and keep your heart thumping foryour one true love:
  4. 4. TIME FOR ”THE TALK” the elements of type
  5. 5. fuzz peach FF MILO TEXT 08 007 THE BIRDS & THE BEES typeface vs. font You may notice that you’re changing. You’re noticing different letterforms. You may feel different around them. Don’t be embarrassed; these feelings are natural. A few basics can help you through the awkward years. bra FF MILO REGULAR ITALIC FF MILO THIN TRAINING 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.FF MILOTHIN.OTF = FONT FONT Old school typographers defined a font as a complete character set of a particular typeface in one size. When type made the leap ABCDEGHIJK LMNOPQRST to the digital realm, a font became an electronic file that rendered UVWXYZ the typeface in all sizes. abcdefghijkl A typeface is what you see– mnopqrstuv a font is what you use to make wxyz FF MILO EXTRA BOLD it happen.
  6. 6. YOU JUST WANT ME FOR MY BODYtype anatomy 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 lowerDouble chin, big feet, or bowed legs. Little details will very large x-heights if that is important to you. case x or the height of lower case letters.tell you a lot about your type. Go ahead and check themout – it’s not shallow. It’s your job. ASCENDER SET WIDTH Quite ambitious, this part Width of a character in relation to of a lower case letter rises the height. Being wider than youFF DIN PRO above the x height. are tall isn’t always a bad thing. CAP HEIGHT BASELINE COUNTER DESCENDER TERMINAL The distance between the baseline The imaginary, yet crucial line The enclosed negative The male anatomy of a Even though it sounds and the top of a capital letter. where all obedient letterforms sit. space within a letter. lower case letter that hangs life-threatening, it is below the baseline. just the endpoint of the letterform.
  7. 7. 12 POINTS = 1 PICA POINT PICADOES (POINT) SIZE MATTER? 010 011type measurement INCH 72 POINTS = 1 INCH 6 PICAS = 1 INCH Oh,You’ve probably heard the rumor: the bigger your type, 196 PTthe 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 17.5 PT THE LENGTHS I GO to plea∞e you. When concerned about inferiority complex. Point size has very little to do readability, pay as with the actual size of your type anyway. Some 44 PT much attention to the typefaces can appear much larger than others x-height as the point at the same point size. So measure however OXTAIL OT 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.
  8. 8. ARE WE MEANT FOR EACH OTHER? 013type history & classification SERIF SANS SERIF SLAB SERIF BLACKLETTER DISPLAY NON-WESTERN SCRIPT SYMBOLSEveryone has a past.While some thingscan be overlooked,type history is not GARAMOND FF SCALA SANS STYMIE FETTE FRAKTUR ZEBRAWOOD HELVETICA CYRILLIC WAZA ZAPF DINGBATSone of them. Based on Lean and clean, The big-boned Blackletter type Display faces are Don’t expect your The trashy Telling someone the carvings these love cousin in every was originally the crazy ones parents to romance novel how you feel canPre-screen with a of the ancient machines were type family — designed to you date before understand the you hope will be hard to putlittle background Romans — now designed for the their serifs are mimic the getting married lure of exotic, never end — into words — there’s a group industrial age. blunt and calligraphy of to someone nice non-Western script evolved enter dingbats,check and avoid a lot who knew about They’re hard- opinionated. No 12th century from the Midwest. type. The from cursive or symbol fonts — lovin’ — serifs working and nonsense here — European monks. They’re not built language of love styles. Best used the best wayof baggage later. feature small modern, with no say I love you like Poor lonely, for long-reading knows no when things start to say… ‘feet’ at the end of need for fancy you mean it. single monks. relationships. bounds. to get serious. the letterforms. serifs. f+O=Ù At FONTSHOP.COM you can browse through thousands of fonts in these and other categories. Consider it your “If I could rearrange the alphabet I would put U and I together.” personal ”little black & yellow book”.
  9. 9. MEET THE PARENTS 014type family TRADITIONAL FAMILY : FF ScalaWhoa! It seems early, but sometimes the true test comes just wait BOLDwhen you meet the family. Regardless, it’s always good toknow ‘what you’re getting into.’ SMALL CAPS until you meet ITALIC my family ROMAN (REGULAR) TRADITIONAL FAMILY The traditional type family includes roman, italic, SUPER FAMILY : FF Scala / Scala Sans bold, and small cap styles. Modern families can break the mold and include other styles. ‘isn’t ourfamily super?’ EXTENDED FAMILY Extended families can branch out to include not- so-distant cousins like hairline, black, extended and condensed styles, to name a few. Uncle Rick BLACK ITALIC SUPER FAMILY The yours, mine, and ours of typography: some SMALL CAPS FINALLY MADE Parole! families include serif, sans serif, and every styleï in between. They begin to work as complete typographic systems–in-laws and all. CONDENSED BOLD
  10. 10. COULD THIS BE THE ONE? appropriate typeface selection
  11. 11. THE CHASE 018type selection WHO IS YOUR AUDIENCE? COUGAR?In order to attract a mate, you’ve got to set the bait. on the prowlSome people are drawn to curvy swashes, some like AQUAMARINE OTgrungy scripts, and some go for bold and simple.Knowing what your audience wants can help youchoose a typeface that will make ’em tingle. POSTER BODONI BT OFFICE ROMANCE? Make 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, dental hygiene, ethnicity, sex, target audience. Get inside their head. Grab their attention. Unleash the pheromones and cast your B Play the Game education, geographic location, buying patterns, spell. Understanding their preferences is essential yourself political interests, etc. before wooing them with type. FF FONTESQUE SANS & FF BOKKA SHADOW PRESENTABLE TIMES NEW ROMAN FIRST CRUSH?
  12. 12. headline copy? DISPLAY FACE Life of the party FF MINIMUM boy toy NO YES 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 does it need to set a mood? YES fling – just don’t get too attached. TEXT FACE & NOWHAT’S YOUR MESSAGE? After a wild night on the town, sometimes a little My one quiet is what you need. Look for someone who is easy to read and in it for the long haul. Classic facesHOW ARE YOU USING THE TYPE? may not be as flashy, but their loyalty and simplicity ONLY will win you over in the end. FF SERIA PRINT what medium? SCREEN SCREEN FONT friend request FF META OFFICE NO 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 large amounts of copy? look better in print. YES
  13. 13. MAKE ME A MATCH 022 023type 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).
  14. 14. MAKING IT WORK typographic details
  15. 15. TAKING THE LEAD 026hierarchy crack FF CHAMBERS SANS BLACK ITALIC 1 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 FF AVANCE BOLD THE WHIP wearing the pant-suit. **************** HIERARCHY Effective hierarchy gets people to Make your type BREE THIN SCREAMMM!!! look where you want them to look, when you want them to look there. Emphasis can generally Without it the reader is left confused be created by using a FF CHAMBERS SANS BOLD single style change— and frustrated. Emphasis can be 3 nearly eliminating the need stressed by size, weight, color, style to use a bold italic. Ever. and placement. POPPI HONEY, can you loosen the handcuffs? Hierarchy = Rank = Order of Importance
  16. 16. JUSTIFIED 029 WHEN THE STARS ALIGN type alignment Effective communication will help you avoid classic → CENTERED ← courting catastrophes like the snuggle-blunder and the miss-kiss. When you talk it out and align yourselves, there’ll be no need for a blooper reel. ← ← FLUSH LEFT 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.FLUSH RIGHT → → because we read it most often. Perfect when things get formal. FLUSH RIGHT JUSTIFIED A nice break from the norm, but a bit A crisp, handsome look, but can lead hard to read; should only be used for to awkward hyphens and rivers (white small captions or special callouts. gaps running through the text.)
  17. 17. HOW CLOSE IS TOO CLOSE? 030 LEADINGkerning, leading, letter spacing XOXOXOXOXOXXOx Generally, larger OXoXOXOXOXoX type requires XOXOXOXXoxoxoxo tighter kerning. Lust XOXOXoxoxxox0 UPTIGHT AND HARD TO READ XOXOXOXOXOXXOxEven in the best relationship, everybody needs a little OXoXOXOXOXoXspace. Take some time to breathe. Don’t ruin a beautiful XOXOXOXXoxoxoxothing just because someone gets clingy. Love XOXOXoxoxxox0 IT‘S GETTING AWKWARD PLAYING TOO FAST AND LOOSE LEADING The amount of horizontal space between two lines of text — leading is measured from XOXOXOXOXOXXOx While adding baseline to baseline. A healthy balance between OXoXOXOXOXoX KERNING space between capital letters is point size and leading can keep things together XOXOXOXXoxoxoxo acceptable, extra and moving ahead smoothly. XOXOXoxoxxox0 space between AHH, PERFECTION CORPULENT COMPATIBLE CHARACTERS FF META PRO MEDIUM lowercase letters usually causes KERNING Adjusting the space between individual letters the love to fade. when things look awkward between them. LETTER SPACING Quickly. DELICATO BOLD LETTER SPACING The overall spacing between letters in a block of text, it is also known as tracking. Generally, the l o n e l y healthy smother larger the type, the less letter spacing required. WE’RE DRIFTING APART LOVE AT FIRST SIGHT I NEED SOME SPACE
  18. 18. LOVE ME AS I AM 032type distortion “I’m not stretched, I’m just big boned” 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 Instead of resorting to type the ideal proportions for each and every distortion, consider using letterform. If the type isn’t working, never feel FONTSHOP’S TYPE NAVIGATOR. Search for the perfect ashamed to get out of the relationship and find typographic proportions like a different type that suits you better. Don’t forget to hold width, height and weight at down the shift key when typenav.fontshop.com scaling to preserve natural proportions! DISTORTED RELATIONS: VERTICAL HORIZONTAL FAUX ITALICS FF META & FF META SERIF
  19. 19. ALTERNATIVE TYPE STYLESspecial 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.456 789 LIGATURES NUMBERS An elegant expression of typographic fondness, ligatures create a single character out of two. Old style figures1 are designed to work within 034 a line of text, while lining figures2 align better 2 1 2 when used in charts and graphs. SMART QUOTES Curvy smart quotes are a sign of true typographic finesse. If you need a quote or apostrophe, leave the inch and feet marks to the amateurs. XO SWASH CHARACTERS On occasion, some typographers prefer Make sure to always activate characters with a little more style and flourish SMART QUOTES and LIGATURES in your application preferences. than those set in straight letterforms. Used in moderation, these alternate or swash characters are a great way to dress up boring type.
  20. 20. TIME TO COMMITfont licensing and font creation
  21. 21. 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 LICENCE 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, L& email to friends, siblings, or co-workers — from this ¡ AL IN Cold feet? Shack day forward until death do us part. Amen.B A up first. Many typeCH foundries offer a try-before-you-buy Congratulations! You’ve just committed to a option. Preview single-user font licence. Luckily, type foundries before you purchase your favorite fonts at are also open to less traditional relationships and FONTSHOP.COM. will gladly license their fonts to multiple users.
  22. 22. NINE MONTHS LATER 040 41type creationNow that you’ve found your match, it’s only natural towant to make beautiful type together. Maybe it’s timeto start thinking about expanding your family. Designing a typeface is a big commitment. Prepare for long hours, sleepless nights and a lot of nasty surprises —it ̓s definitely not for everyone. If you decide to For those up to the challenge, designing original create your own type can be a very rewarding experience. typeface, the fertility experts at A word of caution: Don’t be embarassed if it ̓s not FONTSTRUCT.COM BE ADVISED: happening for you. Some people aren ̓t able to can provide all the Abduction is not the same thing as adoption. necessary tools for conceive. For them, adoption might be the best the typographic bet. After all, there are plenty of fonts out there just incubation process. waiting to be adopted, nurtured, and loved.
  23. 23. CALL THE LOVE DOCTOR 042expert advice HIERARCHY Design a clear visual When small type is REVERSED path for the viewer to follow. on a dark background, adding a Just like your significant other, bit of space can help readability. the most important text should get the most attention.The honeymoon is over­. Isn’t this what you expected? Itdoesn’t have to be this way: if you feel the magic start to CLUTTER Avoid distracting Use fewer fonts and typeface i background patterns or busy styles in your project. The oldfade, refer to this handy list of interventions. We never photos behind your type. adage ‘two’s company—three’ssaid it would be easy, we only said it would be worth it. a crowd’ works with type. 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 NUMBERS When set in body HEADLINES Tighten up of a column) and widows FONT SELECTION Make sure the typeface and everything copy, numbers can look large. the letter spacing when (words left alone at the end associated with it is appropriate Try reducing the point size of using large type. of a paragraph). for your project. There is nothing the numbers slightly so they worse than dating someone who blend in better. LEADING The bigger the body is stuck in the seventies when CONTRAST Squint at your layout everyone else has moved on to copy, the smaller the leading, to see the type color. If everything the eighties. READABILITY Columns that are especially if you use all caps. is gray, add emphasis somewhere. too short or too wide are hard to read. An ideal measure is BOREDOM Consider adding 60–70 characters per line, or drop caps, rules, or other 40 when romancing online. graphic devices into the mix.
  24. 24. IT DOESN’T HAVE TO END THIS WAY 044 045FontShop 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 isgetting 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
  25. 25. IT ONLY GETS SWEETER 046more FontShop resources “Baby, if you were on a page, they’d call you fine print.” TheFontFeed fontfeed.com Impress 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-iphone Say goodbye to boring dates! Bust out this handy app when your date just isn’t cutting it. Just don’t let him catch you drooling at all the other FontFont hotties. FontShop Education fontshop.com/help/education Everyone needs a mentor. Come here for answers to all of your type-related questions. There’s even some info for your know-it-all professors. FontCase fontshop.com/products/fontcase It’s hard to keep track of them all, so let this award-winning font manager keep your fonts organized and at your fingertips.Font fontshop.com/blog/fontmag Type Glossary fontshop.com/help/glossaryTalk about free love! Create a FontShop account, and get this acclaimed The language of love has a lingo all its own. Use this official Type Glossary totypography publication and regular new font updates for nothing. gain fluency in essential type terminology.
  26. 26. WATCH & LEARN 048 049 TERMS OF ENDEARMENTother resources indexBooks Websites & Blogs ALIGNMENT 028 JUSTIFIED 028 SLAB SERIF 012Designing Type by Karen Cheng 100types.com ASCENDER 009 HIERARCHY 026 SMART QUOTES 034Designing With Type: The Essential Guide to Typography aiga.org BASELINE 008 KERNING 030 SPECIAL CHARACTERS 034 by James Craig, William Bevington, Irene Korol Scala bitique.co.ukStop Stealing Sheep by Erik Spiekermann dailydropcap.com BLACKLETTER 013 LEADING 030 SWASH CHARACTERS 034The Complete Manual of Typography by Jim Felici designobserver.com CAP HEIGHT 008 LETTER SPACING 030 SYMBOL 013The Elements of Typographic Style by Robert Bringhurst designworklife.com CENTERED 028 LIGATURE 034 TERMINAL 009Thinking With Type by Ellen Lupton formfiftyfive.comType: The Secret History of Letters by Simon Loxley friendsoftype.com CLASSIFICATION 012 NON WESTERN 013 TEXT FACE 021 grafikcache.com COUNTER 008 NUMBERS 034 TYPE CREATION 040Magazines ilovetypography.com DESCENDER 009 POINT SIZE 010 TYPE DISTORTION 032Communication Arts commarts.com ministryoftype.co.uk DISPLAY FACE 013 SANS SERIF 012 TYPEFACE 007Creative Review creativereview.co.uk tdc.orgEye eyemagazine.com thinkingwithtype.com FLUSH LEFT 028 SCREEN FONT 021 TYPE FAMILY 014HOW howdesign.com thevisualdictionary.net FLUSH RIGHT 028 SCRIPT 013 TYPE PAIRING 022Idea idea-mag.com typographer.org FONT 007 SERIF 012 TYPE SELECTION 018Print printmag.com typographica.org FONT LICENCE 039 SET WIDTH 009 X-HEIGHT 009 typophile.com welovetypography.com © 2010 FSI FONTSHOP INTERNATIONAL. ALL RIGHTS RESERVED. “What’s a nice ligature like you doing in a place like this?” BOOK CONCEPT, WRITING & DESIGN: BYU, CLASS OF ‘09–’10.
  27. 27. MEET YOUR TYPEI’m obviously a typomaniac. Other people like lookingat girls’ bottoms. I get my kicks out of looking at type.E R I K S P I E K E RMANN