---
title: "Type pairing, scale and spacing | Optimize All Academy"
description: "How many typefaces do you need? For most creators and small brands, one or two typeface families are enough. A single versatile family with several…"
url: https://optimizeall.com/learn/graphic-design-fundamentals/type-pairing-and-hierarchy
updated: 2026-10-05
---

Graphic Design Fundamentals for Creators and Marketers · Typography that reads on every screen · lesson 8 of 18 · 7 min

# Type pairing, scale and spacing

## How many typefaces do you need?

For most creators and small brands, **one or two typeface families** are enough. A single versatile family with several weights can carry an entire brand. Two families — one for headlines, one for body — add personality. Three or more usually creates visual noise unless managed by an experienced designer.

## Pairing principles

Good pairs have **contrast with harmony**: different enough to create hierarchy, similar enough to feel related.

| Pairing approach | Example structure | Effect |
|---|---|---|
| Superfamily | Sans and serif versions of the same family | Very safe, cohesive |
| Serif headline + sans body | Editorial serif + neutral sans | Classic, trustworthy |
| Sans headline + sans body (weights) | Heavy sans + regular sans of the same family | Modern, clean |
| Display headline + neutral body | Distinctive display + humanist sans | Personality with legibility |

Avoid pairing two faces that are *almost* the same (two similar geometric sans-serifs), which looks like an error, and avoid pairing two faces that both demand attention (two decorative display faces).

## Building a type scale

A type scale is a defined set of sizes you reuse. Designers often use a ratio (for example 1.25 or 1.333) to generate harmonious steps. For social canvases around 1080 px wide, a practical scale might be:

```
Display   96 px   (one big number or word)
H1        64 px   (headline)
H2        44 px   (subheading)
Body      32 px   (main text on slides)
Small     24 px   (labels, handle, footnotes)
```

Treat these as starting points; check them on a phone. Text on social graphics usually needs to be much larger than you would guess from designing on a desktop.

## Spacing: leading, tracking and kerning

- **Leading (line height):** space between lines. Body text often reads well around 1.3–1.5 times the font size. Large headlines usually need tighter leading (around 1.0–1.2) or they look loose.
- **Tracking (letter spacing):** uniform spacing across a word or line. All-caps text often benefits from slightly increased tracking; large headlines can sometimes take slightly tighter tracking.
- **Kerning:** adjusting space between specific letter pairs (such as "AV" or "To"). Most good fonts are well-kerned; manually check large headlines and logos.

## Line length and alignment

Very long lines tire the eye and very short lines break reading rhythm. For body text on websites, a common guideline is roughly 45–75 characters per line. On social slides, lines are much shorter, so keep sentences concise and break lines at natural phrase boundaries rather than mid-phrase.

Avoid **widows and orphans** (a single word left alone on the last line) in headlines — adjust line breaks manually.

## Emphasis without chaos

Choose one method of emphasis per level:

- Bold for key phrases in body text.
- Color highlight for one or two words in a headline.
- Avoid combining underline, italic, bold, color and all caps on the same phrase.

**All caps:** effective for short labels and punchy headlines, but slower to read in long passages because word shapes become uniform rectangles.

## Worked example: fixing a tips carousel

**Before:** four fonts; headline 40 px, body 36 px (weak contrast); body leading 1.0 (cramped); long centered paragraphs; random bold, italic and underline.

**After:**

1. One family: bold weight for headings, regular for body.
2. Scale: H1 64 px, body 32 px, small 24 px.
3. Body leading 1.4, headline leading 1.1.
4. Left-aligned body text, max about 8–10 words per line.
5. One emphasis rule: accent color on one keyword per headline.

## Type style sheet template

```
Heading font:  ________  weight ___  size ___  leading ___  tracking ___
Subhead font:  ________  weight ___  size ___  leading ___
Body font:     ________  weight ___  size ___  leading ___
Small text:    ________  weight ___  size ___
Emphasis rule: ______________________
Alignment:     ______________________
```

Save these as text styles in your design tool so every new design uses them automatically.

## Common mistakes

- Too many typefaces or weights.
- Sizes that are almost the same.
- Default leading on large headlines, making them look loose.
- Stacking multiple emphasis styles.

## Hands-on: set up text styles in Figma (or a brand kit in Canva)

