Primary and secondary | Principles

The whole point of the design is to separate the primary from the secondary. In other words: focus users' attention on the main thing to get to the action or find the information they need as quickly as possible.

The essence of design is to highlight the primary and direct the user's focus on it.

Typography is part of the design, and it follows the same principles. We work with content and present it in an interface so that the user understands what is important on the screen at any given moment, how to find the main thing, and what needs attention right now.

All the blocks are uniform and there is no main one.

Good typography differs from bad typography in that users instantly understand what is important on the screen and omit the secondary until they need more detail. To achieve this is a real art and the highest class of designer.

All the headings are about the same size.

The main heading clearly stands out among the rest.

In user interfaces, the main things are headings, buttons, links, images, navigation, and controls. Secondary: text.

Sometimes text is primary in content-oriented interfaces, such as news sites, book reader apps, documentation, and long reads. And in that case, the text is really the most important thing; you have to put a lot of effort into it.

But in addition to content-oriented interfaces, there are countless other kinds of websites, applications, control panels, and different on-screen UI. The text has an auxiliary role in them, either a supplement to the main one or made for the robots. Unfortunately, the text in marketing sites is often for SEO, and no one reads it.

The text on the main page of stripe.com is definitely made for robots, with a separate link in almost every word. They know that no one will read the text, but without it, the design would not be complete.

We scan the headings, scroll quickly, look at the images, and sometimes look at the icons. Then we find a link or button and move on. It's the same with control panels: we scan the headings, look for the button with the desired action, and move on.

By understanding how users interact with the interface, we know how to create focus points so they can get what's important as easily and quickly as possible.

A card without a heading for the text looks secondary as a whole.

The title gives the card weight, meaning, and a point of focus.

Separating primary and secondary makes the interface more user-friendly and helps users make choices. Several tools and techniques in typography allow you to handle the relationship between primary and secondary. With these approaches, you can guide users' focus and attention.

Shape

The shape can create an accent and attract attention with its distinction. The most striking example of such a trick is the icon. It always attracts attention and focus, thereby significantly increasing the chances that the user will read or at least scan the text next to the icon.

Sometimes the shape can be pretty significant. It helps to create a focal point for the larger module.

The distinctive shape from the text directs attention to the whole module.

Color

Color enhances attention, especially if it is bright and contrasts the surroundings. Color is also used for practical purposes, such as indicating links in the text.

Color works not only in the text but also as a background accent. Highlighting the main block in the design with a background color helps users focus their attention and immediately see what's important.

Size

A large title relative to text is a classic example of separating the primary from the secondary. The heading is what users need to see first. It has the most important appeal and helps draw users in and direct them to further action or information.

The big heading is more important than the text.

The size helps to highlight the primary in small components. The label in the form is the main thing. It helps to understand what data to enter. The hint below the input field is secondary, and the user will not always refer to it.

The label is more important than the hint.

Weight

The font's weight helps direct the focus to what the user needs to see first. The secondary has less contrast, so a logical attention chain is built, with users reading what's in bold first and then moving on to the clarification.

Highlighting in bold directs the user's attention.

Mix

It is possible to use a mix of tools and apply several approaches simultaneously. For example, the shape and color of the label make a great accent and help to attract the user's attention.

Combinations of approaches and tools reinforce the focus on what's important.

Use different tools to separate the primary from the secondary in your design. Doing so will make the interface better and more user-friendly because you show immediately what is most important and where to start using the website or application.