The Book. Just My Type. by Celeste Janina

JUST MY T YPE.

T Y POGR APH Y

JUST MY T YPE.

T Y POGR APH Y

Celeste Janina Fasavalu

Just My Type. Typography Published by Blurb http://www.blurb.com 36 pages, Hardcover First Published in 2015 Copyright Celeste Janina Fasavalu 2015. Written by Jessicsa Hische. All Rights Reserved. No part of this publication may be reproduced, stored in a retrieval system, or by any means, electronic, mechanical, photocopying, recording or otherwise, without the prior written permission of Blurb. Printed in Australia.

THANK YOU THANK YOU THANK Lord, you make anything possible.

Thank you Dujon, for encouraging my creative pursuits and guiding me through.

Just Your Type, deliberates a broad range of topics related to the selection, utilisation and pricing of type. Opening your mind to new avenues and process about thinking conceptually of typography. The contents of this book was sourced from the website of Jessica Hische. The information displayed is a ray of knowledge about typography and design.

Contents 01.

Your New Best Friend 1

02.

Choosing The Right Font 3

03. 04.

Other Things To Consider 5 Where do I Find Good Type?

05. Thinking Conceptually 15 06. 07. 08.

Pairing Typefaces 17

The Dark Art Of Pricing

Reference List 35

Type Designers:

YOUR NEW BEST FRI END

01. If you are a web designer, you are used to tedium. You are used to spending entirely too much time hovering over a keyboard googling endless combinations of words to figure out why something looks beautiful in Chrome but like a flaming pile of poo in Firefox. You write your own CSS and after the project is done you comb through it all to make it “prettier”. You can’t handle how some people format their PHP. You are a unique and wonderful kind of human someone intensely focused on details that most people will never ever notice. You say to yourself “I don’t care that no one will ever appreciate this backbreaking work I’m doing except other intensely nerdy people

like me. I care, the nerds care, and that’s enough for me.” If you are thinking to yourself “Wow! It’s uncanny how much this describes me!” You are awesome. You make the internet a better place. Take a deep breath and bask in your own awesomeness. I want to introduce you to your brother from another mother another group of humans that, like you, is quite under-appreciated: the type designer. Type designers and web designers have an amazing amount in common, that’s why it’s super wonderful that they’ve been collaborating more lately. Web designers are pumped that they can use

more than a handful of fonts on the internet, and type designers are pumped that this new group of people using their fonts actually know how to use computers. You would be shocked at how many people try to download .zip files onto their iPhone to install fonts. Web designers are familiar with “easter eggs” the little things they build into the code for people in the know to see and delight in. Well, almost everything type designers make is an “easter egg” in one way or another, because most people think a typeface is just 52 letters,

some numbers, and a few punctuation marks. Both groups of people, if they’re good at what they do, go above and beyond to make something amazing, even though most people have no idea what a “contextual alternate” is or would never notice that you’ve made two sets of images, one for retina and one for nonretina displays. Now that you, the web designer, are about ready to add “seeking type designer” to your OK Cupid profile, I’ll get into why it matters to know the people behind the fonts you’re using.

Type Design:

CHOOSING THE RIGHT FONT

02. There are some beautiful typefaces out there, but not all of them will be perfect for your project. If you’re a web designer, especially if you’ve attended past AEA Conferences, you have already heard a lot about putting the content first and making websites that don’t sacrifice legibility and ease of use for fluffy ornamentation. Figure out what kind of content is most prevalent in your project (more often than not plain ol’ body copy) and choose the typeface that satisfies the needs of that content. This first typeface you’ll choose is your anchor, a term I’m borrowing from Tim Brown’s little compendium of knowledge Combining Typefaces, which is an excellent and very quick read. All other typefaces you select must first pass the “does this jive with my anchor” test. Remember that just because a giant headline is the first thing your reader sees, that doesn’t mean it should be the first typeface you choose.There are a bunch of things I take into consideration when choosing a text face that help me narrow down the candidates. Here’s a list of credentials a typeface must pass for me to want to use it as a text face:

Does it come in a var iet y of weights? Being able to play with weights is incredibly important

to me when I design. I’m not satisfied with the standard three weight set of light, regular, and bold. I like to work with typefaces that have inbetweener weights and if possible the full range from 100-900 just so that I have more flexibility while designing. Sometimes I want text to feel a little bolder or more emphasized but I don’t want it to be “bold”. Sometimes I want to set text at different sizes but maintain an even text color. Also, the more weights you have the more flexibility you have with color choices and reversing type out of image you won’t have as many issues with how anti-aliasing affects the perception of type weight. I know that using a lot of fonts (each weight of a typeface is considered 1 font) can affect page load time talk to your web font service about how you can streamline your site so that using multiple fonts doesn’t slow things down.

Does it have a nice x-height? A generous x-height (the height of lowercase characters) is very important when choosing a text face. If the x-height is too low, the typeface will appear smaller overall and the caps will have too much emphasis which interrupts smooth reading.

If the x-height is way too high, your eye won’t be able to distinguish quickly between caps and lowercase, which can make you lose your place while reading. A generous x-height allows you to set type at small sizes (for captions and the like) and have it still be very legible.

Does it have a tr ue italic? There’s a difference between a sloped roman and an italic, and that difference means the world to me. I love typefaces that have really lovely true italics that are easily identifiable in blocks of text. What makes an italic an italic is that its structure is more closely related to scripts or writing than a roman it has identifiable entrance and exit strokes rather than perfectly symmetrical serifs and usually has a single story a and g. True italics also ensure even color (matching weight) within text when used with their roman counterpart. I love italics. Italics will be my gateway drug to text type design when I make the leap from lettering. Georgia’s italic is one of the reasons that typeface will always win for me over other standard serif text faces.