1. Create one text sample per level of your scale: Display, H1, H2, Body, Caption.
2. For each, set family, weight, size, line height and letter spacing (see the style sheet below).
3. Select the text → in the right panel, open **Text styles** → **+** to create a style; name it with a slash for grouping, for example `Social/H1`.
4. Optional: store sizes as number variables (`type/h1 = 64`) so a whole scale can be adjusted in one place.
5. Apply styles to every text layer. When you change a style, every instance updates.

In Canva, add the same headings, subheadings and body fonts to your **Brand Kit** so they appear as one-click presets.

```text
TYPE STYLE SHEET — social canvas ~1080 px wide (starting point)
Style     Family / weight          Size  Line height  Letter spacing
Display   Headline sans, Black     96    100%         -2%
H1        Headline sans, Bold      64    110%         -1%
H2        Headline sans, Semibold  44    120%          0%
Body      Text sans, Regular       32    140%          0%
Caption   Text sans, Medium        24    140%         +1%
Rules: max 2 families · body never below 28 px on 1080 canvases ·
       left-align paragraphs · 35-60 characters per line on slides
```

## Before/after: a five-tip carousel

| | Before | After |
|---|---|---|
| Families | Four (two script, two sans) | Two (headline sans + text sans) |
| Sizes | 9 different sizes across slides | 4 sizes from the scale |
| Line height | Default, cramped paragraphs | 140% body, 110% headlines |
| Emphasis | Bold + italic + underline + color on the same words | Weight only for key phrases; one accent color for numbers |
| Line length | Up to 90 characters across the slide | 35–60 characters per line |

## Critique checklist: typography

- Can you name the role (Display/H1/H2/Body/Caption) of every text layer?
- Does each level differ from the next by a clear step?
- Is body text at least the minimum you set, and readable on a phone?
- Is emphasis used sparingly and consistently?

## Summary

Use one or two families, define a type scale with clear steps, set leading and tracking intentionally, and save everything as reusable text styles.

## Video lecture: Type pairing, scale and spacing

Lecture coming soon · 11 chapters · about 8 minutes. Read the full transcript below.

1. Type pairing and hierarchy
2. Why it matters
3. Pairing
4. A type scale
5. Spacing
6. Worked example 1: a tips carousel
7. Worked example 2: a bilingual consulting firm
8. Watch me do it: Figma text styles
9. Emphasis without chaos
10. Common mistakes
11. Recap and try this now

## Lecture transcript

### Type pairing and hierarchy

Look at any carousel that feels professional, and then at one that feels messy. Often the difference isn't the fonts themselves. It's how many there are, how the sizes relate, and the spacing between lines and letters. A messy slide might use four fonts and nine sizes. A professional one might use two families and four sizes, applied with discipline. In this lecture, you'll learn how many typefaces you really need, how to pair them, how to build a type scale, how to use leading, tracking and kerning, and how to save it all as text styles. By the end, you'll have a type style sheet that makes every design faster and more consistent.

### Why it matters

Why does this matter? Because typography is the backbone of hierarchy in text-heavy design. When sizes are random, the viewer can't tell what's a headline and what's a note. When fonts clash, the design feels chaotic. But when you have a clear system, the viewer instantly understands the structure, and you save time because you're choosing from a small menu, not the whole universe. Think of it like a well-organized wardrobe with a few pieces that all go together. You get dressed in thirty seconds, and you always look put together. A type system is your capsule wardrobe.

### Pairing

How many typefaces do you need? For most creators and small brands, one or two families. A single versatile family with several weights can carry an entire brand. Two families, one for headlines and one for body, add personality. Three or more usually creates noise. When you pair, look for contrast with harmony: different enough to create hierarchy, similar enough to feel related. Safe approaches are a superfamily with matching serif and sans versions, a serif headline with a sans body, or one sans family in different weights. And avoid two things: pairing two fonts that are almost the same, which looks like a mistake, and pairing two loud display fonts that fight for attention.

### A type scale

Now the type scale. A type scale is a defined set of sizes you reuse. Designers often generate one with a ratio, like one point two five or one point three three. For a ten eighty pixel social canvas, a practical scale might be: display at ninety-six pixels for one big number or word, headline at sixty-four, subheading at forty-four, body at thirty-two, and caption at twenty-four. Here's the key idea. Each step should be clearly different from the next. If your subheading is thirty-four and your body is thirty-two, nobody can see the difference, so it isn't hierarchy. It's noise.

### Spacing

