Typography 101: Complete Guide to Choosing One

Useful yet underappreciated, typography is one of the most crucial and rewarding design elements. It is commonly defined as the art of arranging letters and characters, but typography is much more than that. Letters, numbers, and symbols are just one part.

The right typography has the power to strengthen a brand, make your product more interesting, and highlight the brand’s message.

Typography, Font, and Typeface

Typography involves arranging letters to make them look readable and visually appealing. It also deals with the study and classification of different typefaces. Therefore, typography refers to the task of creating fonts and not the font itself. Nowadays, “typography” is increasingly used as a synonym for “font.”

The font is the specific form (style, weight, and size) of the typeface, like Calibri, bold, size 11. In other words, a font is the style or appearance of a complete set of characters guided by common characteristics.

The typeface family is the group of fonts that share the same spirit, such as Garamond, Times, or Arial.

Basic Concepts

Now let’s quickly review some basic concepts related to typography that you should be familiar with before continuing with this article (of course, there are many more terms than these, but this is a good foundation for getting acquainted):

X-height

This measurement is the height of lowercase letters that rest on the baseline without considering ascenders or descenders, marked by the size of the letter “x,” hence its name.

Baseline

The baseline is the imaginary line on which letters and other characters rest.

Stem

The main stroke of the letter that defines its essential shape. Without it, the letter would not exist.

Ascender

The part of the letter that extends above the x-height.

Descender

The part of the letter that falls below the baseline.

Crossbar or Bar

A horizontal line between verticals, diagonals, or curves.

Arm

A horizontal or diagonal stroke that extends from a vertical stem.

Serif

The terminal stroke of a stem, arm, or tail. It is an ornamental finish that is not essential for defining the character, as there are alphabets that lack them (sans serif).

Leading

It is the vertical space between lines of text and is measured from the baselines of each line.

Kerning

Kerning is the space between two characters, the horizontal distance that can be manually adjusted to add or remove space between two letters.

Tracking

We should not confuse it with kerning; tracking also affects the space between letters but in a complete section, an entire word, or a full paragraph, unlike kerning which does so between two consecutive characters.

Typographic Classification

There are 4 major groups of typography considering their shape (we can also find subgroups that we will not cover in this article):

Serif Typefaces (Roman)

These classic and original fonts are known as serif due to the small finishes or terminals at the top and bottom of the characters.

They are considered serious and traditional, with an academic and institutional air.

They are mainly used in print and sometimes in online content for short titles as well as for long content pages. This is because serifs create an imaginary line at the base that makes reading easier for the eye.

Serifs began to be used in the 15th century and have since been ruling the font kingdom.

Sans Serif Typefaces

Sans serif is the modern version of serif typefaces. Its name refers to the absence of the characteristic serif finish (sans means “without” in French). They were created in the late 18th – mid-19th century. Their strokes have little contrast, meaning they have almost the same thickness throughout the character.

These fonts are considered clean, modern, safe, neutral, and minimalist. Perfect for large-sized text. Sans serif is an ideal choice for on-screen paragraphs, as well as for logos, headlines, and small-sized text.

Script Typefaces (Cursive)

These cursive fonts based on handwriting are known for the accessible and friendly feeling they emit. Many brands have cursive fonts in their logos, like Harrods and Paul Smith, aiming to convey authenticity, having a logo based on the founder’s signature. Other famous examples of script-based typographic logos are Coca-Cola and Pinterest.

Script typefaces were first used in the 17th and 18th centuries. Their swashes (upper curls and flourishes) make the writings stand out from other fonts.

Decorative or Display Typefaces

This is the largest category of typefaces and tends to be the general category, as it usually contains all those typefaces that do not fit into the previous classification, and at the same time, it can contain others with serif, sans, or script characteristics. It is very common for these types of fonts to be created specifically for particular projects, such as a logo.

They are considered fun, casual, but they can convey all kinds of sensations. They have a lot of personality and are bold and eye-catching, which can contribute to poor readability.