make the type feel like it’s sporting a screaming purple mohawk when set in paragraph form. Sometimes you want your type to sport a screaming purple mohawk, but I can confidently say that those times don’t happen often. I should also note that “screaming purple mohawk” is relative. What I consider to be a screaming purple mohawk, you would probably consider the most subtle nearly invisible change in tone. You are the husband that won’t notice I got a haircut unless I chop it all off and blondify myself.

Is it a t ypeface I’ d want to hang out with? Typefaces definitely have personalities and I’ll get into ways to conceptually brainstorm about type shortly. When it comes to text type, I usually want something even-tempered and laid back but not lacking in personality. Finding typefaces with the right personality balance can be incredibly difficult because if you add even the most minor bits of flair to a letter even the slightest curvature to a serif it can

Type Design:

OTHER THINGS TO CONSIDER

03.

1. Is it spaced well? Text type requires looser spacing. Display requires tighter spacing. One reason Helvetica (the version you all have on your computers) doesnâ&#x20AC;&#x2122;t work well for text is that its letter-spacing is just too damn tight. If you feel like you have to add letter-spacing to 16px body copy, you might be working with a typeface that is too tightly spaced, or too tightly spaced for your taste. The white space within and surrounding a letter is incredibly important to the overall design of the type, just as important as the black parts spacing can absolutely make or break a typeface. Cyrus Highsmith has a great section about establishing good spacing within and around type in his book Inside Paragraphs, which is a very quick read and a great intro to typographic principles.

2. Does it have even colour? Sometimes when you stare at a block of text some letters pop out to you more than others because the letter looks heavy where separate components (like a stem and a leg) join together. This can make type feel spotty and any good type designer will prevent this from happening by making little micro adjustments to the letters to make sure that they donâ&#x20AC;&#x2122;t feel optically heavier at the joins. Most of these changes are imperceivable by the average viewer and they should be but they make a world of difference to the type. Notice how the stem on the n is less wide at the top to compensate for the weight at the join. Consistent type color also has a lot to do with the counters, or the spaces within the letters. If counters are too closed, it can make a letter seem heavy or affect

3. What width or widths do I need?

legibility and letter recognition. There’s some saying about how beginners design with black-space in mind and experts design with white-space in mind, but I forget the exact wording. You get the point.

Some typefaces come in a variety of widths (Narrow, Condensed, Regular, Extended, etc.), but when I talk about type width I’m not only talking about these drastic style changes within a family I’m also talking about the difference in letter width between different “regular” width typefaces. You probably have a natural preference for certain type widths (I tend to like wider/more round feeling widths than narrow ones) but there are appropriate times to use type of all widths. If you’re designing a website with narrow text columns, you might want to pick a typeface whose regular width is a little on the narrow side so you can get more words on each line without having to scale text down, which helps keep hyphenation reasonable and type more legible. If you have a site that has columns with vastly different widths, finding a typeface that comes in a variety of widths can be incredibly helpful so you can use narrower width type on narrower columns and normal width to ever so slightly wide type on wider columns. The goal when setting type is to make it beautiful and readable, and one of the things that helps with legibility is per-line word-count. Choose typefaces that lend a hand in getting the right amount of words on a line.

“HELVETICA NEUE DOES’NT PASS THE Il1 RULE...”

4. If it’s a sans, is there enough letter variety? Using sans-serif typefaces for body copy can be a little tricky because without serifs it can be more difficult for the eye to quickly distinguish between two similar letter forms. I’ve used the term “legibility” more than once already, and while I won’t go off on a tangent on what makes a typeface more or less legible, I can say that it’s all about pattern recognition. In his 2009 article “On Web Typography” for A List Apart (which was expanded upon for an upcoming book), Jason Santa Maria quotes Zuzana Licko who stated “We read best what we read most.” Perhaps 50 years from now, Helvetica will be considered the most legible typeface on earth because of the insane Helvetica fetishism we’ve witnessed over the last few years, but for now our (western) eyes and brains are trained to

skim quickly and effortlessly over serif typefaces and recognize patterns and shapes within the letters. I try to find sans-serifs that pass the Il1 rule. Type a capital I a lowercase l and a number 1 next to each other. If you can’t tell the difference between these characters, you may run into some trouble when setting the text. There was a fake London2012 twitter account posting some incendiary things this year that looked completely legit because the sans-serif twitter uses (Helvetica Neue) doesn’t pass the Il1 rule. The account was actually London20l2 but no one could tell the difference. Also check to see if the typeface has a two story a and g. Sans-serif typefaces with two story a’s and g’s usually read a bit quicker than those with single story a’s and g’s. All this said, 90% of the time I choose serif typefaces for body copy.

Type Designers:

WHERE DO I FIND GOOD TYPE ?

04.

You guys are in luck. Since I don’t work for one of the main web font providers unlike almost all people that write about web fonts nowadays, I can give you a bit of a different perspective about web font services. There are a variety of options out there and each has it’s own pros and cons. First, it’s probably good to understand the difference between hosted and self-hosted fonts.

Hosted vs. Self-Hosted Web Fonts Hosted web fonts are definitely the easiest to implement and usually just involve adding a line of JS to your site in the head in order to install. You then just have to follow the provided instructions for calling the fonts in your CSS and you’re ready to roll. I prefer hosted web fonts because they’re incredibly painless to set up. Self-hosted typefaces put more control in the designer’s hands but are a little less effortless to install. If you are

a control freak, self-hosted fonts may be for you. One of the major disadvantages with self-hosted web fonts is that if the type designer chooses to update the typeface, you must manually update the typeface on your site (upload new files to your host) vs. a hosted service which will update the files automatically (sometimes prompting you to “republish your kit”). One of the major advantages of self-hosted web fonts is that if the type designer updates the typeface you must manually update the typeface on your site, leaving it up to you to decide if you want to update. You see what I did there?

