The DeepAdvantage Ultimate Guide To Fonts & Typography
THE IMPORTANCE OF TYPOGRAPHY
If you want to create a striking webpage, learn everything you can about typography. Font selection and placement convey information to the user about what they can expect to discover on the website. Some fonts personify playful, others are serious. You can say the same thing about brands. A primary job of a designer then is to employ fonts so that they strengthen a brand. One does not aim to choose good fonts. One seeks to choose the right fonts “for the job.”
BEAUTIFUL WEB TYPE
Chad Mazzola’s Beautiful Web Type displays tasteful usage of Google typefaces. We like
On the GENEALOGY of MORALS
for its instructive nature. Mazzola uses bold, font-size = 64 Open Sans. He uses all caps and bold letters for genealogy and morals. He places a bold, 20 pixel all-caps Open Sans “Friedrich Nietzsche” on the line break. The words “on”, “the” and “of” all use italicized Gentium Book Basic. The body text also uses Gentium Book Basic.
Double click any text in the article to see usage and common pairing statistics for the font in question.
Typography as Art
From one perspective, typography is practical. It serves the purpose of making words easier to read. The judicious use of headers can break up what would otherwise be monotonous reading. A writer can employ bold letters for emphasis. A thoughtful font choice creates dynamism between the writing’s subject and that font.
If you want to understand good typography, look at bad typography. Good typography does the reverse of all those things bad typography does wrong. Bad typography loses readers. Good typography helps to sustain the attention of your reader.
Typography joins those hundreds of other things that are part art, part science. In the face of so much of it, to say something is part art, part science seems quite meaningless. These days, what can’t one make into art? Maybe there is something more profound here, though. Art has become so analyzed that one can say there is a science of art. In turn, there’s an art to doing science.
What’s all this mumbo jumbo about? Like the header said, “typography as art.” A good place to start is at Crisp Me’s Typography Page. Crisp Me is a blog created to inspire artists. Inspiration ahead:
One of our favorite typographical artworks is the striking After 10pm by Tariq Yosef Shishani.
We are inspired by Type Inspire. Are you.
Typethos: Thoughts on type
Bill Dawson created Typethos, a project in which he shared quotes solicited from typographers, designers, type educators, and others with a passion for typography. The quotes contain many lessons on typography covering the nature of type, type design, career advice and a good amount of humor. Each quote is on a square in a font chosen by the typographer. Typethos has many hundreds of mini-lessons on typography
Here are a few examples:
Typeface vs. Font
In the pre-digital age, a foundry sold fonts. The foundry might cast a complete set of 14 point Times Roman castings, for example. The foundry sold you a font, which was in the style of a particular typeface but at a chosen size and weight. The spread of word processing programs made it as easy for a company to sell an entire typeface as it was a font. Suddenly, there was a lack of clarity about when a typeface became a font. The software companies started referring to the typeface as a font. Now a few generations of users have followed suit. While it’s still “academically accurate” to call a particular typeface a font, the two words have become interchangeable. People use the word font more frequently than typography, about thirty times as often if the number of Google searches are an indication.
If you’re going to read about typography, it is a good idea to understand the distinction, though. Many books and articles on the subject will assume the traditional language. A typeface is the complete set of letters, numbers and punctuation marks that share a common design. A typographer creates a typeface. “Arial” is a typeface. A font is a subset of a typeface, a distinct style of a typeface with a particular width, size and weight. Arial 12 Point is a font. One typographer, Erik Spiekerman, said that “You design a typeface, you make a font.”
TYPOGRAPHY CRASH COURSE
To get started learning about fonts, we recommend reading Butterick’s Typography in Ten Minutes. If you don’t have ten minutes to spare, we’ll give you the three-minute version.
- Choose your body text first.
- Most web pages use fonts that are too small. Choose one with a size between 15 and 25 pixels. When creating a document for print, use a font that is between 10 and 12 pixels.
- Use a line spacing that is 120 to 145% of the point size. In CSS, use line height.
- Line length should be 45 to 90 characters (2 to 3 lowercase alphabets). Example:
That’s two alphabets (52 letters) plus another 19 from A to S. That’s 71 characters total.
- The most visible improvement you can make is to buy professional fonts. You can still make good typography with system fonts if you choose them wisely. No TIMES NEW ROMAN or Arial.
TYPOGRAPHY RULES & GUIDELINES
Butterick moved on to his 26 key rules from there. You can find these suggestions in Butterick’s Summary of Key Rules.
The Elements of Typographic Style Applied to the Web is an internet version of Robert Bringhurst’s classic book of the same title. The blog ILoveTypography.com has an excellent article that tackles the basics of web typography. The article, A Guide to Web Typography, takes the point of view that good typography is a four ingredient recipe. Those ingredients being contrast, size, hierarchy, and space. There are plenty of other treasures at that site. Take your time and explore.
CHOOSING A TYPEFACE
How to Choose a Typeface is a great place to start to learn what to consider when choosing the right font face. The author asks you to have a clear goal. With that in mind, consider the intended reason a typographer had in mind when creating a given font. We are then asked to think about the mood that we want to create.
More Free Fonts Than You Can Shake a Stylus At
When I wrote this article, the following fonts were free for commercial use. Always read the most recent licensing agreement before using a font.
HOW TO ANALYZE FONTS
Serif, Sans-Serif, and All That Jazz
Having a system for classifying fonts is useful. A classification scheme is a structure that helps us to think and communicate about a subject. A font classification system is useful for comparing and contrasting fonts. It can also help us to choose document hierarchies. Of course, it also aids communication. Typographers have proposed many different methods of typeface classification have over the years. These systems have categories and subcategories and sometimes the subcategories have sub-subcategories. Choosing a “just-right” number of subcategories is the tricky part.
A system with too few categories captures too little of the variation that exists between fonts. Too many categories and your system looks like a jumbled tree of typefaces. Branches beget branches that beget more branches yet.
The most accepted classification system is the Vox-ATypl font classification system. This method begins with three categories; Classical, Modern, and, Calligraphic. Divided among those three categories are 11 subcategories.
If you’re interested in further discussion of classification systems, check out Joseph Alessio’s excellent two-part article Making Sense of Type Classifications. Allesio’s articles cover serif and sans-serif fonts with fascinating digressions into their history. Here is a brief description of how to tell Serif from Sans Serif.
Allesio’s articles primarily cover serif and sans-serif fonts with fascinating digressions into their history. Here is a brief description of how to tell Serif from Sans Serif.
COMBINING TWO FONTS
I love looking for tasteful font pair combinations that I haven’t used before. Why would anyone want to combine fonts? A font pair is useful in creating a font hierarchy. You create a font hierarchy to signify that some elements are more important than others. You do this by varying the type, size, weight, and color of type. Why Every Design Needs Three Levels of Typographic Hierarchy advises on these elements and more.
One way to get started with combining fonts is to find a list of favorite pairs from a designer or typographer. You’ll quickly gain a list of go-to font combinations. Finding dozens of “favorite font combination” articles is easy. Here are a few of my favorites.
Lists of Font Combinations
Just my Type: TypeKit – 13 font pairs.
Just my Type: Hoefler & Company – More excellent font pairs though we have to disagree that “pairing typefaces is an art, not science.” It’s both.
Ten Useful Google Font Combinations – Google fonts are fast, free and easy to use.
Typographical Twins: 20 Perfect Font Pairings – 20 font pairs with about a paragraph of finer points, trivia, and history for each pair.
If you want to take a step toward deepening your knowledge, you might try a searchable collection of font combinations. Typ.io’s “Fonts that Go Together” showcases pairing decisions made by designers. The site demonstrates each font pairing by showing their use in website design.
Fonts in the Wild
There are a wide range of tools for combining fonts. Here are some that we use quite often.
Tools for Combining Fonts
Type Genius. This one is as straightforward as they come. Choose a font and receive one or more fonts that pair well with that font.
The Web Font Combinator. Use the example text or write your own. You can choose any page element, for example heading 1 or the body text, and vary the font, size, and line height.
Web Font Blender. Choose a title, headline and body to see how they looks together.
Font Pair . The Web Font Combinator is a no-nonsense tool for combining Google fonts. It’s so simple to use; you could call this a directory of font pairings. You can edit the text or headings if you’d like to see a combination in your words.
So you’re ready to pair fonts?
Font Pairing Rules
The Goal: Create a Hierarchy of fonts
The goal in pairing fonts is to create a hierarchy of fonts. Typically, a designer chooses one typeface for the title and headers and another for the body. The title and headers are usually each in a different font.
You can base a hierarchy on:
- Weight (a value between 100 and 900. 400 is normal, 700 is bold.)
Understanding when and where designers created fonts and for what reasons is invaluable. Read the history of various fonts and it will improve your skill in choosing them.
A Typographer creates each typeface for a reason, often to invoke a particular mood. Choosing fonts that combine to convey the right mood is the most important choice one will make when selecting font pairs. As an example, legal documents tend to use conservative font choices. Times New Roman 14 seems to be the default font of selection of the legal profession. Early in this paper, I recommended Butterick’s Practical Typography. “Butterick” is Matthew Butterick, a designer turned attorney. So many “ugly” documents crossed his desk that he decided to start a blog to teach typography to attorneys. This continual parade of ugly papers inspired Butterick to create an online book called Typography for Lawyers. The Utah Supreme Court provides an example of good typography versus poor typography. legal document before Butterick. Here is the post-Butterick version. Before and After is effective on more than just weight-loss products.
A few more examples will be useful in demonstrating how font choice can create a mood. These fonts convey a mood for people that have seen them before and make the same mental associations.
Bangers was typical of fonts you would see in comic books or horror movie posters in the 1950’s.
Orbitron. This was what 2015 looked like in 1983. “Shall we play a game?”
The previous two fonts were licensed under Creative Commons TNR. That’s one of them there law-yer jokes. You got it, Times New Roman.
Contrast and Concordance
Create concordance by using just one font family . Change the size, weight and style to achieve hierarchy. To create contrast, mix fonts that are different but with a few key elements in common.
A good font pair will have both similar and contrasting qualities. It will not so many of either that it creates discord though. It takes experience to learn the right mixture of concordance and contrast.
One rule of thumb is to choose fonts that have similar letter proportions and letter forms.
If you choose to pair contrasting fonts, look for a few elements that the fonts have in common. Look for similar features such as the letter proportions, letter forms, and spacing.
When pairing fonts, compare the heights and widths of the individual letters. It is especially useful to make these comparisons for the letter “x.” Choose fonts with some of the following proportions: ascender and descender height, cap height and x-height. Thinking with Type, an exquisitely designed website has a map of labelled letter anatomy here.
An important technique for comparing fonts is to examine individual letter forms. By this, I mean comparing the shapes of the letters themselves. A useful mnemonic is “get faq” (Get Frequently Asked Questions.) You can use the typography comparison tool Tiff to compare a given set of letters between two Google fonts.
Spacing and Kerning
Creating a font with just the right spacing is difficult. In most fonts, there are some awkward letter combinations.
For some of them, the solution is kerning. Kerning is the process of adjusting the space between a pair of letters. Some letters look too close or far apart depending on how the shapes of the letters look when they meet. Serif letters should be close enough together for their serifs to be on a vertical line. Adjusting the kerning in titles and headers is typical. Such subtleties are much more noticeable there.
In many fonts, A and V need to have the space between them adjusted. The top of the V is over the bottom of the A. Each of them will look excellent when paired with other letters, but when they are next to each other, they look too open. You adjust their Kerning by changing their position until all letters look the same distance from each other.
You should also choose a few qualities to contrast. Look for a contrast in style, size, and weight. A classic example of contrasting styles, for instance, is a Serif Header and Sans Serif body text.
Articles on Pairing Fonts
These articles explain how to combine font pairs.
A Beginner’s Guide to Combining Multiple Fonts is as promised. If you’ve never read an article on how to combine fonts, start here,
How to Combine Typefaces is a short but useful article on the factors that are important for combining typefaces.
Best Practices of Combining Typefaces makes for a good 1-2 punch with the last article. They are both short articles but still manage to teach quite a bit.
29 Principles for Making Great Font Combinations This is a list of practical advice on combining fonts from a web designer with more than two decades of experience.
Font Flavors, while not a large site, has some in-depth analysis of a few fonts and font combinations. Strongly recommended.
Choosing a Second Font – What to do after you’ve picked that first “just right” font.
Font Forge – Design or edit your own fonts with this open-source software.
Font Dragr – Test fonts with Font Dragr. Just drag and drop this bookmarklet onto any webpage and see it with your font choice.
Font Combination Tools
These simple-to-use font tools are a great place to start. No experience necessary.
This “game” is a series of choices based on themes such as a font’s history and your pairing strategy. In the end, your choices lead to a font pair. Our first time through brought us to ITT Century and Futura.
Type Connection explains why this pairing works:
“In the battle of moderns, ITC Century and Futura juxtapose ornament and sleek lines. Century’s buoyant intricacies highlight Futura’s elemental purities, while Futura’s limitless ascenders emphasize Century’s predominant x-height. Their lowercase letters and uppercase G couldn’t be more different from each other, so their vertical axis and roundness introduce cohesion. With the right difference in scale, either face could steal the stage.” Now, that’s a nice bit of writing. It left me wanting some whiskey.
IDENTIFYING, COMPARING AND CONTRASTING FONTS
First Steps toward developing your personal style
There is wisdom in first reading the existing literature when learning a new subject. One can learn a lot by reading the analysis of others. If you want to do something no one has done before, though, you have get off the well-worn path. You have to analyze things yourself. A biologist once told me that if you want to understand a creature’s behavior, study it in its natural habitat. It’s difficult to go anywhere without spying the wild font.
Fonts live on websites, in magazines, on food containers and in junk mail. Studying fonts can be an all day experience. If you run across a font you like when first beginning, you may spend considerable time figuring out its name. Fortunately, there are tools to help.
To quickly identify web fonts, you can use the “What font?” extension. “What font” is a browser extension that you can get for Chrome, Safari or Internet Explorer. The extension allows you to click on any font and identify its family, size, and height. When you click on a letter, “What font” will leave a card in that place with that information on it. You can put cards on all the headers and body and then study the designer’s choices of headers and fonts.
For those harder to identify situations, you might try Font Squirrel’s Matcherator tool. You upload an image and then the software presents you with a list of best matches. We uploaded four Google fonts. On two of the four fonts, the first choice was the correct match. On one of the other two fonts, Matcherator included it as the fourth option (the three above it were close matches). Matcherator did not identify the fourth option. What about fonts that you see that aren’t on the web? We used a cell phone camera to photograph a few fonts. We then uploaded them to Matcherator. Matcherator did an excellent job of showing either the correct type or one that was a close match.
For comparing and contrasting fonts, there aren’t many sites as useful as Identifont. Use Identifont’s “Fonts by Similarity” feature to find the fonts most similar to a given font. Identifont’s tools page sports eight tools. Our favorite is the Identifont Differences tool. Differences will display the symbols from any two fonts side-by-side with their differences. The Identifont tool is an excellent way to compare fonts. Try noting the differences yourself first before revealing the answers. In the graphic that follows you can see that Bodoni has a closed four while Didot has an open four. The capital W in Didot has three terminals in Didot and four in Bodoni. Make sure to look at the actual listed characters. The examples used in the icons are for illustrative purposes only.
DEVELOPING YOUR OWN STYLE
I’ve been a musician for 30 years. A few years after I began playing, I learned a method for creating a unique style and sound. That method is also useful for developing a personal style for typography. In music, the method is to play a melody using a scale of your choice over a chord or group of chords. When what you’re playing reminds you of something, you memorize that association. A particular combination might make you think of summer, for example. Another one might make you think of Persia. When writing music or improvising, you use these associations to create a chosen mood.
The analogous method with fonts is to create a fonts notebook. You can organize this notebook any way that you wish. You could create opposing pairs such as masculine vs. feminine or serious vs. fun. Find fonts you like – or maybe even fonts you dislike – and label them any way you want.
There’s a free website, My Font Book, that makes it easy to do just that. The site displays all the fonts installed on your computer. There are no downloads necessary. It works right in your browser. You can rate fonts, create tags and apply them to whichever fonts you wish.
I keep a digital notebook with fonts. I screenshot any fonts or font combinations that I want to include or on which I want to comment.
You could do the same. You can use formal categories if that’s your style. Or maybe you prefer whimsical labels. Label such as “Legal, Romantic, Futuristic, Flowery, Chop Suey or Strawberry Pie.” Label them any way you want. It’s your notebook. Will you name your notebook? I call mine “fontalicious”.
Inspiration Grid is a website that has links to thousands of inspirational articles. The site covers topics such as branding, photography, videos, logos and typography. Typography Inspiration, the typography section has more than 350 articles on creative typography.
THE TYPEFACE BEHIND A 100 YEAR OLD MYSTERY
This is an intermission of sorts. It rightly belongs next to the section on finding inspiration. Just over one hundred years ago, one of two business partners decided to slowly start throwing metal type into London’s famed Thames River. He was committing a crime by doing so. The partners used the type to create beautiful books that were elegantly styled. It is best that you read the entire story itself. You can find it at The Gorgeous Typeface that Drove Men Mad and Sparked a 100-Year Mystery . The font is exquisite, maybe the mosty beautiful I have seen. Here is an excerpt.
The Doves Press Type PDF has some samples of this type.
FONTS FOR YOUR TITLES AND HEADINGS
65 Free Fonts for Beautiful Headlines and Titles – 65 “distinctive, easy-to-read” fronts that are great for headlines and titles. I hope the next time I read the words “Hello, world!” they are in Bariol.
CREATING A TYPOGRAPHY PALETTE
Four Techniques for Combining Fonts – Some elegant stylings in this article on how to combine more than two fonts at a time.
If you’ve ever wondered if there is an easy way to see all the fonts installed on your computer, you’ll want to check out Wordmark.
Font Comparison Tools
Font Comparer. The Font Comparer allows you to type in text for the H1 and P elements and see both of them for many Google fonts.
Type Tester. Type Tester lets you compare three different fonts in three different columns. Choose from among Web Safe fonts, Google fonts, Adobe Edge web fonts and Typekit fonts. You can scroll through Regular, Italic, Bold and nine other size-weight combinations.
Other Incredible Font Tools
Google Fonts Analytics. Google fonts analytics allows you to see the number of total views for each font the past seven days, 30 days, 90 days and one year.
Fonts In Use. An Archive of almost 5,000 fonts or font combinations in use.
Google Web Fonts Typographic Project. Hand-Picked tales from Aesop’s Fables with Hand-Picked type from Google Fonts. The designer places the fonts over a diverse set of backgrounds.
TypeKit Practice – Lessons to improve your typography skills.
TypeCast – A free web design tool that comes with permission to use more than 3,000 fonts from their font library on live websites. Refine your designs and then output the CSS and HTML to install or give to your developer.
Helvetica – the most celebrated documentary on a typeface in history. Come to think of it. It is probably the only one that you might hear of before learning what kerning is.
The History of Typography in 5 minutes and 9 seconds, 291 paper letters and 2,454 photographs. This video has reached nearly one million viewers.
Make It Better – A brilliant 1 minute and 11 seconds showing examples of how you can make it better.
Typecast Blog – We love big rectangular thumbnails almost as much as we love typography.
I Love Typography – This blog is approaching its ten year anniversary. Packed with some of the most detailed info on typography and its history on the web.
Web Typography Overview – A detailed outline and notes on web typography.
The Elements of Typographic Style Applied to the Web. A practical guide to web typography. Inspired by Robert Brinhursts’ classic The Elements of Typographic Style
The Website Font Swapper – Enter a URL, choose a header and body to see how the site would look with a different font set.
WEBSITES ABOUT TYPOGRAPHY
A Shared Encylopedia of Typefaces. The Wikipedia of typography.
The Kerning Game – How good is your kerning game?
What’s your type? The 5- Step Guide to Finding the Right Font.
The 100 Best Free Fonts – A beautiful selection of fonts.. Though they are not all free for commercial use, most are.
Web Design is 95% Typography – a great article with beautiful typography and a list of Typography Resources.
The Golden Ratio’s Role in Typography – Man, that Golden Ratio pops up everywhere. I wonder what Fibonacci would think?
Google has been trying to create the perfect font. Here are their thoughts.
Combining Typefaces by Tim Brown. This self-described pocketbook is 53 pages long. Until recently, you had to purchase this book. The site that was selling it went out of business, however, and the author made it available for free. Some early advice in the book is to first find your body text, also known as the anchor text. According to Brown, “One typeface will anchor the others. It’ll help set the underlying tone of your experience and act as a reference point for every element in your composition”. The most interesting advice Brown gives is to let emotion guide you when you choose an anchor typeface. He gives examples in which one can learn to find emotion in a typeface.
As a musician of many years, this rings true. In music, there are combinations of notes called modes. People learn them in many ways – mostly by rote or understanding the patterns. True understanding though comes from learning to associate the modes with experience. You associate each mode with specific moods and experiences. Then when you are playing, you can share the feeling of that mood at will. A personal example will explain much. The mode of Mixolydian reminds me of a summer morning with the smell of freshly mowed grass in the air. When playing over a chord progression, I am reminded of that smell and decide to play in Mixolydian.
The Anatomy of Type by Alan Coles – A guide to 100 typefaces. You’ll learn something interesting about typography on every page. There is a website for the book and its companion, The Geometry of Type
Pro Web Type – A free, online books on web typography
RESEARCH QUESTIONS FOR FURTHER STUDY
When learning a new topic, it helps to ask good questions and then go looking for the answer. What is a good question? I’d say, “anything you find interesting.” Here are some questions I hope you find intriguing. Good luck with the research.1
- What effect do fonts have on Click-through-ratios?
- What effect do fonts have on signups?
- Do fonts have an effect on getting people to sign up for an email newsletter?
- How do men and women differ in the effect fonts have on them?
- Are there age-related differences in how people are influenced by fonts?
- How does color play into combinations of fonts?
- What is the science of font selection? How much academic work has been done on the subject?
- What effect do fonts play on the believability of the author? See
Article with relevance to question #8. The Typography of Authority — Do Fonts Affect How People Accept Information?