Upping Your Type Game
Note: This text was created as a talk for An Event Apart in San Diego. It was presented Tuesday, May 21st 2013. Many thanks to Stephen Coles for his advising and light editing. While the full slide deck is not shown below, about a quarter of the original slides are used as editorial illustrations. To send comments or propose corrections (kind and helpful tone appreciated), email me.
Type Designers are your new best friends.
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 non-retina 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.
On Type Designers and Favorite T-Shirts
Before I introduce you to a few type designers, I’ll answer the question that every person in the type world is asked—“What’s your favorite font?” If you are a designer of any sort, you’ve probably been asked this question more than once. I know there are plenty of people that can easily name their favorite typeface (usually Helvetica) but I’m not one of them. I’m a believer that if you have a favorite font, you’re probably using it inappropriately or way too often.
Think of typefaces as items of clothing and your self-proclaimed favorite font as a hilarious ironic t-shirt. You love that t-shirt. You think you look like a goddamn model in that t-shirt because it fits like a glove and it’s the perfect amount of thread-bare. Maybe that t-shirt has even gotten you laid a few times. No matter how amazing you think that t-shirt is, if you wore it every single day and to every event, be it a happy hour or a black tie affair, people would start to notice. You’d probably get gentle remarks from your friends about how you should expand your wardrobe horizons from time to time. Strangers might think it’s the only t-shirt you own and that you’re some kind of mysteriously well-groomed homeless person. The other thing about your hilarious ironic t-shirt: it was cool like five years ago but now we all think it’s boring and dated. Don’t have a favorite font. Do have a favorite type designer.
Since I’m comparing fonts to t-shirts, I’ll compare type designers to fashion designers. While it’s ill-advised to wear the same item of clothing every day, it’s absolutely normal to have a favorite fashion designer (or several favorites). If you fall in love with a pair of pants one season, chances are that next season you can buy pants from the same designer and be similarly pleased. Maybe you only buy shirts from one designer because they perfectly hide that Freshman 15 you’re still trying to rid yourself of at age 30. Maybe you only buy shoes from one designer because they are the only shoes you’ve ever owned that don’t give you a foot-sized blister. Either way, you know you can go back to those designers time and time again and find something you love and that works perfectly for you. If you get to know the type designers that make things that you love, you’ll never run out of beautiful typefaces to work with.
A few type designers I love:
-
H&FJ Jonathan Hoefler & Tobias Frere-Jones
H&FJ have an incredible reputation for making beautiful text type. You probably know them best from their typefaces Gotham (embraced by the Obama campaign) and Archer (originally commissioned by Martha Stewart but now used everywhere.) I love these guys. And I use their fonts on my site.
-
Okay Type Jackson Cavanaugh
If you’ve seen me speak in the last year, you’ve seen me use Jackson’s beautiful Harriet Series all over my presentations. The slides in this post use his typeface extensively. I love everything this man makes and when he showed me Harriet for the first time I wanted to both punch him in the face and kiss him on the lips.
-
Underware Akiem Helmling, Bas Jacobs & Sami Kortemäki
You’re probably familiar with their typeface Bello but there are so many others worth checking out. I’m a big fan of Dolly, which is a very friendly serif, and Liza if only for the opentype insanity they programmed into it.
-
Darden Studio Joshua Darden
Josh and his studio make incredibly beautiful typefaces, including Freight, a serif super family and Omnes, a rounded sans that has a wonderful weight range and great personality.
-
Mark Simonson
I first became familiar with Mark’s work because of his typeface Coquette. His sans-serif display face Mostra Nuova is beautiful and vintagey and he has a slew of other great faces. Also, his website is lovely.
-
HVD Fonts Hannes Von Döhren
When I judged the TDC Type Annual a couple of years ago there was one typeface that made me say to myself “I can’t wait to go home and use that!” That typeface was Brandon Grotesque. Since then Hannes has released a few other faces including Pluto and Pluto Sans.
-
Type Together Veronika Burian & José Scaglione
With typefaces like Abril and Bree under their belt, these guys can do no wrong. I think my favorite of theirs (right now) might be Maiola though. Goddamn I love that typeface.
-
Klim Type Foundry Kris Sowersby
I don’t know a single type-centric person that won’t praise the abilities of Kris Sowersby. He’s a young kiwi that’s released a string of hits including National and Founders Grotesque, and I love Galaxie Copernicus, which is a super pretty serif.
-
Just Another Foundry Tim Ahrens & Shoko Mugikura
Lapture from JAF is a beautiful and weird text face and Herb is one of the coolest typefaces ever. These guys make beautiful type with the right amount of personality.
-
House Industries Rich Roat, Andy Cruz, Ken Barber, & Others
You couldn’t spit without hitting one of House’s typefaces in my college design department. They specialize in fun and funky display typefaces that are beautiful and well built.
-
Commercial Type Christian Schwartz & Paul Barnes
Christian and Paul have some truly beautiful typefaces and have carved out a niche in the newspaper industry for producing excellent newspaper type. Their talents don’t stop there though, check out Marian, a lovely hairline that, while impractical for the web, is still worth appreciating.
-
Sudtipos Alejandro Paul
If you got married in the last five years, chances are high that you used one of Ale’s typefaces on your wedding invitation. If you love to play around with swashes, his fonts are for you.
-
MVB Fonts Mark van Bronkhorst
Mark’s Sweet Sans is one of my favorite faces—I’ve always loved Engravers’ Gothic but found myself wishing it came in more weights or just had a bit more to it and then Sweet Sans debuted to answer my prayers.
Choosing the Right Type
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 variety 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 true 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.
-
Is it a typeface 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 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.
Some other things I consider while choosing a text face:
-
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’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.
-
Does it have even color?
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’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.
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 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.
-
What width or widths do I need?
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.
-
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.
Where do I find good type?
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 its 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?
Some Common Web Fonts Services
-
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.
-
Webtype
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’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’re very easy to use / install and offer both a JS (recommended) and an HTML option for 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 a proprietary system called SkyFonts.
-
WebINK
I haven’t personally used WebINK (yet!) but Thomas Phinney had some great things to say about it and he listed some features that many of you will find appealing: it does not require JavaScript for fonts to work (though you can still use JavaScript to suppress the dreaded Flash of Unstyled Text or “FOUT”); [he states that there is a] higher quality bar than Typekit or Google Web Fonts; there are over 1000 families, 5,000 fonts; 80% of WebINK fonts are enabled for Photoshop for purposes of comps and mockups via a plugin—once activated in Photoshop they work just like other fonts, no weird or awkward limitations. (Also enables Google Fonts in Photoshop.); the FontDropper bookmarklet allows users to try any WebINK fonts on any web page, live—including ones you are working on.
-
MyFonts
MyFonts is like a mega department store for type and like any mega department store not everything they sell is amazing. There’s some beautiful high end stuff on there but also some dreck. Also, they’re completely fine offering web font licenses to any typeface (with the designer’s permission of course) even if the typeface was not originally intended for web font use. Some fonts are offered as a perpetual license (which means you pay more up front but aren’t charged annually) and some are offered in a semi-subscriptiony way where you pay for page-views and have to re-up once you hit your limit. I know from personal experience that their self-hosted method is not the easiest to implement.
-
Google Web Fonts
I’ve said some disparaging things about Google Fonts in the past, mostly because I think type designers already have a hard enough time getting paid so their “everything is free forever” model bothers me. Don’t start with the whole “the internet should be a place for a free exchange of ideas” line, and I know plenty of you guys think we should open-source everything ever, but type design is one of those professions that really does take a lifetime of experience to master and every typeface takes endless hours and sometimes years to create. The typefaces available through Google Fonts were made by type designers that were paid a one time flat fee for their work along with the promise of exposure to a large audience (and we all know how I feel about that incentive). Because of this fee structure, the fonts that are good often only come in one weight or aren’t available with an italic. All this said, it’s definitely one of the easiest services to implement on your site since there’s no need for a membership, login, or payment. I shake my fist at them for making something so easy to use that I have to dislike on principle.
-
Other Services 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.
Thinking Conceptually
Defining the Mood
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. 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 you’re only brainstorming why hold yourself back?
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 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.
Establishing Historical 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. 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.
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.
Pairing Typefaces
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.
Here are some tips for pairing typefaces:
-
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.
-
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’re feeling timid 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.
-
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 can be thought about in three parts:
-
The Skeleton
The “bones” 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:
-
Sibling
- Similar x-height
- Similar contrast
- Similar width
- Similar mood
- Similar style
-
Cousin
- Similar x-height
- Similar contrast
- Similar width
- Similar mood
- Similar style
-
Distant Relative
- Similar x-height
- Similar contrast
- Similar width
- Similar mood
- Similar style
A sibling relationship example would be a sans-serif 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.
-
-
Don’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!