Typekit You guys are probably all pretty familiar with Typekit since they sponsor a lot of web related events and have one of the bigger presences in the web font world. Typekit uses a library subscription model for

typefaces, which is absolutely wonderful for web designers. For a low monthly fee you get access to a large library of typefaces and can create endless “kits” for all of the websites you work on. The team of people behind Typekit goes above and beyond to make browsing for fonts easy and fun and they post very handy articles on their blog. Sometimes I feel like I should be sending Typekit extra money because they’re so inexpensive it feels like I’m stealing from them. That said, anything that is cheap for you the user is probably also not returning a ton of dough to the type designers. While I love Typekit, and use them all the time, there are definitely web font services that have a payment structure that leans more in the favor of the type designer than the consumer.

Webt ype Webtype is run by some true type nerds over at Font Bureau. While they don’t have the biggest library, they do only serve up quality typefaces and specialize in the texty end of the spectrum. If you value quality over quantity this is the service for you. They do endless testing and tweaks to make sure everything looks amazing on both Mac and Windows. Type is rendered differently on Windows than it is on Mac, so sometimes something that looks beautiful and smooth on Mac looks completely weird and janky on Windows. Webtype goes to great lengths to make sure this doesn’t happen and that their type looks great even in the harshest environments. One of the main advantages of using Webtype over other font services is that they are actually designing / commissioning

typefaces to be made specifically for web, rather than adapting print typefaces to a web environment. Webtype is not a library subscription model, you pay individually and annually for each font you use on a site (pricing based on page views), but the fees are still quite low for what you get. This is definitely a pricing structure that is more in favor of type designers, but they do what they can to make it painless and inexpensive for the average user. Like most services with this pricing model, they do allow a free one month trial for their fonts so you can see everything in place before committing. You can also buy a perpetual license for typefaces, but most people opt to license for limited time periods if they foresee a redesign a few years down the road or want to save a little dough.

Fontdeck Fontdeck is similar to Webtype in its pricing structure you pay per font per month based on average page views and thereâ&#x20AC;&#x2122;s a free trial period to test typefaces

before you commit. They have a wide selection of type and seem to focus more on quality over quantity, carrying a lot of the classics but also a good mix of new solid typefaces. Like Typekit, Fontdeck was founded by a group of enthusiastic web nerds with a passion for typography and also like Typekit, theyâ&#x20AC;&#x2122;re very easy to use and install and offer both a JS (recommended) and an HTML option is offered for the font installation.

Fonts.com Fonts.com has an enormous library of fonts and has a pretty compelling marketing page. They stress how forward thinking they are in terms of open type support, that they have the best font selection with over 20,000 typefaces, and that they have unparalleled language support. It looks like at one point they priced their typefaces individually but are now offering a subscription model and their top tier subscription includes access to unlimited desktop fonts (a library of over 7,000 typefaces) delivered

through

proprietary

system

called

SkyFonts.

W e I Nway where K some are offered in b a semi-subscriptiony you pay for page views and have to re-up once you hit limit.personally I know from personal experience their Iyour haven’t used WebINK (yet!) butthat Thomas self-hosted method not things the easiest implement. Phinney had some is great to saytoabout it and he listed some features that many of you will find appealing: it Fonts does not require JavaScript for fonts to Google Web work (though can still things use JavaScript to suppress I’ve said some you disparaging about Google Fonts the dreaded Flash of Unstyled Text or “FOUT”); [he in the past, mostly because I think type designers states that there is a] higher quality bar than Typekit or already have a hard enough time getting paid so their Google Web Fonts; there are over 1000 families, 5,000 “everything is free forever” model bothers me. Don’t fonts; 80% the of WebINK fontsinternet are enabled for be Photoshop start with whole “the should a place for purposes of comps and mockups via a plugin—once for a free exchange of ideas” line, and I know plenty activated in Photoshop they work just like other fonts, of you guys think we should open-source everything

no weird or awkward limitations. (Also enables Google Fonts in Photoshop.); the FontDropper bookmarklet allows users to try any WebINK fonts on any web ever, but type design is one of those professions page, live—including ones you are working on. that really does take a lifetime of experience to master and every typeface takes endless hours and M F create.o The typefaces n tavailables sometimesy years to MyFonts Google through is like a Fonts mega were department made by store type fordesigners type and like were that any mega paid adepartment one time flat store fee not for their everything work along they sell is the with amazing. promise There’s of exposure some beautiful to a large high audience end stuff on there (and we but all also knowsome howdreck. I feelAlso, about they’re that completely incentive). fine offering Because of this webfee fontstructure, licenses to the anyfonts typeface that (with are good the designer’s often onlypermission come in one of course) weight even or aren’t if the available typeface was not with an originally italic. Allintended this said,forit’s webdefinitely font use.one Some of fontseasiest the are offered services as atoperpetual implement license on your (which sitemeans since you payno there’s more need upfor front a membership, but aren’t charged login,annually) or payment. and

“ENDLESS HOURS AND SOMETIMES YEARS TO CREATE...”

I shake my fist at them for making something so easy to use that I have to dislike on principle.

Other Ser vices and Options It’s not my intention to make a comprehensive list of all web fonts services out there, and there are plenty of others including those set up by individual foundries. On my website, I use H&FJ web fonts, which are not yet available to the general public but will be soon. I definitely advise that if you fall in love with a typeface and notice that it’s not available through any of the major web fonts retailers, contact the designer to see if there’s a way for you to use their