They are the right choice for book covers, logo designs, and posters, as they add a creative and unique touch to the overall design. But beware because they can also convey a lack of care or neglect in the design. So, think carefully before using this type of typography. However, their use in paragraphs is definitely not recommended.

How to Choose a Good Typography

The typeface you choose for your next design could make it a success or a total failure, no pressure!

But with so many options… where do I start? What is the perfect typography I should choose? There is no right or wrong answer to this question. However, there are some guidelines that will help you make an informed decision and ensure that, at the very least, it won’t be a complete disaster.

Connect with the Project’s Feelings

Typography can convey different feelings and emotions, and by this, I don’t mean that a typeface will make you cry or laugh until your stomach hurts. I’m talking about matching what the type conveys with what the project conveys. Is it fun? Casual? Serious? Fresh? Old-fashioned? Choose a typeface that captures that feeling; otherwise, you will create a sense of disconnection and distrust in the viewer.

Be Careful Using Unusual Fonts

Display or decorative typefaces should be used sparingly, as I have previously pointed out. Unless you don’t care about readability, these types of fonts are not suitable for large blocks of text. They are designed to be used in titles or short lines of text and are used to emphasize.

With measured use, they can add a lot to your design, but excessive use can ruin all the work.

Effectively Combine Typefaces

There is a principle that can make this choice much easier: contrast.

You can achieve contrast in two ways. Either by sticking to a single typeface and playing with the weights and styles of that same typeface family (“Arial Narrow” with “Arial Black,” for example) or by choosing two typefaces that are very different: a sans serif with a serif, a sans with a script… If you do this, it is important to pay attention to the contrast between the typefaces you choose. Make sure the contrast between them is large enough to differentiate them well. If the typefaces are too similar, it will look more like a careless mistake than a conscious design choice.

Limit the Number of Fonts You Use in Your Project

More is not necessarily better when it comes to typefaces. Generally, it is recommended to use one or two fonts, and in some particular cases, up to three. On the other hand, if your project requires a messy and chaotic appearance, perhaps using multiple typefaces is the perfect solution.

Choose a Typeface Family That Has the Characters You Need

Some typefaces are only in uppercase, others do not include numbers, multiple weights, accents, or special symbols.

If you are choosing typography for a magazine article, you will likely need a typeface that includes all these things. If, on the other hand, you only want a typeface for a title, you might be able to do without some of those characters.

Remember, It Has to Be Legible

Some fonts are easier to read in certain situations than others. For example, a billboard or other outdoor signage set in script will be difficult to read, not to mention impossible for drivers. In this case, a clean and bold typeface would greatly enhance readability. If you are designing a book, readability is a must! Fortunately, there are fonts specifically designed for books. The most popular are “Garamond,” “Minion,” “Caslon,” “Janson,” and “Bembo.” Other typefaces, like “Times New Roman,” were designed for newspapers. That doesn’t mean you can’t use these typefaces for other projects, of course.

Stick to “Web Safe” Fonts for Web Use

Are you working on a web project? Make sure the fonts you use on your computer are also available for web use. Unless you are using web fonts (font files hosted on a web server, implemented via the CSS @font-face rule), a user’s browser may display a different font than the one you want.

If you are not using web fonts, you will need to rely on system fonts (i.e., fonts that are available by default on a computer). Common system fonts include:

Arial

Courier

Garamond

Georgia

…

Be Careful with Dark Backgrounds

Since most typefaces were designed to be printed with black ink on a light background, you should be careful when choosing a typeface that will go on a dark background. Thin characters or those with thin serifs will get lost against a dark background. If the design is to be printed on paper or another absorbent material, the dark area is likely to bleed into the lighter text, further diminishing readability. Choose a typeface that is bolder and larger to ensure clarity, and the less decorative, the better.

Break the Rules

That’s right, follow your instinct! Why? There are exceptions to every guideline I’ve mentioned. This is one of the things that make graphic design interesting. Typography is something that is learned over time and requires countless trials and errors. Eventually, it becomes an easy and natural process. In the meantime, have fun!