Typography is one of those skills that separates the designers who know what they're doing from the ones who've just been dragging things around until they look okay. You can have the most gorgeous color palette and stunning imagery, but if your typography is off, everything falls apart. I've seen beautiful designs ruined by terrible font choices, and I've seen modest designs elevated purely by excellent type work. It's that important.
But here's the thing—typography has a seriously steep learning curve. There's all this terminology that feels like it was invented to confuse people: kerning, leading, tracking, ligatures, oldstyle figures, and on and on. And then you've got to actually remember which typefaces work together and which ones clash. It's a lot. So let's break it down into digestible pieces and get you actually understanding this stuff.
Font Classifications and When to Use Them
First up: font categories. You've got your serifs (those little feet at the ends of letters—think Times New Roman), sans-serifs (no feet—Helvetica, Roboto, Arial), script fonts (the fancy cursive-looking ones), display fonts (the decorative, attention-grabbing ones), and monospace fonts (where every character takes up the same space—your classic code font). Each category has its own personality and use case.
Serif fonts feel traditional, trustworthy, established. They're perfect for long-form reading because those little feet actually help guide your eye across the line. That's why newspapers and books have used serifs for centuries. Sans-serifs feel modern, clean, approachable. They've dominated digital design for years because they render crisply on screens and feel contemporary.
But here's where it gets interesting: those rules aren't hard anymore. Serifs are making a massive comeback in web design. Fonts like Playfair Display and Lora are everywhere. The line between "traditional" and "modern" has blurred significantly. Now it's more about matching the font's personality to your brand's personality, regardless of whether it's a serif or sans-serif.
Scripts are gorgeous for headlines and logos but absolutely terrible for body text. They're slow to read, can be accessibility nightmares, and often don't translate well across operating systems. Use them sparingly, and always test thoroughly. Display fonts are similarly specialized—they're designed to be big and impactful, not comfortable at small sizes.
Type Hierarchy and Readability
Type hierarchy is how you organize text so readers know what's important and how to navigate the content. You've got your headlines (H1), subheadings (H2, H3), body text, captions, and all the supporting players. Each level should be visually distinct but feel part of one cohesive system.
The key principle here is contrast. Your H1 needs to look obviously different from your body text. That could be through size, weight, color, spacing, or all of the above. Without that hierarchy, readers don't know where to start, where to focus, or how the content is organized. It's like walking into a room where everything is the same size and color—nothing stands out, nothing feels intentional.
When I'm establishing hierarchy, I usually start with the body text. Figure out what's comfortable to read at around 16-18px for web. Then I scale everything else relative to that. H1 should be roughly 2-3x the size of body text. H2 should be smaller, but still large enough to feel like a section marker. The ratios matter more than the specific sizes.
Leading, Tracking, and Kerning Explained
Alright, let's tackle the terminology that trips up a lot of people. Leading (pronounced "ledding," like the metal) is line spacing—vertical space between lines of text. It's called leading because old typesetters used strips of lead to create space between lines. Good leading makes text comfortable to read; too little and lines feel cramped, too much and the text loses coherence and looks like a ransom note.
For body text, I typically use line-height between 1.4 and 1.6 times the font size. Tighter for headlines (1.1-1.3), looser for longer text passages. But this varies depending on the typeface—some fonts naturally need more breathing room than others.
Tracking is letter-spacing across a word or block of text. When you adjust tracking, you're moving all the letters by the same amount. Tight tracking can make text feel cohesive and elegant; loose tracking can improve readability for small text or create an airy, open feel. ALL CAPS text almost always needs positive tracking because the uniform letter shapes can feel cramped without extra space between them.
Kerning is different—it's the adjustment of space between specific letter pairs. Traditional kerning handles things like "AV" or "To" where letters naturally sit too close together or too far apart. Kerning matters most at large sizes (headlines, logos) where those small imperfections become visible. At body text sizes, you generally don't need to worry about individual letter pair kerning because your font's built-in metrics handle it.
Web Font Optimization
Here's something a lot of designers gloss over: web fonts need to be optimized. If you're loading a 2MB font file, you're killing your page performance. That's not an exaggeration—font files are often among the largest assets on a page, and they block rendering until they're loaded.
First, subset your fonts. If you're using a font primarily in English, you don't need all the Vietnamese diacritics or mathematical symbols. Most font services let you subset to specific character sets. Second, use WOFF2 format—it's got the best compression. Third, consider variable fonts. They contain multiple weights and widths in a single file, which can actually be smaller than loading multiple individual weights the traditional way.
And please, please use font-display: swap in your CSS. This tells the browser to show fallback text while your web font loads, then swap it in once ready. Nothing frustrates users more than staring at a blank screen waiting for fonts to load. FOUT (Flash of Unstyled Text) is annoying but FAR better than FOIT (Flash of Invisible Text).
Pairing Fonts Successfully
Font pairing is where design gets fun but also tricky. The goal is to combine typefaces that feel cohesive but have enough contrast to create visual interest. Too similar and it's boring. Too different and it's chaos.
My go-to strategy is pairing one serif with one sans-serif. They balance each other naturally—the serif adds warmth and tradition, the sans-serif adds modernity and clarity. Think Lora with Roboto, or Playfair Display with Montserrat. The key is choosing fonts from different (but complementary) categories, not just two random fonts that happen to look okay.
Another approach is using fonts from the same family. Most well-designed font families come with both serif and sans-serif versions specifically designed to work together. This is a safer bet if you're nervous about mixing fonts. Foundries have already done the hard work of making them harmonize.
Whatever you do, limit yourself to two, maybe three typefaces maximum. More than that and your design starts feeling schizophrenic. If you need variety, use weight and style variations within a single typeface family. One great font used well beats two mediocre fonts fighting for attention.
Common Typography Mistakes
I've seen a lot of typography disasters over the years. Let me save you from making them yourself. Mistake number one: using system fonts as primary fonts. You know the ones—Arial, Times New Roman, Georgia, Verdana. They're fine as fallbacks, but using them as your main choice tells users "we didn't really think about this." There are so many excellent free fonts available now that there's no excuse.
Mistake number two: ignoring readability. Just because you can use 10px text doesn't mean you should. Most adults over 30 can't read that comfortably without squinting. Body text should be at least 16px for web, and don't sacrifice readability for "cleaner design." Accessible design is good design.
Mistake number three: centering everything. Centered text is harder to read because your eye has to find the beginning of each line. Use left alignment for body copy—it's how we naturally scan Western languages. Centered text can work for headlines and short blocks, but never for paragraphs.
Mistake number four: spacing inconsistencies. If your headline has X amount of space below it, your subhead should have proportionally less, not more. These relationships matter. Inconsistency in spacing makes designs feel amateur and accidental.
And finally, mistake number five: not testing across platforms. That beautiful font you chose might render completely differently on Windows versus Mac. Some fonts look incredible on Mac and awful on Windows (or vice versa). Test everything, and always have solid fallbacks defined.
Tools to Help You Succeed
If you're feeling overwhelmed by all this, don't worry. There are tools that can help you make better typography choices. Our Font Pairing tool takes the guesswork out of combining typefaces by suggesting combinations that actually work together. It won't do the work for you, but it'll point you in the right direction and help you learn what makes font pairings successful.
Typography is a craft that takes years to master, but the fundamentals aren't that complicated. Learn the rules, practice applying them, and eventually you'll develop an eye for it. Then you can break the rules intentionally, which is where the really interesting work happens.