font. Also, if you notice a typeface is available through multiple retailers, you could do the type designer a serious solid by contacting them to see which of the services offers them the best cut of your cash. Above all, remember that working with type retailers and designers that focus on quality over quantity is key. The more browser/platform testing and insane perfectionist nonsense foundries do before they release a font, the better. You get what you pay for, and sometimes you end up “paying for” free fonts in different ways. Testing type in different conditions will always be necessary, but if you choose high quality fonts less of the testing will fall on your shoulders.

Type Designers:

THINKING CONC EPTUALLY

05.

Defining the Mood

you’re only brainstorming why hold yourself back?

Alrighty, now that you know where to look and have established some general guidelines for what you are and aren’t looking for in an anchor typeface, you can start getting a little arty. Brainstorming for type is not dissimilar to brainstorming for an editorial illustration or a book cover. If you’re commissioned to create a book cover, first you have to read the book.

I’m a huge fan of word association lists. I don’t make pretty “mind maps” where I try to draw visual connections between my thoughts, I just let my mind wander and write down any word that pops into my brain when reminiscing about a book I just finished or when brainstorming for a company’s logo. The less pretty and organized this list is, the more likely I am to actually let my mind wander. After I’ve exhausted every possible banal and bizarre thought point, I think about which of these words would be an a-ha moment for a savvy reader, sometimes voltroning a few words together to create a very unique and unexpected concept. Sometimes pop culture attaches associations to type that are hard to shake. Most people think about Cooper Black as embodying the 1970s aesthetic despite the fact that it was created in the 1920s. Blackletter, before it was embraced by every Hot Topic shopping

As you read, you write down key points and visual cues you might be able to pull from in the future not just plot points and character names that could easily be found on Wikipedia, but also notes about how the text makes you feel. What are the characters like? What mood does each scene convey? You can even write down random words that pop into your head that seem completely unrelated to the book. Some deep crevice of your brain thinks those words may be relevant, and since

high schooler, was just a fancy laborious way people wrote in the 12th century. Type without immediate cultural associations can definitely evoke a feeling and a backstory, you just have to spend enough time with it to let that story materialize. Most people aren’t used to thinking about type conceptually, and it’s absolutely more difficult to design with abstract forms rather than narrative images. Just because it’s easy to find shitty stock photos of ethnically ambiguous business men shaking hands on top of a globe doesn’t mean our conceptual thinking should stop there.

If you were making a porn website that specialized in films created between 1980 and 1985, wouldn’t it be fun to choose a text face that was created during that time frame? It wouldn’t need to be some crazy shoulder-padded display face, just a subtle wink to the era. I worked on a project with Google recently, and while I had to use some Google Web Fonts which were modern interpretations of type that could have existed in the 1920s, I did convince them to license Cheltenham as the main typeface. Cheltenham had the right amount of personality for the project and was made in the very early 20th century so it was totally feasible that it could have been used in the films.

Establishing Histor ical Context Sometimes you’re working on a project and you can add another layer of conceptual fun by sticking to type that was created during or accurately references the historical period your project is meant to convey.

Trying to be historically accurate is one of those things that will go unnoticed by most folks, but as we established earlier you don’t care that most people won’t know the extent of your labor you’re happy

that there are a few true nerds out there that will be tickled pink by your efforts. I should also probably mention that if you do make a very wrong decision when it comes to type, non-nerds will notice, they just won’t know how to verbalize what’s wrong. I like to compare making a typographic mistake (like accidental inverted stress on a letter, which is when the thickness is in the wrong place) to having an eye a half-inch higher than the other on your face. People might not be able to place right away what it is, but something about your face isn’t quite right. When I worked on the typeface for Moonrise Kingdom, trying to find a script that felt true to the

time was a little tough most of the script typefaces that came out in the late 50s and early 60s (the story takes place on a small island in New England in the early 60s) were brush scripts, which didn’t feel right for the film. We had to reach a little earlier, into the 40s, to find something that made sense. Typefaces from the 40s would totally have still been in use in the 60s, especially in a small conservative town in the northeast. This sort of conceptual reasoning in typeface selection is something that clients love to hear about and can help you convince them to think beyond the standard

“web safe” typefaces. The more you know about the typefaces you’re using, the easier it is to justify their use. I created a little type sample typesetting the title and the first few paragraphs of The Great Gatsby to show you how historical accuracy can add an extra layer of oomph to your design. There are four versions, a completely un-styled version, a fully styled version that uses the default typeface Georgia, a version using typefaces that people perceive as being accurate to the time but are a little off, and a version using historically accurate typefaces. I also targeted the text differently in each version so you can see different

ways to apply CSS to text. While the “somewhat accurate” version might scream 1920s a bit more loudly than the historically accurate version, there’s something nice about making historical references that are more subtle and less cartoonish. The reason why everyone throws up rainbows about the set design and costumes on Mad Men is because they go above and beyond to show more than just the most iconic designs of the 50s and 60s. Also, by using typefaces that are accurate to the time we don’t run the risk of rewriting history and adjusting the public perception of what design from that era looked like.

Type Designers:

PAI RING TYPEFAC ES

06.

You can absolutely design an entire website with just one font family, but why miss out on all the fun of font-pairing? I’ll bring up the fashion design analogy again if you dress head to toe in Paul Smith you’ll look sharp as a tack but you’ll also look like a walking advertisement for Paul Smith. Good fashionistas and good typographers flex their curatorial muscles by putting together items in unexpected combinations that lead to beautiful and harmonious (or purposefully discordant) results. (On a side note, I love making this fashion design analogy over and over again to a crowd whose wardrobe consists entirely of plaid button-downs and free t-shirts). Establishing a relationship between two different typefaces can seem like a daunting task, but there are a lot of resources and writing out there to help you figure it out. One of my favorite sites to see good font pairing in action is Fonts in Use and if you want to hear some very smart people talk about

