The beginner’s guide to the world of typography
Ever since Gutenberg put together metal types by hand, typography had been something seldom dealt with by people without a professional background. That has changed though with the dawn of the digital age. Today everyone has at least some degree of knowledge about typefaces — it can be something as simple as choosing font for work document in accordance with company guidelines or just making fun of Comic Sans — but it doesn’t change the fact that typography is still a subtle art that requires years of experience to be fully grasped. This article is meant to be a comprehensive introduction into the fascinating world of letters.
Is it a font or is it a typeface?
Typography as a field of knowledge has its terminology, one should pick up in order to avoid confusion at some points. One of the most popular mistakes is calling a typeface a font, those are not the same. A typeface is like a song, whereas a font is its digital form, something like an MP3. To be honest though, if you are not a huge typography nerd, it’s so common that you can use those two terms interchangeably without feeling bad — what’s important is to be aware of such quirks.
Does the choice of a typeface really matter?
Well, yes. Picking an appropriate typeface is often compared to choosing an outfit for an event. You wouldn’t wear a tuxedo to an informal meeting or a swimsuit to a funeral. Your choice of a typeface impacts the whole experience of your design, so pick carefully.
Typography is one of the most effective vessels for the brand’s voice. Many of the biggest companies invest in their own, custom-made typefaces. What they want to achieve is the creation of visual language, where a viewer doesn’t necessarily have to see the logo to be able to recognize the brand behind the message.
Your choice of typeface is as important as what you do with it.
Bonnie Siegler
Picking a typeface
When choosing a typeface you have to take into account a couple of factors. Probably the most important issue to consider is the context of a project. Think about the purpose of your design and what sort of message does this brand try to present. Who will be the audience of your work, does your choice sell well to these people? What are the environments your designs will function in, where will it be used on (small screens, huge billboards, etc.)? It has to be easily readable in all scenarios.
Try to avoid picking a font family purely on intuition, most typefaces are designed for a specific purpose. Learn the difference between all types of typefaces. For example, use body typefaces for body text (like a book text or a magazine text). A lot of websites with fonts have those types conveniently grouped into categories, pay attention to it when browsing.
Check if the typeface you have chosen is legible and easily readable when applied in your project. Legibility describes how a person reading can identify single characters, whereas readability is more about general comfort of reading, whether or not it’s easy to quickly digest blocks of text.
Particularly when deciding on using only one font family in your design pay attention to how versatile it is. It is especially relevant for text-heavy projects. Picking a typeface that has plenty of weights (light, bold, etc.) and styles (narrow, extended, etc.) will enable you to create consistency and a clear visual hierarchy.
The types of types
There is more than one way to categorize typefaces, and some typefaces can fit more than one box. For the sake of this article though, I will use probably the most common approach. Four categories, that differ both in their function and appearance: serif, sans-serif, script and decorative.
Serif typefaces, also called “roman” by some typography sources, are generally are associated with seriousness and traditionalism. Thanks to the serifs eyes follow the text with more ease, so they are traditionally preferred for longer bodies of text. This is true especially for printed materials, although lots of text-heavy websites, like guardian.com or medium.com, use them as well. Serif typefaces can be put into four subcategories, in order of first historical appearance: old style, transitional, modern (or Didone) and slab serif.
Sans-serif typefaces are generally perceived as more modern and trendy, and have an array of uses, from logos to interface typography. Many designers prefer using sans-serif, as the serifs don’t display well on lower-resolution screens, although this really depends on the specific typeface, whether it’s optimized for screen use. It used to be more of an issue in the earlier days of the digital age when the screens had way lower resolution. Sans-serif can be put into three subcategories: grotesque (often split into grotesque and neo-grotesque), geometric and humanist.
Scripts are typefaces that emulate handwriting. Oftentimes you will find connecting letters in this category of typefaces. They come in a hefty variety of styles, ranging from elegant to casual and fun.
Decorative is the broadest category, any typeface meant to grab viewer’s attention can be described as such. This category is more about standing out rather than practicality, some of those typefaces come in truly bizarre forms. They generally don’t work well in bigger bodies of text as their emphasis is more on a specific purpose or effect.
The anatomy of letters and some rules to remember
In order to understand typography better, you might want to learn a bit of typographic terminology. You don’t really have to remember every single one of them if you don’t plan a career as a typographer, but at least be aware of their existence. Knowing these things will help you capture the characteristics of different typefaces based on their properties, which in turn will result in more deliberate design choices. Use the illustration below as a cheat sheet for the future.
When it comes to the typographic quality of a document, one of the most important things is the appearance of the body text, especially in text-heavy projects. There are some universal rules that usually when applied result in reader-friendly designs.
Optimal body text size in print is between 10 and 12 points, and between 15 and 25 pixels for the web. This is the average value, some typefaces appear larger or smaller, and so they might need some adjustment.
One of the values you will probably tinker with the most is leading or line spacing. This is the value for vertical space between lines of text. For most typefaces, 120–145% of the text size works the best.
Another issue worth remembering is the length of a text line. Most responsive websites do not deal with this subject properly, so that might be one of the ways to make your design stand out quality-wise. The optimal value for this should on average be between 45 and 90 characters per line.
Do they go well together?
There are no mathematical rules for combining typefaces, but there are good practices derived from years of experience of generations of designers. One thing you should avoid is over-doing it. Ask yourself if using more than one typeface comes with a real advantage in this project, maybe it’s better to use one font family that has a lot of weights and styles.
If you want to use multiple fonts, stick to two or three, using more might result in chaos and a feeling of clumsiness. Always consider the character of chosen fonts, are they serious or playful, modern or traditional, do they go well together or do they clash. To achieve consistency and clear visual hierarchy give each font a function so that it’s not decorative-only. Abstain from using typefaces that are too similar, definitely go for contrast, for example, combine serifs and sans-serifs.
Try to find typefaces that differ from each other but have shared quality, like a font family that has both serifs and sans-serifs. Sometimes it’s a good idea to use typefaces designed by the same person (oftentimes typographers have their unique aesthetic, feel free to take advantage of this fact).
Free vs paid
Oftentimes you will work on a project with a limited budget, that’s understandable. There are many decent typefaces free of charge, but this category comes with certain risks, two biggest being originality and quality. The best free typefaces are usually overly used, so if you want your designs to stand out you might want to consider a small investment. Using paid typefaces enables you to create amazing designs with the help of skills and expertise of expert designers for a lesser price than actually hiring one, freebie typefaces don’t guarantee high quality.
Another factor you need to take into account is licensing. When you download a typeface, you are not always granted total freedom to do everything you want with it. Always check what uses it’s licensed for (commercial, personal or educational).
Type is a beautiful group of letters, not a group of beautiful letters.
Matthew Carter
Practical example: how and why did we pick our new company typeface?
For years our main typeface was Futura paired with Roboto for bigger bodies of text. Although Futura is a classic and we are fond of it, we decided it was time for a change. We wanted to pick a single typeface that would work both as a display and paragraph text. The main issue with Futura is that even though it was developed with function in mind its geometric forms can be perceived as too expressive when compared with contemporary fonts, which was the reason behind using Roboto as a complementary typeface for longer arrays of text.
After trying out multiple designs we decided on using TT Commons. It is a sans-serif typeface that has a wide range of possible uses. It was originally designed as a logo and later on, it grew to become a new official corporate typeface of TypeType Foundry. Thanks to low contrast and lack of decorative details it works well as a paragraph text, while the fact that each glyph was designed as a separate entity makes it perfect for logo and headers.
Typography is a game of patience
Typography is a complicated art that cannot be learned overnight, you will need tenacity and an open mind. There are multiple rules that when followed help you achieve better results, but few of them are truly sacred, so once you feel confident in your skills feel free to experiment and try new things.
One thing that you should definitely do is never stop looking for inspirations and new knowledge. Here are some websites worth following, if you have your own favorite sources feel free to share them in the comments, I’ll be happy to check them.
