🔠 Lesson 2.3: Type That Works — Fonts, Pairing & Hierarchy

The Four Font Families & How They Feel

Every font belongs to a family, and each family has a personality — a "tone of voice" it lends to your words before anyone reads them. Think of fonts like clothing: the same sentence in different fonts is like the same person in a tuxedo, a t-shirt, or a party costume. The words don't change, but the impression completely does. Here are the four families you'll actually use.

The two families you'll lean on most are serif and sans-serif — the workhorses that read well at any size. Script and display fonts are seasoning: a little adds flavor, too much is inedible. A whole flyer set in a script font is a headache; one elegant script word inside an otherwise clean design is lovely.

Font Pairing — Two Fonts, One Team

The rule that solves 90% of typography: use two fonts — one distinctive font for headings and one clean, highly readable font for body text — and let them do different jobs. That's it. One to grab attention, one to be read.

Why two, and why these roles? Because good pairing is about contrast with harmony (yes, those Lesson 2.1 principles again). You want the two fonts to look clearly different so the hierarchy is obvious — but not so different that they fight. The reliable formula:

Pairing recipes that always work

• Serif heading + sans-serif body (or the reverse). The classic. The two families are different enough to separate cleanly, and each is readable. Example feel: a stately serif title over crisp sans body.
• Display/script heading + simple sans-serif body. Let the fun font be the star of the headline, and keep the body plain so it stays legible. The contrast makes the headline pop.
• One font family, two weights. The safest pairing of all: use a single versatile font but a heavy/bold weight for headings and a regular weight for body. Different weights create hierarchy with zero risk of a clash.

💡 The clash test: Two fonts clash when they're similar but not the same — like two slightly different sans-serifs that look almost identical. The eye reads it as a mistake. So pair fonts that are obviously different (different family, or same family + very different weight), never "close but not quite."

Type Hierarchy — Guiding the Eye

Type hierarchy means using differences in size, weight, and spacing to show the reader what's most important, next most important, and so on — so their eye flows through your text in the right order without any effort. It's the Contrast principle from Lesson 2.1 applied specifically to words.

A typical hierarchy has four levels:

Before / after, concretely: An announcement where the title, date, and details are all 24px regular weight — the reader has no idea what to read first, so the message lands slowly or not at all. The after: title at 48px bold, date at 24px medium, details at 18px regular, fine print at 12px muted grey. Now the eye goes title → date → details → fine print automatically. Same words; the hierarchy did the guiding.

The tool that makes hierarchy obvious is meaningful jumps in size and weight. Just like contrast in Lesson 2.1: if a heading is only slightly bigger than the body, it looks like an accident. Make the jumps clear — a heading should be obviously, confidently bigger. When you can tell each level apart at a glance, your hierarchy is working.

Readability Rules That Never Fail

Beautiful type that people can't comfortably read has failed at its one job. A handful of durable rules keep your text easy on the eye.

• Line length: Keep lines of body text to roughly 45–75 characters (about 8–12 words). Lines that stretch the full width of a wide design are tiring — the eye loses its place jumping back to the start. Narrow the text box so lines wrap sooner.
• Line spacing (leading): Give lines a little air. Body text usually reads best with line spacing around 1.2–1.5× the font size. Too tight and lines mush together; too loose and they feel disconnected.
• Letter spacing (tracking): Leave body text alone (0). A little extra letter spacing can help ALL-CAPS headings breathe, but don't over-space normal text — it slows reading.
• Don't set long text in ALL CAPS — and never set a script font in all caps (it becomes an unreadable tangle; scripts are designed to flow with their loops and connectors). Caps are fine for a short punchy heading, not for sentences.
• Mind the size on mobile: a huge share of designs are viewed on phones. Text that looks fine on your big screen can be a squint on a phone. Preview small, and keep body text generously sized.
• Contrast still applies: everything from Lesson 2.2's "can you read it?" test carries over — type is only as good as its legibility against the background.

Doing It in Canva — The Text Tab

Here's where every type control lives so you can move fast. Everything below works on the free plan except where noted.

