# Типографика на сайте: правила, которые видно сразу

29 октября 2026 г. · 3 мин чтения · Студия AETHER · https://aether-studio.ru/blog/tipografika-na-sajte

Типографика — это не выбор шрифта, а то, как текст расставлен на странице: каким размером, в какую ширину, с какими интервалами и знаками. Хорошую типографику не замечают — текст просто легко читать. Плохую замечают все, даже если не могут объяснить, что не так. Разбираем правила, которые проще всего проверить на своём сайте.

## Шрифт и типографика

Шрифт — это рисунок букв. Как его выбрать и сочетать, разобрано в статье [«Шрифты для сайта»](https://aether-studio.ru/blog/shrifty-dlya-sajta). Типографика — то, как этим шрифтом набран текст: размер, длина строки, интервалы, заголовки, знаки препинания. Одним и тем же шрифтом можно набрать текст, который читается легко, а можно — такой, который бросают на втором абзаце.

## Размер текста

- **Основной текст.** Привычный ориентир — 16–18 пикселей, а точнее подбирают по шрифту: у одних шрифтов буквы при том же размере заметно крупнее, чем у других.
- **Подписи и примечания** — мельче, но не для важного: цены, сроки и условия мелким шрифтом выглядят как попытка что-то спрятать.
- **Поля ввода на телефоне** — не меньше 16 пикселей. Иначе iPhone при нажатии на поле увеличивает страницу, и она «прыгает».

## Длина строки

Удобная длина строки — 45–75 знаков. Если строка короче, глаз слишком часто перескакивает на новую. Если длиннее, он теряет начало следующей. На широком мониторе текст во всю ширину экрана превращается в ленту по 150 знаков, и читать её тяжело.

Поэтому колонку текста ограничивают по ширине — даже если сам сайт растянут на весь экран.

## Интервалы

- **Между строками** основного текста — 1,4–1,6 от размера шрифта. Тесный текст сливается, слишком разреженный рассыпается на отдельные строки.
- **У заголовков** интервал плотнее — 1,1–1,25: крупные строки с большими промежутками выглядят разорванными.
- **Между абзацами** — заметно больше, чем между строками: абзац должен читаться как отдельный блок.

## Заголовки и иерархия

- **Уровни заметно отличаются** размером, жирностью, отступами. Если заголовок второго уровня почти не отличается от третьего, структура не читается.
- **Отступ над заголовком больше, чем под ним.** Так видно, что заголовок относится к тексту ниже, а не выше.
- **Два-три уровня** на странице обычно хватает.
- **Заголовок короткий** — одна-две строки, без точки в конце.

## Выравнивание

- **Текст — по левому краю.** По ширине на сайте выравнивать не стоит: браузер растягивает пробелы, и на узком экране телефона между словами появляются дыры.
- **По центру** — только короткие заголовки и подписи, не абзацы.
- **Заглавными буквами** — только короткие подписи и кнопки: целый абзац заглавными читается медленнее.

## Знаки: кавычки, тире, пробелы

| Знак | Как правильно |
| --- | --- |
| Кавычки | «Ёлочки» в русском тексте, „лапки“ — для кавычек внутри кавычек |
| Тире | Длинное тире с пробелами вокруг: «Сайт — это инструмент» |
| Дефис | Внутри слов, без пробелов: «интернет-магазин», «какой-то» |
| Диапазон | Короткое тире без пробелов: 10–15 дней, 30 000–70 000 ₽ |
| Неразрывный пробел | Между числом и единицей — 5 дней, 30 000 ₽ — и после коротких предлогов, чтобы «в», «на» и «и» не оставались в конце строки |

Расставлять всё это вручную не обязательно: есть бесплатные сервисы-«типографы», которые сами меняют в тексте кавычки, тире и пробелы.

## Частые ошибки

- **Светло-серый тонкий текст** на белом фоне: на макете изящно, на телефоне на солнце не прочитать.
- **Подчёркнутый текст, который не ссылка**, — на него будут нажимать.
- **Много размеров и начертаний** на одной странице — текст выглядит пёстрым. Набор размеров стоит зафиксировать один раз — это часть дизайн-системы, о ней статья [«Дизайн-система»](https://aether-studio.ru/blog/dizajn-sistema).
- **Абзацы-простыни** без подзаголовков и списков.
- **Прямые кавычки "так"** и дефисы вместо тире.

## Как это устроено у нас

В статьях нашего блога основной текст набран с интервалом 1,55, заголовки — 1,15–1,2, а колонка текста не растягивается на всю ширину экрана. Неразрывные пробелы ставит сам сайт: при выводе статьи он склеивает число со словом и знаком рубля и не даёт коротким предлогам и союзам остаться в конце строки.

## Как мы делаем это для клиентов

Шрифты, размеры и интервалы задаём в собственном дизайне сайта — для компьютера и отдельно для телефона — и показываем в макете до начала вёрстки.

**Услуга «Лендинг»:** от 4 рабочих дней, от 30 000 ₽, обычно 30 000–70 000 ₽. Подробнее: https://aether-studio.ru/services/landing

**Обсудим ваш сайт.** Ответим в течение рабочего дня, зададим несколько вопросов и назовём вилку по сроку и бюджету. Бесплатно и без обязательств. Написать: [Telegram @aether_agency](https://t.me/aether_agency), почта aether-studio@mail.ru, форма — https://aether-studio.ru/#contact.