How to make a readable interface without a designer: typography and indentations

Imagine you’re doing an admin, an internal service, or a small SaaS interface. Functionality works, API is configured, data is displayed. But the interface looks strange - the text is dense, the blocks are chaotic, and it is difficult to read the page.

This happens almost always for one reason: bad typography and chaotic indentations.

In practice, a good interface consists of 70-80% of the basic text structure

• font size
• line interval
• line length
• headline-hierarchy
• blockage

If these elements are configured correctly, the interface automatically becomes neat and understandable – even without the involvement of the designer.

In this article, we will examine:

• what text sizes to use in interfaces
• what line spacing makes the text readable
• why does line length affect UX
• how to build a hierarchy of headlines
• how to correctly indent
• common interface errors

---

## Why readability is the basis of the interface

The user does not read the interface like a book. He's scanning the page with his eyes.

He's trying to figure it out quickly

• where the section begins
• wherein
• action

If the text structure is weak, the brain spends more energy processing information. The interface begins to seem complicated, even if the functionality itself is simple.

Therefore, UX practitioners pay great attention to basic typography: text size, line spacing and header structure.

---

## Basic size of interface text

The first rule of a readable interface is **normal text size.

In modern web interfaces, 16 px for main text is considered standard because this size is comfortable to read on most screens.

### Typical size scale

Элемент интерфейса	Размер
H1 — заголовок страницы	28–32 px
H2 — раздел	22–24 px
H3 — подзаголовок	18–20 px
Основной текст	16 px
Дополнительный текст	14 px
Подписи	12–13 px

This scale creates a visual hierarchy. The user immediately understands where the main title, where the section, and where the explanation.

---

## Interline spacing: why the text should "breathe"

Even a good font size will not save text if the lines are too close together.

Modern guidelines for the availability of interfaces advise using line-height about 1.5 of the text size.

For example:

Размер текста	Рекомендуемый line-height
16 px	24 px
18 px	27 px
20 px	30 px

This spacing creates a comfortable distance between the lines and makes reading easier.

If the interval is less:

• lines begin to merge
• eye loses line

If it's too big:

• text looks torn
• the block structure is blurring.

---

## Line length: a rule that is often ignored

Many interfaces suffer from too long lines of text.

When a line is too wide, it is difficult for the eye to find the beginning of the next line.

Typography studies show that optimal line length is approximately 50-75 characters.

This value is considered comfortable to read and reduces the load on the eyes.

### Recommended line length

Тип текста	Оптимальная длина
Основной текст	60–70 символов
Документация	60–75 символов
Боковые панели	45–60 символов

If the line is longer:

• user loses a line more often
• reading
• the text seems overloaded.

---

## Text Hierarchy: How the User Understands the Interface

A good interface can be understood in a few seconds.

This is achieved through a typographic hierarchy.

It shows the user:

• that
• where the new section begins
• where additional information is available.

### A Simple Interface Hierarchy

Уровень	Назначение
H1	название страницы
H2	раздел
H3	блок внутри раздела
Body	основной текст
Caption	пояснения

It is important that the differences between levels are noticeable:

• size
• fattyness
• the distance between the blocks.

If all texts look the same, the interface becomes a dense wall of text.

---

## Retreats are half of visual design

Even with good typography, the interface can look chaotic.

The reason is almost always the same – random indentations.

For example:

• one block has a 14px indentation
• 23px
• third 29px

Such values create visual noise.

The solution is to use the ** indentation system**.

The most common system is the **8-pixel grid.

### Basic indentation system

Уровень	Значение
XS	4 px
S	8 px
M	16 px
L	24 px
XL	32 px
XXL	48 px
XXXL	64 px

When all the indentations are multiples of one grid, the interface automatically becomes neat and predictable.

---

## Vertical rhythm of the interface

Vertical rhythm is the distance between the elements of the page.

It helps the user quickly understand the structure of the interface.

### Typical block structure

Элемент	Отступ
Заголовок → текст	16 px
Текст → кнопка	24 px
Блок → следующий блок	32 px
Раздел → раздел	48–64 px

When such distances are repeated throughout the page, the interface becomes visually stable.

---

## Typical interface errors

### Too little text

Ошибка	Почему плохо
12px основной текст	тяжело читать
слишком мелкие подписи	ухудшают доступность

### Thick text

Ошибка	Почему плохо
line-height около 1.1	строки слипаются
одинаковый интервал для всего	текст трудно сканировать

### The huge width of the text

Ошибка	Почему плохо
текст на всю ширину экрана	глаз теряет строку

### Accidental indentations

Ошибка	Почему плохо
13px, 21px, 27px	интерфейс выглядит хаотично

---

## Outcome

For an interface to look professional, you don’t have to be a designer.

It is enough to follow a few basic principles.

Принцип	Рекомендация
Размер текста	около 16px
Межстрочный интервал	около 1.5
Длина строки	50–75 символов
Иерархия	H1 → H2 → H3
Отступы	система 8px

These rules are used in almost all modern design systems and allow you to create interfaces that are easy to read and quickly perceived.