Books UI Typography Principles

Scanning and reading

Perhaps you've heard the saying, "People don't read the text on websites; they scan it." This is half true and depends on the website type and its information.

In control panels or dashboards, the text is captions, headings, indicators, tables, and navigation items. Basically, they are short texts and individual words that help to understand information and perform actions. In dashboards, the purpose of the text is to give the user a quick idea of a specific indicator or to direct a particular step in the shortest possible way.

People scan information and text on dashboards interfaces and marketing websites. Images by Arounda UI/UX and Taufiq Anshori.

It is the same with marketing and e-commerce sites. Users rapidly scan headings and images and scroll down the page. Text on them helps visitors quickly understand what is essential and emphasize call-to-actions.

But a website, like any other interface, is not just short texts and actions. In many cases, it is long texts, articles, online guides, and everything else that people read from the screen. In fact, visitors read from beginning to end, even very long stories.

People read long texts on websites. Images: example of an article on medium.com and the framer.com documentation page.

Building both types of interface differs from each other in many details and techniques. One uses focal points and accents to grab the visitor's attention and keep the focus on specific areas of the interface. On the other, it is a more vertical design that helps users focus on reading without being distracting.

People move from one focus point to the next by scanning the titles on a marketing website. By reading the article people are reading.

Two types of interfaces are on any screen. It can be an app on the phone, a watch screen, or a control display in a car. In a weather app, people quickly scan text and images. In a book app, they read the text.

People scan text in the weather app and read text in the reading app.

Often two types of information are combined in the same interface. For example, it can be a marketing cover of the homepage or dashboard screen, and inside behind a link or action will be an article, news, or documentation.

Working with typography is just as different as the overall design for each type of interface. When creating a design for displaying long texts, you use one set of techniques and typography parameters. If you are designing for scanning, you work with other methods. You use more color, more contrast for emphasis and attention, and care less about line length and the vertical rhythm of the text itself.

Typography differs depending on what design you're doing.

Typography sometimes varies depending on whether you are designing for scanning or reading. The task is easier if you only do an interface for one type. But if you need to do both, it is a bit more complicated, and you will probably need to make two typographic systems: one for scanning and accents and one for reading.

The typography system is not the same for different types of interfaces.

You'll need more contrasting headings for a landing page. A good heading hierarchy will help better separate the primary from the secondary, and visitors will more quickly see the focus points and move on to the desired action.

Contrast and size of headings are less critical in the design of a large article. The main thing is that they help separate or link different parts of the text and distinguish them from the body text itself. Their size to each other is not so important. Also, the body text of an article or online documentation can be much larger than on a marketing website or even more on dashboards.

So by understanding two kinds of interfaces, you know two types of typographic: for scanning and reading. This helps you set design goals better and see which methods and techniques will lead to results.

When creating typography for scanning, you need to focus your efforts on contrast, color, size, and all the other ways to achieve attention and emphasis. When creating typography for reading, it's crucial to think about the right body text size, line spacing, and how not to distract the user's attention while reading.

Prev

Next

Check out my other books

PDF Ebook

Web Interface Handbook

PDF Ebook

Designing Design Systems

User Interface Colors

Coming soon

User Interface Colors