pairing typefaces, look for talks and articles by Jason Santa Maria, Tim Brown, and Stephen Coles. Also, never hesitate to ask a type designer to recommend typefaces that will pair well with your anchor. Type designers, like most good nerds, love to share knowledge with anyone that’s hungry for it. Ask them about font pairing, licensing questions, technical questions, relationship advice anything really. Also, if you can establish a relationship with a foundry or designer, they’ll usually let you try stuff out for free or give you access to early releases of upcoming typefaces.

1. Choose a Super-Family. Some typefaces are released as a super family. Super families come with a variety of weights, a variety of widths, and sometimes a sans-serif and serif version meant to complement each other perfectly. Combining fonts from the same super family is

definitely the first step to feeling confident mixing and matching typefaces. You can instantly create a harmonious relationship between two fonts this way, which is great if harmony is what you’re after.

2. Choose Typefaces from the same type designer. Each designer has a personal aesthetic that shines through in their work, some more obviously than others. If you are feeling a little unsure about combining very different typefaces, do some foundry research first to find designers you like. If they

have a number of typefaces available, chances are there are a few that would pair off well together.

3. Choose typefaces with similar characteristics. Once you feel like you’re ready to take off the training wheels, try to make type pairings based on what they structurally have in common. To explain how you can establish similarities between two typefaces, I’ll first explain what you should be looking for. Typefaces are broken into three parts.

The Skeleton The â&#x20AC;&#x153;bonesâ&#x20AC;? of the typeface or the basic frame on which the typeface is built. The skeleton determines the width of the letter, the x-height, and the general proportions of components of the letter.

The Meat The body and weight of the typeface. While adjusting the weight of type can seem like the most dramatic change you can make, the type will still be relate closely to its underlying skeleton. Some typefaces are weighted in different ways than other depending on which tradition they emerged from translation (broad nib) or expansion (pointed pen).

The Clothes All the fun pizzazz we add to type to make it look awesome. Sometimes serifs can be classified as clothes or meat, depending on how essential they are to the structure of the type. Other things that would be considered clothes are spurs, ornamental serifs, drop shades, drop lines, etc. A serif and sans-serif might look spectacular together if they share a similar skeleton a lot of people recommend this as a place to start. Find a serif for your body copy and a sans for your headlines. Sans and serifs can form an easy harmonious relationship if they have similar proportions (x-height, letter

width, bowl shape and structure) and attitudes. I made a little chart of a way to think about the stages of relation between typefaces: A sibling relationship example would be a sansserif and serif from the same super family or a sans-serif and serif that have a very similar skeletal structure. When pairing typefaces that have a lot in common, ask yourself if the second typeface you have chosen is different enough to justify its use. Could you just get by with one typeface? Is this second typeface bringing something new to the table? For a cousin relationship, two typefaces would have a lot in common structurally but exhibit differences that make them feel only tangentially related. Typefaces from the same type designer that are very different stylistically or typefaces created in the same era that share subtle similarities might be considered cousins.

Some of the words you wrote down during your brainstorming session may come in handy now to help you figure out what your typefaces have in common. To pair distant relatives together you have to get a little loose. Sometimes the only thing that unites a pair of typefaces is their mood or the feeling that you get when you see them. Some typefaces are like married couples that on paper seem like a terrible match but when you see them together it all makes sense.

4. Donâ&#x20AC;&#x2122;t be afraid to experiment! Web designers can easily test and play with many typefaces before committing to them thanks to free trials offered by foundries and web fonts services as well as tools like Typecast, which allows you to design with live fonts in the browser. Typecast is owned and operated by Monotype but includes typefaces by

other foundries as well. Anyway, go forth! Have fun! Make the web a prettier and typeier place! I know many of you went to art school and I’m assuming most of the people reading this article are designers, illustrators or others working within the world of what we reluctantly call “communication art”. When we graduated from art school, a career was promised to us. We wouldn’t spend our days covered in grape jelly, masturbating before crowds to win a spot at the Whitney Biennial we would live normal lives, work at offices, bask in the glow of our computers. We would have stability and wouldn’t have to worry about how our “art” would pay the bills. Our parents were happy, we were happy, our fine-art friends

called us sell outs and all was right in the world. We found our first job. After a couple years we wanted a change of pace and found a new one. Things were good. Life was easy. Mornings were spent perusing cute overload before the coffee kicked in. We designed without ever having to really deal with clients, invoicing, negotiating all the icky businessy stuff that bums everyone out. Our left brain atrophied. Then one day we woke up with the itch. It became more and more powerful as we dragged ourselves to work on blizzardy days or suffered through hangovers under fluorescent lights and drop ceilings. At 7am, half awake under the weak arc of water emptying

from our shower head we said to ourselves “I’m going to do it! I’m going to go freelance!” We threw on a towel and the world felt sparkly and new. We’d make our own hours! We’d sleep until noon if we wanted to! We’d no longer worry about using up all of our sick days. We’d be in control! (The freelancers reading this are without a doubt rolling their eyes at the naiveté we all once possessed). We gave notice at work and a few weeks later our dream was a reality. As time went on though, we realized this reality was not always a dream come true. Now we were more than creatives, we were business people. If we were one of the lucky ones, we picked up enough client work to keep us from retreating, tail

“IM GOING TO DO IT! IM GOING TO GO FREELANCE!”

between our legs, to our previous lives as employees. We completely fucked ourselves over on those first few jobs but eventually cobbled together a relatively good standard contract and learned to say enough is enough after the 10th round of revisions. This is not the stuff we learned in college. If you even thought about contracts and invoices before that art school diploma hit your hand I commend your professors, but most of us were off in la la land developing identities for fictitious products, complaining about how we only had seven weeks to get that logo right. You can learn a lot of the business end of design and illustration by trial and error and reading articles and books, but one thing that is seemingly impossible to get a grasp on is pricing. Whether you are a student, a young designer, or a seasoned pro, pricing jobs can be one of the most frustrating parts

