Why typography is invisible when it works well
The best typography is the one you don't notice. When reading is easy and fluid, users aren't even aware of the design decisions that made it possible. But when typography is wrong, it's impossible to ignore: text too small, too cramped, or with colors that don't contrast.
Studies on web readability show that 95% of the information on most websites is text. If this text isn't easy to read, no matter how beautiful your visual design is, users will leave.
The difference between serif and sans-serif fonts
Serif fonts have small decorative strokes at the end of each letter, like Times New Roman. Historically, they've been considered more readable in printed text because these strokes guide the eye along the line.
Sans-serif fonts, like Arial or Helvetica, don't have these strokes. For many years, they were considered better for screens because the low resolution of old monitors made serifs look blurry. But with modern retina displays, this distinction is no longer as relevant.
What really matters is the x-height (the height of lowercase letters without ascenders or descenders) and letter spacing. Fonts with large x-heights and good spacing are more readable, regardless of whether they have serifs or not.
Typographic hierarchy: guiding the reader's eye
When you arrive at a web page, your brain processes information in milliseconds looking for patterns. Typographic hierarchy creates these patterns using size, weight, and space to indicate what's most important.
A clear hierarchy typically has at least three levels: main headings (H1), subheadings (H2-H3), and body text. Each level should be visually distinct but harmonious with the others. A useful rule is to maintain a modular scale: if your base text is 16px, your subheadings could be 24px (1.5x) and your main headings 36px (2.25x).
Line length and readability
The optimal length of a text line is 50–75 characters, approximately 10–12 words. When lines are too long, the reader's eye gets tired looking for the beginning of the next line. When they're too short, reading rhythm constantly breaks.
Maria, a UX designer, redesigned a tech company's blog. The original design had lines extending across the entire screen width, often reaching 120 characters. Simply reducing text width to 65 characters per line increased reading time by 35%. Readers finally stayed because they could consume content comfortably.
Line spacing: the space that breathes
Line spacing (or line-height in CSS) is the vertical space between lines of text. Too tight line spacing makes text seem dense and intimidating. Too much space and text seems disconnected.
For body text, a line spacing of 1.5 to 1.7 times font size usually works well. For example, if your font is 16px, line spacing of 24-27px creates breathing room without losing coherence. For headings, you can be tighter (1.2-1.3) because they're shorter and larger.
Color contrast and accessibility
WCAG (Web Content Accessibility Guidelines) recommends a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. This ensures that people with visual impairments, or simply reading in bright light, can read your content.
Gray on white can look elegant and modern, but #999999 on white only has a ratio of 2.8:1. This is insufficient. #666666 on white has 5.74:1, meets standards and still looks professional and clean.
Combining fonts: the rule of complementary opposites
Combining fonts can be tricky. A common mistake is using fonts too similar that compete with each other without adding visual contrast. The other extreme is using fonts so different they visually clash.
A reliable strategy is pairing a font with personality for headings with a neutral font for body text. For example, a classic serif like Merriweather for headings with a modern sans-serif like Open Sans for body creates harmonious contrast.
Or you can reverse it: a sans-serif with character like Montserrat for headings with a readable serif like Georgia for text. What you want to avoid is, for example, Arial with Helvetica - they're so similar they look like a mistake instead of a deliberate decision.
Variable fonts: the future of web typography
Variable fonts are a new technology that allows a single font to have multiple weights, widths, and styles without needing to load separate files for each variant. This means faster loading and more design flexibility.
Instead of loading Regular, Bold, Italic, and Bold Italic as four separate files, a variable font contains everything in one file. You can even animate between weights or dynamically adjust based on screen size.
Performance: optimizing fonts for speed
Custom web fonts can significantly add to loading time. Each font is a file the browser must download before rendering text. While waiting, you often show FOIT (Flash of Invisible Text) or FOUT (Flash of Unstyled Text).
To optimize: use font-display: swap to show system text immediately while the custom font loads. Load only the weights you actually need. And consider self-hosting instead of using Google Fonts to avoid the extra DNS lookup.
Real use cases: when to break the rules
Jorge, a freelance designer, was creating a landing page for an electronic music festival. He intentionally used an extreme decorative font for the main title, breaking all readability rules. But it worked because it was just one large word, and the context (experimental music) justified the choice.
For the explanatory text below, he returned to an ultra-readable sans-serif. He understood that rules exist to guide, not to limit. Knowing when to break them is as important as knowing them.
Tools for making typographic decisions
Type Scale lets you experiment with modular typographic scales. You adjust the base size and ratio, and it automatically generates a harmonic scale for all heading levels.
Contrast Checker verifies if your color combinations meet WCAG standards. FontPair suggests proven Google Fonts combinations that work well together.
Build a system, not isolated decisions
The best typographic designs aren't made font by font, but as a coherent system. Define your rules once: font family, size scale, available weights, line spacing, paragraph spacing. Then apply them consistently.
This consistency not only makes your design look more professional, but also makes coding easier and maintenance simpler. A well-thought-out typographic system is an investment that continues paying dividends in every new design you create.