Почему типографика на сайте работает против вас

Давайте поговорим честно: когда вы в последний раз замечали, насколько удобно читать текст на сайте? Не анимации, не цветовую схему — а именно то, как расположены буквы и строки.

У большинства разработчиков типографика — это что-то вроде пункта в чеклисте, который нужно быстро закрыть. Выбрал шрифт из Google Fonts, поставил 16 пикселей для основного текста, может быть, чуть подправил межстрочный интервал — и всё. Но правда в том, что именно то, как текст «лежит» на странице, определяет: прочитает ли посетитель материал или закроет вкладку через три секунды.

После того как я увидел, как снова вспыхнул интерес к классическим типографским принципам, я задумался об этом всерьёз. Лучшие сайты, которые я недавно встречал, совсем не похожи на модные SaaS-продукты с кучей градиентов. Они напоминают хорошо свёрстанные книги — с текстом, который дышит, плавно ведёт глаз и уважает читателя.

Один шрифт — и точка

Один из самых неочевидных принципов современной веб-типографики: меньше шрифтов — лучше результат.

Роберт Бринхарт в своей книге «Основы типографики» — настольной библии для печатных дизайнеров — советует выбрать один универсальный шрифт вместо десятка разнородных. На практике же разработчики часто делают наоборот: один шрифт для заголовков, другой для текста, третий для кода. В итоге на сайте оказывается пять гарнитур только потому, что «так разнообразнее».

Но вот что интересно: самые продуманные сайты обычно используют одно семейство шрифтов с разными начертаниями. Нужно выделить важное — возьмите жирный или курсив. Нужен визуальный порядок — играйте размером и весом, а не подсовывайте другой шрифт.

Результат получается удивительно гармоничным. Глаз скользит по странице без рывков, потому что все буквы «родственники». Контраст между жирным заголовком и обычным текстом ощущается продуманным, а не случайным.

Когда вы находите шрифт вроде Alegreya, Source Serif или даже старую добрую Georgia, у которых есть несколько весов, оптические размеры и варианты с малыми прописными — считайте, вам досталась готовая дизайн-система, которую не нужно собирать по кусочкам.

Относительные единицы: масштаб без боли

Быстрый вопрос: что происходит с типографикой вашего сайта, когда пользователь увеличивает масштаб браузера до 150%? Если везде стоят пиксели — ответ: ничего хорошего. Текст остаётся мелким, вёрстка разъезжается, а людям с особенностями зрения становится грустно.

Умный подход — выстроить всю систему размеров на относительных единицах. Большинство разработчиков знают про rem, но важна не столько syntax, сколько философия.

Когда вы привязываете всё к корневому размеру шрифта (обычно 16px), весь дизайн масштабируется пропорционально. Поменяли корень — и всё подстраивается. Это не только про адаптивность — это про то, чтобы дать пользователю контроль. Человеку, которому нужен крупный текст, он и будет крупным по всему сайту, без прорех и нестыковок.

:root {
  font-size: 16px; /* База */
  line-height: 1.5;
}

h1 { font-size: 2.5rem; }     /* 40px */
h2 { font-size: 1.75rem; }    /* 28px */
p  { font-size: 1.125rem; }   /* 18px */
small { font-size: 0.875rem; } /* 14px */

Обратите внимание: всё подчиняется математике. Это не случайность — это фундамент системы, которая ощущается единой, а не собранной на глаз.

Выключка по формату: стоит ли связываться

Давайте разберёмся с главным спором: можно ли выравнивать текст по обеим сторонам?

Классический ответ — нет. «Так образуются белые реки», — предупреждают знатоки. «На экране это выглядит ужасно.» И годами они были правы: браузеры плохо справлялись с выключкой, оставляя рваные края и неравномерные пробелы между словами.

Но случился поворот: современные браузеры научились работать с этим заметно лучше.

Теперь свойства text-wrap: pretty, hyphens: auto и text-align: justify позволяют получить блоки текста, почти неотличимые от печатных. Ключ — в контроле переносов.

p {
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 2;
}

Работает идеально каждый раз? Нет. Узкие колонки с длинными строками всё ещё могут выдавать некрасивые промежутки. Но для текста средней ширины, где контента больше, чем интерфейса — это вполне жизнеспособный вариант.

Почему это важно? Выключенный текст создаёт чистые вертикальные границы. Абзацы выглядят аккуратно, а не неряшливо. Это сигнал: здесь думали о деталях.

Красная строка: забытая практика, которая заслуживает возвращения

Вот приём, который веб давно забросил, а зря: отступ первой строки нового абзаца вместо пробелов между абзацами.

Веками печатники делали именно так. Между абзацами не было пустого пространства, зато первая строка нового фрагмента отступала примерно на один em. Предыдущий абзац — без отступа. А этот? С отступом.

Почему это работает? Так сохраняется визуальная непрерывность, но при этом абзацы разделены. Глаз скользит по тексту без раздражающих пауз, которые создаёт вертикальный отступ. Для сайтов с плотным контентом — блогов, документации, длинных статей — такой подход выглядит утончённо и продуманно.

p + p {
  text-indent: 1.5em;
  margin-top: 0;
}

Да, это ломает привычные веб-конвенции. Да, некоторые пользователи могут удивиться. Но если хочется типографики, которая бережёт внимание читателя и говорит «здесь всё сделано с заботой» — стоит попробовать.

Итог: типографика — это не мелочь

Каждый пиксель на странице — это решение. Каждый межстрочный интервал, каждый размер шрифта, каждая щель между элементами либо помогает читать, либо мешает.

Лучшие сайты выглядят не просто красиво — с ними удобно. Текст течёт. Иерархия понятна, но не кричит. Страница бережёт и время, и глаза.

Такая точность не появляется случайно. За ней стоят разработчики и дизайнеры, которые разбираются в основах, изучали, что столетиями знали печатники, и применяют эти знания к программируемому холсту — вебу.

Поэтому в следующий раз, когда будете стилизовать новый проект, не копируйте CSS reset и не останавливайтесь. Спросите себя: удобно ли это читать? Выглядит ли это качественно? Уважает ли это контент и читателя?

Если ответ нет — возможно, пора вернуться к основам и вспомнить, почему типографика вообще имеет значение.