You Don’t Read Websites. You Scan Them.

Nielsen Norman Group has been strapping eye-tracking cameras onto real people and watching how they actually read web pages for more than twenty years now. The finding hasn’t moved in all that time: people don’t read a page top to bottom, word by word, the way you’d read a novel. They scan. On average, across thousands of pages and hundreds of people, readers take in somewhere around a quarter of the words on a page — not because they’re lazy, but because scanning is just what a person does when they land somewhere new and need to decide, fast, whether it’s worth their time.

Designers have known for years: people don’t read websites the way they read books. They scan.

And that changes how I think about typography. When someone lands on a page, they’re trying to work out what matters. What is this page about? Is it relevant to me? Where should I look next? What can I skip?

Good typography makes those decisions easier. Not by making everything bigger or adding more fonts, but by creating a simple hierarchy that gives the eye somewhere to go.

The page needs a path

Think about the way you look at a website for the first time. You probably notice the biggest thing first. Then something smaller catches your attention. Maybe a section heading, then a short paragraph, then a button.

You’re not consciously thinking about any of this. You’re just moving through the page.

That movement is hierarchy.

Size, weight, spacing and contrast work together to create a visual order: start here, then here, then here. Without that order, everything has the same importance. And when everything is important, nothing is.

The result is a page that feels harder to understand than it needs to be. Not because the content is complicated, but because the design hasn’t made any decisions about what deserves attention first.

That’s why I think about typography as a system, not a collection of font sizes.

Simplicity comes from having fewer decisions

This is one of the things I care about most when I build a design system. The goal isn’t to create lots of typography styles. It’s to create just enough.

On my own site, the hierarchy is deliberately simple. The hero headline is the biggest type on the site, using .hero__h1 and --type-display, which scales fluidly from 48px to 99px. Its job is straightforward: tell you what the page is about and establish the first thing your eye should see.

The page title sits one level down, using .page-title and --type-h1, scaling from 42px to 77px. Then come section headings with .display-h2 and --type-h2, scaling from 30px to 46px. These create the major divisions within a page and give someone scanning the content obvious places to stop.

Once you get into the actual prose, the hierarchy becomes smaller. Prose headings use prose h2 and --type-h3, at 22px to 28px. Component titles use .h3 and --type-h4, at 18px to 20px. They still provide structure, but they don’t compete with the main page title.

Then the type starts to recede.

Lead paragraphs use .lead--big and --type-lead, at 20px to 22px, because openings and introductions deserve a little more emphasis. .lead uses --type-body-lg at 18px for introductory copy. Regular body text uses .body-copy and --type-body at 16px, which is the standard reading size throughout the site. Small text, including buttons, captions and list items, uses --type-small at 14px.

That’s the whole system.

There isn’t a special size for every possible situation. There doesn’t need to be. The simplicity comes from deciding what each level is for and then using those decisions consistently.

Every size has a job

This is also where font choice comes in.

People often think choosing a typeface is mostly about personality. Does it feel modern? Warm? Serious? Interesting? Those things matter, but I start somewhere else: what does this typeface need to do?

On my site, Inter handles the structural work. It carries the headlines, paragraphs, interface elements, buttons and supporting text. It can work at 99px in a hero and 16px in a paragraph, which means I can create hierarchy through scale without having to introduce a different typeface every time I need something to feel different.

Then there’s Instrument Serif.

I use it as an editorial accent, in italic, once per page. It isn’t used for paragraphs or navigation, and it isn’t scattered through every heading. It’s there for a small moment of contrast.

That restraint matters. If everything is an accent, nothing is.

This is what a design system is actually doing

The interesting thing about a design system isn’t that it tells me to use 22px instead of 24px. It’s that I already made the decision.

I don’t have to ask myself every time I build a page how big a particular heading should be. The system has an answer. I don’t have to decide whether a paragraph should be 16px or 18px based on how I feel that day. The system has an answer. I don’t have to introduce another font because a particular section feels like it needs something new. The system has an answer.

That makes the design simpler.

It also makes the site more consistent, easier to maintain and much easier for someone else to work with. A design system takes a whole bunch of small decisions that would otherwise happen over and over again and makes them once.

That’s the real value.

Good hierarchy makes a page easier to understand

When hierarchy works, you don’t notice it. You just know where to look.

You see the headline and understand the subject. You scan the section headings and get a sense of what’s coming. You find the paragraph that looks worth reading. You notice the button when you’re ready to do something.

The design hasn’t made you work for any of it.

That’s the part I love about typography. The best result isn’t necessarily a beautiful font. It’s a page where the information feels obvious.

Where the eye can move through the content without having to stop and figure out what the designer was trying to do.

That is why I care so much about hierarchy. Not because I want every page to have perfect typography, but because I want every page to be easier to understand.

And sometimes the simplest design decision is simply deciding what matters most.

Sources: Nielsen Norman Group’s eye-tracking research on how people read and scan web content, including its F-Shaped Pattern study and follow-up research on text scanning patterns.

If this is the kind of thinking you want behind your own site, let’s talk.

Book a discovery call