Typography

There's a quiet force at work every time you read something online. It shapes how long you stay on a page, whether you trust what you're reading, and even how you feel about a brand. It's not the logo. It's not the colour palette. It's typography, and most people never notice it until it goes wrong.
Good typography is invisible. It pulls you through a page without friction, lets your eyes settle naturally, and makes complex information feel digestible. Bad typography, on the other hand, is exhausting. You feel it in your eyes after a few minutes, in the way you give up on an article halfway through, or in the vague sense that a website just feels off somehow. Typography is working on you constantly, whether you're aware of it or not.
So let's talk about what it actually is, why it matters, and how to do it well.
What Is Typography, Really?
Typography is the art and technique of arranging type. That includes choosing typefaces, setting font sizes, managing line spacing, controlling line length, and making sure text behaves well across every device and screen size. It's a discipline with roots going back to Gutenberg and the printing press, but it's more relevant now than it has ever been, because most of the world reads on a screen.
The field has giants worth knowing. Ellen Lupton's book Thinking with Type is considered essential reading for designers. Robert Bringhurst's The Elements of Typographic Style is often called the typographer's bible. If you want to understand why typography decisions are made the way they are, those two books are a great starting point.
Why Typography Is So Important
The first and most obvious reason typography matters is readability. If people can't comfortably read your content, nothing else you've done matters. A beautifully shot hero image and a clever headline mean nothing if the body copy is set too small, too tight, or in a font that strains the eye after three paragraphs.
But typography goes further than just legibility. It communicates personality. A serif typeface like Georgia signals tradition, seriousness, authority. A geometric sans-serif like Futura feels modern and precise. A humanist sans-serif like Inter or Nunito is warm and approachable. These aren't subjective impressions, they're deeply ingrained associations that readers bring to every page they visit. The New York Times using a serif typeface for its editorial content is not an accident. Neither is Airbnb's switch to a clean, custom sans-serif to feel more friendly and accessible.
Typography also creates hierarchy. It tells readers what to read first, what's a detail and what's a headline, where one section ends and another begins. Without good typographic hierarchy, a page becomes a wall of undifferentiated text that nobody wants to engage with.
Typography and Accessibility
This is where things get genuinely important from a human perspective. Poor typography doesn't just make reading uncomfortable for the average user. For people with visual impairments, dyslexia, or cognitive disabilities, bad typographic choices can make content completely inaccessible.
The Web Content Accessibility Guidelines (WCAG), maintained by the W3C, set clear standards for text readability. These include contrast ratios, minimum text sizes, and spacing requirements. Meeting WCAG AA standards at minimum should be considered non-negotiable for any public-facing website.
Here are some specific ways typography affects accessibility:
Font choice matters for dyslexia. Fonts with high letter differentiation, where b, d, p, and q look distinctly different, help readers with dyslexia navigate text more easily. The British Dyslexia Association recommends fonts like Arial, Verdana, and Comic Sans (yes, really) for their clarity, while the open-source font OpenDyslexic was specifically designed to reduce reading errors.
Line length affects cognitive load. Lines that are too long force the eye to travel a long distance and make it harder to find the start of the next line. Lines that are too short create choppy, fragmented reading. The sweet spot is roughly 50 to 75 characters per line for body text, which has been studied and validated by readability researchers including the Nielsen Norman Group.
Line height affects comprehension. Text that's packed too tightly feels claustrophobic and slows reading. WCAG recommends line spacing of at least 1.5 times the font size for body text. In practice, 1.5 to 1.7 is a comfortable range for most contexts.
Contrast is critical. Low contrast between text and background is one of the most common accessibility failures on the web. WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Tools like the Colour Contrast Checker from WebAIM make it easy to verify your combinations before publishing.
Avoid justified text for body copy. Full justification creates uneven word spacing, particularly problematic for readers with dyslexia or low vision. Left-aligned text (or right-aligned for RTL languages) is consistently easier to read at length.
Implementing Good Typography
Good typography is built on a small number of principles applied consistently. Here's how to approach it in practice.
Start with a type scale. Rather than choosing font sizes arbitrarily, use a modular scale. Tools like typescale.com let you define a base size and a ratio (such as the Major Third at 1.25, or the Perfect Fourth at 1.333) and generate a harmonious set of sizes from it. Sticking to a scale ensures visual consistency across your headings, subheadings, captions, and body text.
Limit your typeface choices. Two typefaces is usually enough: one for headings, one for body copy. If you use more than two, you need a very good reason. Pairing typefaces is a skill in itself. Google Fonts has a pairing suggestions feature, and resources like Fonts In Use (fontsinuse.com) show how typefaces are combined in real-world contexts. A classic pairing that works reliably is a serif for headings and a humanist sans-serif for body text, or vice versa.
Respect whitespace. Whitespace is not empty space, it's an active design tool. Generous spacing around headings, between paragraphs, and in margins gives text room to breathe and makes content feel more premium and approachable. Cramped layouts feel stressful. Open layouts feel calm and trustworthy.
Set a comfortable measure. The measure is the width of a column of text. For body copy, keep it between 50 and 75 characters including spaces. On wider screens, this often means constraining the content area width rather than letting text stretch across the full viewport.
Use weight and style intentionally. Bold should mean "this is important." Italics should mean "this is a title, emphasis, or foreign term." If everything is bold, nothing is. Overuse of weight variation defeats the purpose of having it.
Don't neglect the small details. Smart quotes instead of straight quotes. En dashes for ranges, em dashes for interruptions. Proper ellipses instead of three periods typed in a row. These details are invisible when done right and distracting when done wrong. Most CMS platforms and design tools handle these automatically, but it's worth knowing they exist.
Where to Go From Here
Typography is one of those disciplines where small improvements compound into something genuinely better over time. You don't need to overhaul everything at once. Start by auditing your current type sizes against the ranges above, check your contrast ratios with WebAIM's tool, and make sure your line height isn't strangling your body text.
From there, spend some time with Google Fonts, explore type pairings, and read a little Bringhurst. The more you understand about why typographic choices work the way they do, the more naturally good decisions will come.
In a world where content is everywhere and attention is short, the sites and products that make reading feel effortless will always have an edge. That edge is, in no small part, built out of type.