Typography is basically the way we arrange type to make it readable and legible. But underneath it’s much more than this. Communication is the root of civilization. We went from inventing sounds, languages to letters and arranging them into alphabets. With the pandemic, communication has been more important than ever. As not everything can be zoom calls, we need to learn to translate our thoughts and intentions in a better way.

So, why is typography important? Whether you’re a designer, developer, project manager or anything else, you need to communicate in the best way possible; and this includes your type choice. So allow me to nerd out about the importance of your choosing and mixing your fonts in the right way.


Classification

Serif

Serif typefaces are the most enduring category (it’s been around for a long time). Ever heard of Times New Roman? Well, that's a serif type we’re all familiar with. The serif is the small extra stroke found at the end of the main vertical and horizontal strokes of the letters. These fonts can be grouped into subcategories based on the time period in which the style was originally created: old style, modern, transitional and slab.

When should I use it?

  • When you need to establish authority
  • When you want evoke quality, class and elegance
  • On display text (Headlines and titles)

How to pair it?

  • Impossible to go wrong: Serif Title + Sans Serif Body Text

  • Using a regular Serif and highlighting key words using an italic serif

  • The safe way: Serif+Serif

Editors font pick: Baskerville is a free font available at google fonts.

Disclaimer:  I don’t recommend trying to light grapes on fire in the microwave.

Sans Serif

Typeface without serifs is called a sans serif typeface, from the French word “sans” that means "without." Sans serif styles can have letters that are thick or thin, short or tall, fat or condensed. Ever heard of the most cliché font among designers, Helvetica? Well, that’s it. now you know a perfect example of a sans serif font.

When should I use it?

  • When using small body copy sizes
  • When feeling casual, informal, friendly, and/or approachable
  • When giving the sense of simplicity and the feeling of being modern

How to pair it?

  • Impossible to go wrong: bold sans serif + regular sans serif

  • The new classy: A bold sans serif + italic serif

  • Feeling trendy? Try an extended + regular sans serif


Editors font pick: Poppins is a free font available at google fonts.

Disclaimer: Beware of cows

Scripts

Scripts are a tricky one in the family; mainly made to evoke different emotions with users. Most script typefaces can be identified by the curve of letterforms and connecting strokes, which imitate cursive handwriting. For example, elegant and embellished wedding invitation fonts, antique love letters, etc.

These fonts, as beautiful as they may seem, can often be difficult to read, so it’s recommended not to use them in large blocks of texts.

How to use it?

  • Short phrases. Nothing longer than a few words
  • Focus on readability
  • Avoid use of all caps
  • Avoid using more than one script font

How to pair it?

  • In a dramatic display with no more than a few words

  • To highlight a name next to a light and simple sans serif

  • To highlight a single word in the middle of a sentence


Editors font pick: Monsieur is a free font available at google fonts.

Disclaimer: Please don’t steal the brains of dead or alive people.

Decorative

Decorative fonts are the free spirit child of the family. Typefaces that do not fit in other categories are decorative in nature. Like the script types, these are rarely used in large blocks of texts. These types usually break the rules of proportion, kerning and other terms I’ll probably explain in a future post. Because the way this one is going, I’ll probably make a part 2, maybe 3 of this topic. Anyway, they’re usually undefined typefaces; very modern and playful.

How to use it?

  • Short phrases, but not for anything more than a few words
  • Focus on readability
  • Avoid using more than one decorative font
  • In wordmarks
  • With a simple sans serif typeface
  • As a non informative text

Editors font pick: Traveller two is a free font available at befonts

Disclaimer: Not a disclaimer but we all love spaghetti right?

Best Practices

  • Make sure your font choice is readable.
  • Make sure your font choice is readable.
  • Make sure your font choice is readable.
  • Avoid deforming or stretching the fonts.
  • Contrast fonts weights. A good example is a bold display with a regular body text.
  • Make sure your typeface choice matches your message and audience
  • Limit your fonts. Less is more, is a good way to go; it's using different weights of the same font family.
  • Practice correct alignment (dude, I could make a whole single article about this. Like and subscribe and I’ll do it. Ok no, just tell me) but a safe way to go is keeping the alignment to the left. Especially if you have big text blocks.

I hope this quick guide helps you to improve your communication. And don't forget to make sure your font choice is readable, not sure If I mentioned this before.