of the creative process. The cost of creative work is shrouded in mystery and very subjective. While it makes some people uncomfortable to talk about art and money together (as we all know creatives are really meant to suffer through life and die penniless), they are incredibly similar when you think about it. What is money other than dirty rectangles of pressed tree pulp? Because we all believe it has value it is valuable. I know you’re all dying for me to get down to brass tacks and explain how to price for each and every design situation, but what follows won’t be anywhere close to a definitive guide, just some of my own opinions and words of wisdom on how to avoid screwing yourself and the rest of us over by doing too much work for too little pay. We’re in charge of assigning value to what we do. Alright, here we go!

Type Designers:

THE DARK ART OF PRICING

07.

I know many of you went to art school and I’m assuming most of the people reading this article are designers, illustrators or others working within the world of what we reluctantly call “communication art”. When we graduated from art school, a career was promised to us. We wouldn’t spend our days covered in grape jelly, masturbating before crowds to win a spot at the Whitney Biennial we would live normal lives, work at offices, bask in the glow of our computers. We would have stability and wouldn’t have to worry about how our “art” would pay the bills. Our parents were happy, we were happy, our fine-art friends called us sell-outs and all was right in the world. We found our first job. After a couple years we wanted a change of pace and found a new one. Things were good. Life was easy. Mornings were spent perusing cute overload before the coffee kicked in. We designed without ever having to really deal with

clients, invoicing, negotiating all the icky businessy stuff that bums everyone out. Our left-brain atrophied. Then one day we woke up with the itch. It became more and more powerful as we dragged ourselves to work on blizzardy days or suffered through hangovers under fluorescent lights and drop ceilings. At 7am, half awake under the weak arc of water emptying from our shower head we said to ourselves “I’m going to do it! I’m going to go freelance!” We threw on a towel and the world felt sparkly and new. We’d make our own hours! We’d sleep until noon if we wanted to! We’d no longer worry about using up all of our sick days. We’d be in control! (The freelancers reading this are without a doubt rolling their eyes at the naiveté we all once possessed). We gave notice at work and a few weeks later our dream was a reality. As time went on though, we realized this reality was not always a dream come true. Now we were

more than creatives, we were business people. If we were one of the lucky ones, we picked up enough client work to keep us from retreating, tail between our legs, to our previous lives as employees. We completely fucked ourselves over on those first few jobs but eventually cobbled together a relatively good standard contract and learned to say enough is enough after the 10th round of revisions. This is not the stuff we learned in college. If you even thought about contracts and invoices before that art school diploma hit your hand I commend your professors, but most of us were off in la la land developing identities for fictitious products, complaining about how we only had seven weeks to get that logo right. You can learn a lot of the business end of design and illustration by trial and error and reading articles and books, but one thing that is seemingly impossible to get a grasp on is pricing. Whether you are a student, a young designer, or a seasoned pro, pricing jobs can be one of the most frustrating parts of the creative process. The cost of creative work is shrouded in mystery and very subjective. While it makes some people uncomfortable to talk about art and money together as we all know

creatives are really meant to suffer through life and die penniless, they are incredibly similar when you think about it. What is money other than dirty rectangles of pressed tree pulp? Because we all believe it has value it is valuable. I know you’re all dying for me to get down to brass tacks and explain how to price for each and every design situation, but what follows won’t be anywhere close to a definitive guide, just some of my own opinions and words of wisdom on how to avoid screwing yourself and the rest of us over by doing too much work for too little pay. We’re in charge of assigning value to what we do. Alright, here we go!

Pr icing hourly punishes efficienc y So this is a pretty bold statement and like any bold blanket statement it should be taken with a grain of salt. Hourly pricing can be incredibly advantageous in certain circumstances, like when you receive that first email from a potential client and, through their thousand word introductory essay lousy with emoticons and unnecessarily capitalized words, they paint a clear picture that they are completely batshit insane. You know that there will be many rounds of revision in your future and that over the course of working together you’ll be as much a therapist as a designer. Totaling those 500 hours at whatever your hourly rate is will equal a pretty good pay day.

It’s more than just crazy people that can make hourly pricing worthwhile though pricing any long term design project hourly can be advantageous, as long as you communicate clearly along the way what kind of hours you’re devoting to the project. If the first time your client sees your total hours is on the job concluding invoice, a world of hurt awaits. It will be like being audited except somehow more unpleasant. Be prepared to forward them every approving email, to itemize every minute spent. Pricing hourly seems much easier than flat rate pricing, but because you have to give clients a ballpark full cost price upfront (the total hours you plan to work x hourly rate), you can end up in a very

tough spot if you don’t have a firm grasp on how long it takes you to do things. You’re nearing the halfway point in the project and are already over the total hours you’re contractually committed to. What does this mean? It almost never means that you’re paid double your original fee. Even if you can eek out a little extra money from the client, by the end of the project your hourly rate will look more like the one you were earning at the Blue Comet Diner at age 16. So once you have a grip on your work flow and become more and more efficient, hourly pricing makes perfect sense, right? You know how long it will take you to do something, you price for it, everyone is happy.

are you... PRODUCING THE SAME RESULT ?

Unfortunately this is a half truth. Sure you’re getting paid well enough and certainly making more hourly than you probably were at your old day job, but I’ll paint a picture as to why this is a flawed pricing model: Two designers are hired to produce posters for a music festival. Both have the same hourly rate of $100 per hour (a reasonable rate for someone that’s been in the biz for a few years and has a few accolades under their belt), but one designer works much faster than the other. Both are equally talented, but one is far more efficient. At the end of the job, the designers turn in their invoices he worked on it for a total of 18 hours and she a total of 7 hours. He is paid a respectable fee of $1800 and she $700 for producing the same result.

