Typography: How to Choose, Pair and Set Fonts | Free Graphic Design Course: From Beginner to Advanced

What you'll learn

Recognize the main type classifications and what each one conveys.
Pair fonts without clashing and build a typographic hierarchy.
Set size, line height, line length and letter spacing for comfortable reading.
Choose fonts whose licenses allow commercial use.
Redesign real text (a restaurant menu) using a type scale.

People say design is mostly typography, and it's not much of an exaggeration: almost every piece has text, and the shape of the letters says as much as the words. The same sentence can look serious, playful, luxurious or cheap depending on the typeface. And badly set text simply doesn't get read. In this lesson, which closes the Beginner level, you'll learn to handle type like a pro.

2 familiesare enough for almost any piece; often one family with several weights

45–75characters per line: the comfortable line length for long text

×1.4–1.6the recommended line height for paragraphs, relative to font size

Typeface, font and family

Type family: the complete design with all its variations (for example, Montserrat).
Styles or weights: Light, Regular, Medium, Bold, Black, italics…
Font: technically, one specific style of the family (Montserrat Bold), although in practice people use "font" and "typeface" interchangeably.

A family with many weights is extremely useful: it lets you build hierarchy with a single typeface.

The major type classifications

Classification	Features	Conveys	Common uses	Free examples
Serif	Small strokes (serifs) at the ends of letters	Tradition, authority, elegance, editorial voice	Books, newspapers, classic or luxury brands	Merriweather, Playfair Display, Lora
Sans serif	No serifs, clean strokes	Modernity, clarity, approachability	Interfaces, websites, signage, tech brands	Inter, Montserrat, Open Sans, Roboto
Slab serif	Thick, block-like serifs	Sturdiness, character, industrial or retro feel	Headlines, brands with personality	Roboto Slab, Arvo
Script	Imitates handwriting or calligraphy	Elegance, warmth, craft	Invitations, logos, accents	Great Vibes, Dancing Script
Display	Highly expressive shapes	Whatever its design suggests	Large headlines only	Bebas Neue, Lobster
Monospaced	Every character takes the same width	Technical, code, typewriter	Code, data, technical aesthetics	JetBrains Mono, Courier Prime

Script and display: never for paragraphs

Script and display faces have personality, but they tire the eye and become unreadable in long text or at small sizes. Use them for a few words at a generous size. And never set a word in all caps with a script typeface: the letters stop connecting and the word falls apart.

Pairing typefaces

Golden rule: two families are enough for nearly any piece, and one family with several weights often does the job. Pairings that tend to work:

Serif + sans serif

Serif for headings and sans serif for body text (or the other way around): the contrast of styles creates hierarchy.

Example: Playfair Display for headings + Lato for text.

Superfamily

A family with serif and sans versions designed to work together.

Example: IBM Plex Serif and IBM Plex Sans, both open source.

One family

A sans serif with strong weight contrast: Black for headings, Regular for text.

Example: Montserrat, designed by Julieta Ulanovsky and inspired by old signs in a Buenos Aires neighborhood.

Avoid pairing two typefaces that are similar but not identical (two geometric sans serifs, for instance): it looks like a mistake. A pairing should contrast clearly or be the same family.

1. Which pairing is the best choice for an informational brochure?

Four different typefaces to make it more dynamic.
A serif for headings and a readable sans serif for body text.
A script typeface for all the text.

Two families with clear contrast create hierarchy and keep things consistent; more families just add noise.

Typographic hierarchy

Define a scale of text styles and use it the same way every time. A scale based on a ratio (for example, multiplying each level by 1.25) gives you harmonious sizes. For the web, with a 16 px base size:

Level	Size	Weight	Use
H1	40 px	Bold	Main title, one per page
H2	31 px	Bold	Sections
H3	25 px	Semibold	Subsections
Lead	20 px	Regular	Intro paragraph, standfirst
Body	16 px	Regular	Paragraphs
Caption	13 px	Regular	Notes, credits, labels

(16 × 1.25 = 20; × 1.25 = 25; × 1.25 ≈ 31; × 1.25 ≈ 39, rounded to 40.) Besides size, you can create hierarchy with weight, color, letter-spaced capitals and the space around each element.

The scale from the table, drawn to proportion. Each level is about 1.25 times the one below (16 × 1.25 = 20; 20 × 1.25 = 25…): the difference is easy to see, but no level "jumps" abruptly.

Setting text that's easy to read

Setting	What it is	Recommendation
Size	How big the text is	Web and apps: 16 px or more for paragraphs. Print: 9 to 12 pt for body text, depending on the typeface and reading distance.
Line height (leading)	Space between lines	About 1.4 to 1.6 times the font size for paragraphs; tighter (1.1 to 1.2) for large headlines.
Line length (measure)	Characters per line	45 to 75 characters for long text. Longer lines tire the eye; shorter ones chop up the reading.
Tracking	Uniform spacing across all letters	Slightly looser for all caps and small text; slightly tighter for very large headlines.
Kerning	Space between specific letter pairs	Adjust by hand in logos and headlines (pairs like "AV," "To," "LT").
Alignment	Left, center, right, justified	Left for reading; center for short text. Justified text without hyphenation creates "rivers" of white space.

Details that mark a professional

