Tutorials Design

Typography for Screen: Choosing and Pairing Type

Beginner · ~18 min

Overview

Type on screen has constraints print does not: it may be moving, overlaid on unpredictable footage, viewed on a phone at arm's length, and compressed by a platform before anyone sees it. Those constraints narrow the useful choices considerably, which is good news. Most typographic decisions for video and social reduce to a handful of rules. This guide covers what to look for in a typeface, how pairing actually works, and the specific failures that make on-screen text hard to read.

What You Need

Access to a font library, system fonts and Google Fonts cover most needs
Something to test on: a phone, at the distance people actually watch
A licence check for anything commercial, font licensing is real and frequently ignored
Two or three candidate typefaces rather than twenty
The font pairing tool for trying combinations quickly
Restraint, which is most of typography

Steps

Choose for legibility at your smallest real size

Design at the size people actually view. A title that reads beautifully on a large editing monitor may be illegible as a phone thumbnail or on a laptop across a room. Export a test frame, look at it on a phone, and judge there. This one habit prevents most on-screen type failures.

Prefer open apertures and distinct letterforms

Legibility at small sizes depends on letters remaining distinguishable. Look for open counters and apertures, and check the characters that commonly collapse into each other: capital I, lowercase l, and the digit 1. Capital O and zero. Lowercase r and n together reading as an m. Condensed and very light weights fail these tests first.

Limit yourself to two typefaces

One for headings, one for body, and use weights rather than additional families for variation. Most amateur design uses too many typefaces, which reads as inconsistency rather than richness. A single well-chosen family with several weights covers a great deal on its own.

Pair by contrast, not by similarity

Two typefaces that are slightly different look like a mistake. Two that are clearly different look deliberate. Pair a serif with a sans, or a distinctive display face with a neutral text face. The classic failure is pairing two neutral sans-serifs that differ just enough to look wrong and not enough to look intentional.

Set generous size and spacing for screen

On-screen text generally wants to be larger and more spaced than print instinct suggests, particularly for anything read at a distance or in motion. Give line spacing room, keep line lengths moderate, and avoid tight letter spacing on small text. It is the most common cause of on-screen text that feels hard to read without an obvious reason.

Guarantee contrast with a plate, not with hope

Text over video is the hardest case because the background moves. Relying on the footage staying dark enough fails the moment someone walks past a window. Put a solid or gradient plate, a shadow, or an outline behind the text so contrast is guaranteed regardless of what is underneath.

Pro Tips

Check your typeface licence before commercial use. Free for personal is not free for a client project.
Test on a phone before committing. It is where most of your audience is and where type fails first.
Avoid very light or very condensed weights for anything small or moving.
Use weight and size for hierarchy before reaching for a second typeface or a colour.
If text over footage is ever hard to read, add a plate. No amount of typographic finesse beats guaranteed contrast.

Knowledge Base

What You'll Learn

Screen typography is mostly a legibility problem with an aesthetic layer on top, and the legibility part has answers. Below: what makes type readable at small sizes, and how pairing actually works.

What Makes Type Legible at Small Sizes

Legibility is a property of letterforms rather than of style, and a few characteristics predict it reliably.

Open apertures (the gaps in letters like c, s, and e) keep those shapes distinct when small. Typefaces with tightly closed apertures fill in visually and letters start to resemble each other.

Generous x-height, the height of lowercase letters relative to capitals, makes text appear larger at the same point size and improves small-size readability considerably.

Distinguishable problem characters matter more than people expect. Capital I, lowercase l, and the digit 1 are identical in many geometric sans-serifs, which is a genuine problem for anything containing codes, times, or measurements.

Moderate weight and width. Very light weights disappear against busy backgrounds and vanish under compression. Very condensed faces reduce the horizontal space that distinguishes letters. Both fail earliest at exactly the small sizes where you need them most.

How Pairing Actually Works

Font pairing is presented as a mysterious skill and is mostly one principle: make the relationship obvious in one direction or the other.

Two typefaces can work together because they are clearly contrasting. A serif with a sans, a geometric display face with a humanist text face, a heavy weight with a light one. The difference is deliberate and reads as a designed relationship.

Or they can work because they are clearly related, two weights of the same family, or a serif and sans designed as companions by the same foundry. The similarity is total rather than approximate.

What fails is the middle: two typefaces that are almost the same. The eye detects the difference without being able to attribute purpose to it, and the result reads as a mistake, which, usually, it is.

This is why "use one family with several weights" is such reliable advice. It sits firmly at the related end and cannot land in the ambiguous middle.

Where This Fits

This guide covers one specific part of colour and design. The wider picture, how colour relationships work on screen, why colour meaning is cultural, and building a palette in production rather than the grade, is in Color Theory for Visual Storytellers, which frames the discipline as a whole and links out to the detailed guides underneath it, including this one. If you are starting from scratch rather than solving a specific problem, read that first and come back here.

FAQ

Q: How many typefaces should I use?
A: Two is plenty, one for headings and one for body, and one family with multiple weights is often better still. Additional typefaces read as inconsistency rather than richness. Get variation from weight, size, and spacing before reaching for another family.

Q: Are serif fonts bad for screen?
A: Not any more. The old advice came from low-resolution displays where fine serifs broke up. Modern screens render them cleanly. Serifs are fine on screen at reasonable sizes. The genuine constraints are weight, width, and aperture rather than the presence of serifs.

Q: Can I use any font I download?
A: Only within its licence. Many free fonts are free for personal use and require a paid licence for commercial work, and some restrict embedding in video or apps. Check before using anything on client work or monetised content, font licensing is enforced more often than people assume.

Q: Why is my text hard to read over video?
A: Because the background is moving and the contrast is not guaranteed. Text that reads well over a dark frame disappears when the shot brightens. Add a plate, shadow, or outline so contrast holds regardless of what is behind it, rather than relying on the footage cooperating.