Your rational mind says “Well, he did work more hours than her...” but part of you knows that this isn’t completely fair, and that part is correct. This becomes epically clear when working for big name clients. Here’s another scenario: You’re hired to do a monogram for a giant international company. They’ll want to use this monogram on everything from price tags to billboards to TV spots and they want to use it forever (in perpetuity until the sun explodes). They have a pretty clear idea of what they want and you know that it will take about 10 hours total with the initial exploration, back and forth revisions, and finalizing. Even if your hourly rate is $250 / hour

(a pretty high rate), the total you’re earning for that logo is $2,500. If you think that is a good price for a professional designer to earn crafting what is essentially a logo for a huge company, you are mistaken. So if you aren’t pricing hourly, how DO you price?

Licensing and R ights-Management So while pricing hourly has its disadvantages, it’s a good place to start. Most designers take into account the hours they’ll put into a project when coming up with a price, but the seasoned professionals use it as part of the way they quote a project, and not as the only defining factor. Once you feel comfortable with your hourly rate and can somewhat accurately predict how long it will take you to do something, there are a few other things to consider that will boost your prices and turn this design

hobby of yours into an actual sustainable career. As a designer, when you hear the term “rights management” it takes you back to your intern days doing photo research, trying to find non-awful royalty free images after your boss told you all the rights managed photos were way too expensive. How does rights-management apply to a designer or illustrator? Photographers aren’t the only ones able to manage the rights of their work. You inherently own the rights to anything you create, this is why it’s incredibly important to read every contract for every job. Often times clients want more rights than what they are willing to pay for the biggest red flag word being “work for hire”. This means that the client owns all the rights to anything you create for them. They essentially, legally, become the author of your work. As a graphic designer, work for hire is a bit more acceptable in many situations since you’re not authoring new content as

much as creating a beautiful context for other people’s content (speaking specifically about any sort of layout design). Where rights management usually comes into play is in the context of identity work, and this is why logos are priced the way they are. It’s understood that the clients will need the rights to the mark you create so that they can trademark it and use it on unlimited applications, so when pricing for a logo you should take that into account. In addition to a fair hourly rate, clients pay for the rights to use that logo in an unlimited capacity. Aside from giving away all the rights to your work for an additional (hopefully ginormous) fee, you can give them away for limited periods of time or for limited applications by licensing work to clients. There are fewer ways to do this as a graphic designer, but licensing is an incredibly important part of being an illustrator or letterer. Of the couple hundred client projects I’ve

done over the past few years, very few of them have required a full buyout of all rights, and the ones that have required them paid my rent for the better part of a year. Here are some factors that go into pricing a job based on licensing: How long does the client want to license the artwork for? One month? One year? Two years? Five years? In perpetuity? In what context is the artwork going to be used? Do they have the rights to use it on anything? In print only? Web only? Broadcast? Tattooed on their faces? If the job is reprinted, will there be an additional fee for a reprint? Do they want an unlimited license or do they need to own the rights? Are these rights transferrable if the company is sold?

What kind of company is it? Is it for a Mom-and-Pop business, a multi-billion dollar corporation or something in between? By now your head must be spinning. This is some complicated stuff right? Maybe, but this is how you can actually make a living doing illustration and design and maybe even eventually quit your butthey-give-me-health-insurance barista job. What follows is a fictional pricing example to show how powerful licensing can be. I’m going to write it in the context of lettering, which is priced essentially the same as illustration. Graphic designers should still pay attention though, because when I talk about buyout pricing, that’s essentially what you’re going to be thinking about when pricing logos. My price

points will be higher than what a fresh faced noob can probably charge, but should at least illustrate how much of an impact licensing can have on the cost of artwork.

1. The Correspondence Dear Ms. Hische, I’m an art director at Awesome Agency Inc, working on a campaign for an international clothing brand (on par with the gap) and am writing to gauge your interest in creating artwork for us. We need one five-word phrase illustrated in a script style. The artwork should be highly illustrative, attached are some examples of work you and others have done that are in the ballpark of what we want for the campaign. If this sounds appealing to you, please send us a quote by end of day tomorrow so that we can present your work, along with a few others we are gathering quotes from, to the client. Thanks so much and look forward to working with you! Sincerely, Arthur Director They didn’t give me much to go on here aside from the actual work I’m creating. It sounds like a cool job, but I’m going to need to do some investigating before giving a proper quote. The biggest young

designer mistake here would be to quote a flat fee without finding out what kind of usage rights they want. Thanks so much for thinking of me Arthur! I’ll put together a quote this afternoon. Do you want me to price for every usage scenario or do you have some specific uses in mind? All the best, Jessica Usually here they’d write back with some very very specific uses in mind which makes it a bit easier to quote, but sometimes you’ll get a letter that looks something like this: Hi Jessica, Great to hear back from you! We’re still in the exploratory stages of the project, so we can’t give specific usage situations yet. Please quote for creation of artwork for presentation only and for a few ballpark usages. Arthur

2. What We Know This is for a big international clothing company. They are gathering prices from a few different people. They’ll present several artists to the client who will chose based on style or lowest price depending on what the client’s priority is. They want a price for presentation only. This means you create the artwork

and they only have the right to show it around in-house and to the client, NOT to use it in any way for their campaign. They want a number of usage scenarios. This is on top of that initial creation / presentation fee.

3. Pricing for Presentation If you’ve done any editorial illustration work (magazines and newspapers), you know that the rates are pretty standard across the board: $250-$500 for a spot illustration, $500-$750 for a half page, $1000$1500 for a full page, $2000-$3000 for a full spread, $1500-$3500 for a cover. These are all pretty normal prices and there are of course magazines that pay higher or lower. I tend to start with these prices in mind when thinking about pricing for “Presentation Only”. They want a five word phrase that is highly illustrative, which equates to “a full page illustration” or so. Because this is for advertising and not editorial, adjust your rates depending on the client. This is for