Spacing makes or breaks text. Leading, or line height, is the space between lines. Body text usually needs around one hundred thirty to one hundred fifty percent of the font size to breathe. Big headlines need less, often around one hundred to one hundred fifteen percent, or they fall apart. Tracking is overall letter spacing. Tighten it slightly for big headlines, and loosen it slightly for small, all-caps labels. Kerning adjusts space between specific pairs, like A and V, which often looks gappy in big headlines. And line length matters too. On slides, aim for roughly thirty-five to sixty characters per line, so the eye doesn't get lost.

### Worked example 1: a tips carousel

Worked example one, simple. A five-tip carousel from a freelance designer. It uses four fonts, including two scripts. There are nine different sizes across the slides. Paragraphs are cramped with default line height. And key phrases get bold, italic, underline and color all at once. The fix: two families, a headline sans and a text sans. Four sizes from the scale. Body line height at one hundred forty percent. Emphasis only through weight, with a single accent color reserved for the tip numbers. Lines shortened to about fifty characters. The content didn't change at all. But now it reads like a polished mini course.

### Worked example 2: a bilingual consulting firm

Worked example two, a business scenario with illustrative details. A consulting firm in Riyadh produces LinkedIn carousels, pitch decks and reports, in English and Arabic. Every designer picks sizes differently, so documents never match. The brand lead writes one type style sheet. Two families, a sans for Latin and a matching Arabic family with similar weight. Five named styles, from display to caption, with sizes, line heights and letter spacing. Rules like body never below twenty-eight pixels on social canvases, and left-aligned paragraphs in English, right-aligned in Arabic. She saves the styles in Figma and in the team's Canva brand kit. Within a month, a new designer can produce an on-brand carousel on day one.

### Watch me do it: Figma text styles

Watch me do it in Figma. I type five samples: Display, H1, H2, Body and Caption. For H1, I pick the headline family, bold, sixty-four pixels, line height one hundred ten percent, letter spacing minus one percent. Then, in the right panel, I open text styles, click plus, and name it Social slash H1. The slash groups my styles neatly. I repeat for the others. Now I select every headline in my carousel and apply Social slash H1. Here's the magic. I decide the H1 feels a bit big, so I edit the style once to sixty pixels, and every headline across all slides updates instantly. That's the power of styles.

### Emphasis without chaos

A few words on emphasis, because this is where good type systems often break. Pick one method for emphasis and stick to it. Usually that's weight, making a word bold. Or one accent color. Not bold plus italic plus underline plus color on the same phrase. Underline is best reserved for links on screens. All caps can work for short labels, but slow down reading in sentences. And don't emphasize too much. If half the text is bold, nothing is. A good rule is no more than one emphasized phrase per slide or paragraph.

### Common mistakes

Common mistakes. Using too many fonts. Choosing two fonts that are almost identical. Sizes that are too close to each other. Default line height on everything. Center-aligned paragraphs, which are hard to read beyond two or three lines. Lines that run the full width of a slide. Mixing emphasis methods. And not saving styles, so every new design starts from scratch. Keep a critique checklist handy. Can you name the role of every text layer? Does each level differ clearly from the next? Is body text large enough on a phone? Is emphasis consistent?

### Recap and try this now

Let's recap. Use one or two type families, paired with contrast and harmony. Build a type scale where each step is clearly different. Set leading, tracking, kerning and line length deliberately. Use one emphasis method, sparingly. And save it all as text styles or a brand kit, so every design starts consistent. Try this now. Write a type style sheet for your brand using the template in the lesson. Create matching text styles in your design tool, and apply them to one existing carousel. Then change one style and watch every slide update.

## Key takeaways

- One or two type families are enough; pair with contrast and harmony, avoiding near-twins and two loud faces.
- A type scale gives clearly different steps (for example 96/64/44/32/24 on a 1080 px canvas).
- Set leading (body ~130–150%), tracking, kerning and line length (about 35–60 characters) deliberately.
- Use one emphasis method sparingly.
- Save styles in your design tool or brand kit so changes update everywhere.

## Try it

Write a type style sheet for your brand using the template, create matching text styles in your design tool, and apply them to one existing carousel.

- [Previous: Type anatomy, classification and choosing typefaces](https://optimizeall.com/learn/graphic-design-fundamentals/type-anatomy-and-choosing-typefaces)
- [Next: Legibility on mobile, video and thumbnails](https://optimizeall.com/learn/graphic-design-fundamentals/legibility-on-mobile)
- [All lessons of Graphic Design Fundamentals for Creators and Marketers](https://optimizeall.com/learn/graphic-design-fundamentals)