Avoid widows and orphans: a single word stranded on the last line of a paragraph, or a lone line cut off from its paragraph at the top or bottom of a column.
Use curly ("smart") quotes and apostrophes (“ ” ’) instead of straight ones ("). Save the prime marks (′ ″) for feet and inches, as in 8.5″.
Use an en dash (–) for ranges like 9–5 or pages 4–7, and an em dash (—) for a break in a sentence. A hyphen (-) only joins words.
Never stretch or squash letters: if you need a narrower version, use a condensed style.

2. A paragraph on your website runs 140 characters per line. What do you do?

Limit the width of the text block so lines run 45 to 75 characters.
Make the font smaller.
Justify the text.

Very long lines force the eye to travel too far and lose the start of the next line.

Licenses: are you allowed to use this font?

Fonts are licensed software. Before using one in commercial work (especially a logo), make sure the license allows it:

Google Fonts: its fonts carry open licenses (mostly the SIL Open Font License) that allow commercial use, including logos.
"Free font" websites: many fonts are free for personal use only. Read the license.
Adobe Fonts: included with an Adobe Creative Cloud subscription, under Adobe's own terms.
Commercial fonts: licensed by type of use (desktop, web, app) and number of users.

3. You find a beautiful font labeled "free for personal use" and want to use it in a client's logo. What do you do?

Use it: if it's free, it's fair game.
Buy the commercial license or choose another font whose license allows commercial use.
Tweak it a little so nobody notices.

A logo is commercial use. Without the right license, you expose your client to a legal problem.

A barbecue restaurant in Austin, Texas (illustrative case) printed its menu on Letter-size paper with this diagnosis: the restaurant name in an all-caps script (illegible), the dish names in another decorative face, descriptions justified at 9 pt in lines of nearly 120 characters, and prices tucked at the end of each description. Customers kept asking servers for information that was already printed. Here's what changed:

Aspect	Before	After
Families	4 (script, display, serif and sans)	2: a serif with character for headings and a readable sans for text
Restaurant name	Script in all caps	Script in upper- and lowercase, only for the name, at 36 pt
Descriptions	9 pt, justified, ~120 characters per line	10 pt, left-aligned, two columns of ~55 characters
Line height	Automatic and cramped	1.4 for descriptions; 1.1 for headings
Prices	Inside the description	12 pt Bold, in a right-aligned column

The redesign didn't add a single ornament: it only applied the rules in this lesson. And it had a practical effect the owner noticed right away: with prices in a column, customers compared brisket, ribs and combo plates at a glance and stopped flagging down servers. Well-set type is invisible: nobody comments on it, but everybody reads it.

Tools for choosing and testing fonts

On Google Fonts you can filter by classification and type your own preview text. Test with the client's real copy, including numbers, dollar signs, curly quotes and accented words that show up on American menus ("café," "jalapeño," "crème brûlée"): some fonts are missing those characters. To identify a font you spotted in a photo, try a tool like WhatTheFont. And if you work in Canva, keep in mind that the free plan doesn't let you upload your own fonts: pick a brand typeface that's available in the tool your client will actually use.

4. With an 18 px base size and a 1.25 ratio, about how big is the level two steps above body text?

24 px
36 px
28 px

18 × 1.25 = 22.5 px (one step) and 22.5 × 1.25 ≈ 28.1 px (two steps), which you round to 28 px. 36 px would be doubling the size, not applying the scale.

Common typography mistakes

Using a different font on every line "to be more creative."

One or two families; variety comes from weights and sizes.

Centered or justified paragraphs with very long lines.

Left-align and keep lines to 45–75 characters.

Stretching or squashing text so it "fits."

Use a condensed style or edit the copy.

Headlines with the same line height as paragraphs (the lines drift apart).

Tighten headline line height to 1.1–1.2.

Downloading fonts from any website without reading the license.

Use Google Fonts or buy a license for the use you need.

Practice exercise: your type system

Choose two Google Fonts pairings for the coffee shop from the lesson 3 exercise.
Define the type scale (H1, H2, H3, body, caption) with size, weight and line height.
Lay out a menu page with section headings, item names, descriptions and prices.
Check: line length, widows, quotes and dashes, and alignment.

See solution

Pairing 1 (warm and classic):
  Headings: Playfair Display Bold
  Text:     Lato Regular
Pairing 2 (modern and friendly):
  Headings and text: Montserrat (Black for headings, Regular for text)

Scale for the printed menu (Letter, 8.5 × 11 in):
  Coffee shop name: 36 pt, line height 1.1
  Sections (COFFEE, PASTRIES): 16 pt, all caps, loose tracking
  Item name: 12 pt Bold
  Description: 10 pt Regular, line height 1.4, dark gray
  Price: 12 pt Bold, right-aligned in a column

Summary

Serif, sans serif, slab, script, display and monospaced typefaces each convey something different.
Use one or two families with clear contrast, and build hierarchy with a scale of sizes and weights.
Mind the size, line height, line length, tracking and kerning.
Use real typographer's punctuation: curly quotes, en dashes and em dashes.
Always check the license before using a font in commercial work.

You've completed the Beginner level!

Next lesson: Layout and Grids: How to Organize Any Design. The Intermediate level begins: you'll learn to place every element in space with margins, columns and a clear focal point.