Lesson 1: Design Principles

Typography

What is Typography?

You could spend years studying typography, but let’s start with the basics.

We’ll begin with some terms:

Source: CareerFoundry

When you hear the word “font”, you might think of Arial, Helvetica, or Times New Roman. While this may be right; they’re only half-right. Let’s look at the definitions of the terms above.

Typeface: A typeface is a set of design characteristics that make the type itself. Arial, Helvetica, Times New Roman–these are typefaces.

Font: A font is actually more specific/descriptive than just the typeface – a font describes the typeface AND the weight or style of the typeface being used. For example, if you look at the image above, you’ll see that Helvetica is actually a typeface that has a family of fonts – all of which range in weight from thin to thick, or from Regular to Bold.

Font Weight: The thickness of the font.

Now let’s look at 2 common classifications of typefaces:

Source: New England Repro Graphics

Serif: A serif typeface is something like Times New Roman or Georgia. These fonts have those little pointy things at their ends called serifs.

Sans-Serif: A sans-serif typeface is a font without serifs, so something like Arial or Century Gothic.

Source: SJO

Here are some other typeface classifications:

Source: Pimp My Type

Tips for Better Typography

1. Select typefaces that reflect the tone/feeling you are going for.

For example, serif fonts are used frequently to evoke sophistication or elegance. You’ll often see serif fonts used by luxury brands like Tiffany & Co, or paired with script fonts on wedding invitations.

Source: Tiffany & Co

Source: Canva

On the other hand, sans-serif or slab-serif fonts are great for approachable and friendlier tones.

Source: Wall-to-Wall Studios

2. Select fonts that are easy to read.

Display or decorative typefaces may be great for headlines or enlarged, but don’t work so well for small paragraphs of text. Extremely thin fonts can also be hard to read. Find a font that is legible even in small sizes so that users don’t have to work too hard to make out the letters and read your content.

3. Pair fonts for visual interest.

Using different typefaces can help you add visual interest to your design and create distinctions between different types of content (like the headline from the main body of text). Try pairing a serif font with a sans-serif one, or find an already curated font pairing with a tool like fontpair. Just limit the number of typefaces you use to 2-3 to avoid creating a chaotic design.

Source: M. Aghassi Zulfikar (Dribbble)

Source: UX Planet

Learn more about font pairing here.

4. Space out your text to make it easier to read.

The line height (distance between lines of text) should be at least 125% of the font size.

Source: CareerFoundry

Keep the width of your text block at a comfortable reading size. The wider a block of text is, the more distance our eyes have to travel farther (from left to right) to read your content. Instead, constrain the width of the column so that our eyes have to travel less to get to the next line.

Source: Google Material Design

The numbers refer to the amount of characters in the line. These aren’t hard rules; just guidelines!