a big company, so my presentation only fee might be somewhere around the $5000-$7000 mark depending on how complicated what they’re after actually is. If this was for a smaller company, the presentation only fee might be closer to $2500 or $3500.

4. Sample Usage Scenarios If a client doesn’t tell you specifically what usage rights they need, you should make sure there is a good range represented. In this situation, I’m definitely going to price based on the length of time they need it, plus some general examples of what context the artwork will be used in. When you send your quote, it should be broken down as clearly as possible so there is no confusion as to what the clients are paying for in each stage of rights licensing. This would be the quote I would send back: Hi Arthur, Below are a few sample quotes for the project. As I did not have much info about what usage

rights you needed, we would need to talk specifically about anything not mentioned below once the client has a clearer picture of what they need. Presentation Only: $7000 2-3 initial pencil sketches shown, one chosen to be created as final art. After final artwork is presented, the client may request up to two rounds of minor revision. Additional revisions after this point will be billed at $250/hr. If the client chooses to not move forward after pencils are presented, a kill fee of $3500 will be paid for completion of sketches. If artwork is completed to final, the full fee will be paid.

Usage Scenar io 1: +$5000 The client may use the artwork in a magazine or newspaper ads. The ads can be utilised domestically and internationally over the time frame period of 1 year.

Usage Scenar io 2: +$7500 The client may use the artwork in all print media (domestic and international) including but not limited to magazines, newspapers, point of purchase displays, posters, and billboards for a period of 1 year.

Usage Scenar io 3: +$10,000 The client may use the artwork in all print and online media for a period of 1 year. Usage Scenario 4: +$14,000 The client may use the artwork in all print media, all online media, and broadcast media for a period of 1 year. Buyout: +$25,000 The client may use the artwork in all media including print, online, and broadcast in perpetuity. Thanks so much for thinking of me for the project, let me know how these numbers go over and if you need any clarification about the different usage points. All the best, J. So this is a pretty basic breakdown, but it gives the

agency/client a lot of price points to consider. If I wanted to break it down even further, I would price based on 2 year and 5 year use and give different prices for U.S. only, North America only, etc. Most importantly, note that all of the usage scenarios are on top of our original presentation only / artwork creation price. The prices are not cumulative in this example quote, so each +$ is only added to the presentation fee. The top price in this scenario is $32,000 (I saw there was some confusion in comments so thought I’d clarify). These prices might seem completely outrageous to you, but they’re actually pretty reasonable when we take into effect who the client is and what kind of rights they’ll probably need. If you’re an up and comer, your prices might be a bit lower but the percentage markup should remain about the same. Imagine if we had priced this hourly! How do you know if you priced right? If the client writes back immediately and says “These numbers

look great! We’ll send along a contract for you to go over in a few days!” It probably means your prices are too low. If they write back and try to negotiate you down a little bit, you were probably pretty spot on, and if they write back and say that this is well beyond their budget, you get to decide whether or not you want to figure out a way to work within their budget or whether you want to walk away and take one for the team. When you’re offered a very low budget by a very huge client, you can always feel good about turning it down knowing that you are helping to raise the standards of pricing for others.

Why doesn’t anyone e ver talk about pr icing? There are a lot of reasons why designers are reluctant to talk about pricing, the most obvious being that no one wants to shout their annual income to the masses. Once you start giving away your general prices, it’s not incredibly difficult to add things up

and figure out a ballpark of what an individual or company makes in a year. A personal note: don’t assume that the pricing structure above means that I’m swimming in a pile of money. My half-retired dentist father still makes more than I do. The fake job I used as an example above is an advertising job, and I used it as an example because pricing for advertising is one of the darkest arts of all. There are wild differences in pricing from presentation to buyout, and a ton of factors that affect the price. It’s great to surround yourself with friends or more experienced designers that can help you price a job. You can always consult The GAG’s Ethical Guide for Pricing, but definitely use it for ballparking more than definitive numbers.

The Pr icing Domino Effect It’s incredibly important for even young designers to always quote respectable prices. It can be very tempting to create artwork for a “cool” company for very little pay and the promise of insane exposure an incredible portfolio piece. Every successful designer and illustrator has at one point succumbed to the siren song of the “cool” industries (there are a few “cool” companies that don’t try to take advantage of designers but they are the exception and not the norm). When you are starting your career as a freelancer, it will be incredibly tempting to take on any work that comes along, no matter how unfairly companies are trying to compensate you. Remember that you are talented and that your talent has value and that ultimately it is up to you to determine how much people value your talent. By helping to keep pricing standards high, you not only help yourself by avoiding the title of “The Poor Man’s Marian Bantjes” (essentially the creative equivalent of a knock-off handbag), you also help every other young designer struggling to get paid out there, and help every designer that came before you to continue making a living doing what they love.

A footnote for the haters: Whenever anyone writes an article like this asking designers to raise the standards for themselves and others; calling out companies for unfair pay or empty promises there are always a few anonymous contrarians that berate the author for preaching from an ivory tower, not understanding what the masses are actually going through. I have been lucky enough to have success in my career, and I want to use the knowledge Iâ&#x20AC;&#x2122;ve gained to help others have success. Why anyone would complain when someone is advocating for better wages, I do not know, but it always happens.

Extra Notes:

REFERENC E LIST: www.google.com www.pinterest.com www.frankie.com www.creatingcatering.com www.missatlaplaya.com www.appreciateamate.com www.jesswong.com www.carlahackett.com www.positive-posters.com www.jessicahische.is