• Text tab (left panel): Click Text to add text. Use "Add a heading / subheading / body text" for instant hierarchy, or browse Font combinations / text styles — pre-designed text graphics with pairing and hierarchy already done.
• Font list: With text selected, open the font dropdown in the top toolbar. Search by name, scroll the library, and see Font pairing suggestions ("Canva recommends") for a font that matches your current one.
• Font size: Type or nudge the number next to the font name. Make your hierarchy jumps bold and obvious.
• Style controls: Bold (B), italic, underline, and the font's own weight options (Light, Regular, Bold) from the style dropdown — weight is a hierarchy tool as much as size.
• Spacing: Click the Spacing button in the toolbar to adjust Letter spacing and Line spacing with sliders — your leading and tracking controls. Also here: Anchor (vertical position in the box).
• Alignment: Left / center / right (and justified) — remember Lesson 2.1: pick one, usually left for body.
• Effects: The Effects button offers Shadow, Lift, Hollow, Splice, Neon, Background (a highlight box behind text — great for readability over photos), and Curve to bend text along an arc. Preview them, but use with restraint.
• Resize the text box to control line length — drag the side handles to make lines wrap sooner.
• Brand fonts (Pro): Canva Pro's Brand Kit stores your chosen fonts as Brand fonts so they're one click away in every design (repetition, automated). Free users keep a note of their two font names instead — same result, a little more manual (Lesson 8.1).

🎯 Project: A Clean Type Hierarchy

You'll build one simple design — a quote graphic or an announcement — with a clean, confident type hierarchy using exactly two well-paired fonts. This is deliberately minimal so all your attention goes to type. It pairs perfectly with the color palette you built last lesson. Free plan throughout.

PAIRING: heading = a strong serif or display
         body    = a clean sans-serif  (2 fonts only)

"Great design is
 invisible."              <- Heading: large, bold, heading font

— on getting out of your
   own way                <- Subheading: medium, body font, muted

Module 2 · Design Foundations
                          <- Body: comfortable size, body font

Ray's Canva Course        <- Caption: smallest, light grey

Best Practices

✅ Do's

• Stick to two fonts. One for headings, one for body — it's the whole game.
• Make hierarchy jumps obvious. Bold, confident size differences read as intentional.
• Keep body text readable. Sensible size, comfortable line length and spacing, high contrast.
• Use Canva's pairing suggestions and text presets. Inherit good typography, then tweak.
• Preview on mobile. Most people will read your design on a phone.

❌ Don'ts

• Don't use more than ~2 fonts. Three-plus starts to look like a ransom note.
• Don't set long text or script fonts in ALL CAPS. It kills readability.
• Don't make headings a decorative font that's hard to read. Character shouldn't cost legibility.
• Don't cram or over-stretch lines. Give text room; keep line length in the comfortable range.
• Don't pair two fonts that are almost the same. Clearly different, or clearly the same-with-different-weight.

📓 Learning Journal

📝 Lesson Summary

🎉 What You've Accomplished

You've completed the design-foundations trio — layout, color, and now type. That's the "how to think" layer that most people never learn, and it's exactly what separates designs that look homemade from designs that look done-on-purpose. You can pick fonts with intent, pair them without clashing, and stack a hierarchy that makes your message land in the right order. Your eye is genuinely sharper than it was three lessons ago.

❓ Common Questions at This Stage

🔭 Looking Ahead

With Module 2 complete, you've got the designer's mindset. Now we put it to work at speed. In the next lesson — Lesson 3.1: Templates — Start From Something Great — you'll learn to harness Canva's greatest superpower: thousands of professional templates you can make your own. Everything you learned about layout, color, and type will help you choose the right template and customize it with taste, not just luck.

✅ Before the Next Lesson

• Keep your two-font pairing noted alongside your color palette — you're building a mini style guide
• Spot type hierarchy in the wild this week: a poster, a website, a magazine cover
• Write your Learning Journal entry and reflect on all of Module 2

📚 Additional Resources

• Canva Design School — Typography & font design
• Canva Learn — Typography terms explained
• canva.com/font-combinations — font pairing ideas