Updated date:

Typography Design Basics

typography-design-basics

Typography is everywhere. It has tremendous power to influence the message a person wants to get across to their audience. With the use of a good typography in conjunction with all other design elements, you can clearly express the piece of information you want to pass on. Typography establishes the overall tone and defines the design. It is more than just the looks of it. For example, if you want to spread a powerful message you need a bold, dynamic font. The font you use has a voice and a face. So, try to use it properly.

Font vs. Typeface

First of all, let’s clear the air regarding fonts and typefaces. I am fairly sure we’ve all been confused about what exactly is the difference between them. Well, let’s see.

The main difference between them is that a typeface is a font family—it refers to the name of the particular type of design. For example, typeface is Helvetica, Roboto, Open Sans, etc. A font is a particular size, weight, and style of a typeface. For example, font is Helvetica Italic Bold 12 pt., Roboto 16 pt., Open Sans Light 10 pt., etc.

When designing, the difference doesn’t really matter but it’s good to have the knowledge.

Common Types of Typefaces

Let’s take a look at the most common types of typefaces and what we need to know in order to get the best use out of them.

San Serif

We see them being used very often in user interface and that’s because they hold their legibility at smaller sizes. It’s the best choice for a mobile phone use and for the buttons of websites. You can recognize them easily. They are the ones that go straight and don’t have any curves. The most well-known san serif that gets used the most is Roboto.

Recommended for you

Here are some examples of San Serif typefaces (the typefaces in the photo are in the same size and style regular).

Here are some examples of San Serif typefaces (the typefaces in the photo are in the same size and style regular).

Serif

We usually use them when we want to throw attention to the text. They are the typefaces with small lines and curves at the end of letters that tend to go to the left side. In other words, the ones that they look more calligraphic.

Here are some examples of Serif typefaces (the typefaces in the photo are in the same size and style regular).

Here are some examples of Serif typefaces (the typefaces in the photo are in the same size and style regular).

Display/Decorative

We frequently use them for logos, headlines, and posters because they standout when seen in a bigger size. With their usage, you can establish a look and a name for your brand. You don’t really see them in a full text display because it tends to be really hard for the reader and very overwhelming.

Here are some examples of Display/Decorative typefaces (the typefaces in the photo are in the same size and style regular).

Here are some examples of Display/Decorative typefaces (the typefaces in the photo are in the same size and style regular).

Tips for the Best Usage

  • Never use more than three typefaces.
  • Pair serif fonts with san serif ones. Put your title in san serif and your main text in serif (or vice-versa) for a good contrast. Avoid using similar fonts. Sometimes you can’t tell the difference between them and the look of it seems boring.
  • When combining fonts that are in the same typeface family, use a different size or style to make the text more interesting, unique and different.

By understanding typography, you can express your work in endless ways. It’s a guide for making a beautiful work. Experiment with them and develop a style that best represents you and your work.

© 2021 Elisavet Vasilakou

Related Articles