Font Pairs and the Grid: Typography for Beginners

What typography actually is, in plain words

A font is the voice of the text. The same word can be whispered, shouted, or said calmly and firmly. And here’s a beginner who has just gotten their hands on the font list - acting like a kid in a candy store. They want everything at once. The result is a page where six fonts shout over each other, and it’s impossible to read.

The secret, by the way, is almost insultingly simple. Good text design is one or two fonts, a clear size scale, and one consistent spacing step. No talent, no ten years of a trained eye. Just a couple of rules that always work.

Why a beginner should bother learning fonts

You may not be able to draw. But you set text constantly: a landing page, a presentation, a post, a README, the interface of the app you’re vibecoding. And typography gives away an amateur faster than anything - quicker than color and images.

• You’ll understand why someone else’s site looks expensive and yours looks “thrown together,” even though the text is exactly the same.
• You’ll stop picking fonts “by vibe” and start building pairs that are guaranteed to get along.
• Any screen will read instantly: the eye will find what matters on its own, with no explanation from you.
• A grid and one consistent spacing step will remove that “something’s off, but I can’t tell what.” Usually it’s a block that slid over by a couple of pixels.

Nine out of ten “amateur” layouts aren’t bad taste. They’re five fonts, eyeballed sizes, and spacing made with the spacebar. The three rules below fix almost all of it.

The four pillars of good typography

How many fonts to use on a page

The iron rule for beginners: one font is fine, two is good, three is the ceiling. One good font in different weights and sizes will cover absolutely everything. That’s not poverty. That’s discipline.

So why a second one? To split the roles: a display font A display font is large, full of character, made for headings and accents. Often too flashy to read long text in, but great at catching attention. catches the eye, while a body font A body font is calm, without extra character, tuned for reading long passages at small sizes. Its job isn’t to get in the way - it should be invisible. calmly carries the meaning. Like a frontman and a bassist: one shines, the other holds it down.

How to choose a font pair: contrast and kinship

A good pair rests on two things at once.

• Contrast. The fonts must clearly differ, or what’s the point of having two - it’ll look like a mistake. The classic move: a serif A serif font has little ‘feet’ at the ends of the strokes. It looks classic, bookish, solid. plus a sans-serif A sans-serif (grotesque) font has smooth stroke ends, no ‘feet.’ It looks modern, clean, interface-like. . One with serifs, one without - you spot the difference instantly.
• Kinship. At the same time, they must share something, or the pair falls apart. The main marker is a similar x-height X-height is how tall a font’s lowercase letters (like the ‘x’) are compared to the capitals. If two fonts have different x-heights, they look like they’re from different eras side by side. . One has big, round letters, the other small and pinched? Next to each other they’ll look like strangers.

The safest trick: take one family in different weights - thin, regular, bold. You get contrast, and kinship is guaranteed: it’s literally one font. Once you’re bolder, add a second.

Heading hierarchy: so the eye finds what matters on its own

Hierarchy Hierarchy is the visual order of importance. The most important thing is emphasized the most, the secondary stuff is quieter. The eye reads it in a fraction of a second, before reading the words. is a map for the eye. You land on a page and within a second you understand: here’s the heading, here’s the subheading, here’s the body text. It’s built with three free tools, and you still need just as few fonts to do it.

• Size. The heading is noticeably larger than the body. Not by a couple percent - large enough that the difference reads instantly.
• Weight. The important stuff is bold, the rest is regular. Often that alone is enough.
• Air. Leave more empty space around what matters. Emptiness isn’t “unfinished” - it’s a spotlight.

And to avoid eyeballing sizes, designers use a scale - a size scale A modular scale is a predefined set of font sizes where each one is the previous size multiplied by the same ratio. The sizes look coordinated because they share a common step. . Take your base body size, multiply by a constant ratio, and you get a series: body, subheading, heading, huge heading. The sizes look related because they all grew from one step.

Grid and spacing: one rhythm for the whole page

A grid A grid is an invisible system of guides that blocks on a page align to: columns, margins, edges. You don’t see it, but you feel its absence immediately. is an invisible set of rails. Text edges, columns, and images align to them. Everything on the same rails - the page looks put together. Every block on its own - and you get that “it’s sliding around” feeling.

But the most powerful and simplest rule is one consistent spacing step. Pick a base unit and build all your gaps from it, in multiples. The industry most often uses a step that’s a multiple of 8: the series 8, 16, 24, 32, 40, and on. That’s how big design systems like Google’s Material Design are built. For small details you can split it into multiples of 4. The main thing is to not breed random 7, 13, 19 pixels.

How to build a screen’s typography in 6 steps

Say you’re laying out a simple landing page or an app screen. Don’t guess - work through the steps.

Pick two fonts: one with character for headings, one calm for body text. Not sure? Take one font in two weights, regular and bold. That’s already a working pair.
Check the kinship: put both side by side and look at the height of the small letters. Very different - swap one out, they won’t get along.
Set a base body size that’s comfortable to read. Build a scale from it: multiply by roughly 1.25 - 1.5 to get the subheading, heading, and large heading.
Set up the hierarchy: the important stuff larger and bolder, the secondary stuff smaller and calmer. No more than three or four levels, or it’s a mess again.
Pick one spacing step that’s a multiple of 8. Take every gap between blocks only from that set: 8, 16, 24, 32. No random numbers.
Align the left edges of all blocks to one line. That’s your simplest grid. Step back, look from a distance - everything should stand straight and breathe.

If you’re vibecoding and want the assistant to build the typography for you, don’t write “make nice fonts.” Give it the same rules in words - and the result will be predictable.

Build the typography for this screen by the rules, not by eye.

Use at most two fonts: one display font with character, one calm body font. If unsure - one sans-serif in regular and bold.
Build the sizes with a modular scale from the base body size, using a ratio of about 1.3: body, subheading, heading, large heading.
Create the hierarchy with size, weight, and air, not new fonts. No more than four levels.
Take all spacing only as multiples of 8 (8, 16, 24, 32, 40). No arbitrary values.
Align every block to one left line. Show the final size scale and the spacing set as a separate list.

Common beginner typography mistakes

• Five fonts “for beauty.” Each new font makes it worse, not better. Cut down to one or two, and get your variety from weight and size.
• A pair with no contrast. Two similar fonts look like a mistake, not a pair. Split the roles: serif plus sans-serif.
• Eyeballed sizes. “A bit bigger here, a bit smaller there” gives a muddy hierarchy. Build a scale from one ratio.
• A heading that’s almost the body. The size difference is barely visible - which means there’s no hierarchy. Make the contrast obvious, don’t be shy.
• Random spacing. 7 pixels here, 13 there - and the page “slides.” One step, a multiple of 8, on every gap.
• Cramped, no air. Everything jammed together - hard to read and looks cheap. Empty space around what matters isn’t a gap, it’s an accent.
• Mismatched alignment. One block left-aligned, another centered, a third drifting off. Put it all on one left line - and it instantly looks tidy.