Типографика сайта: как выбрать шрифты и размеры текста

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

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

Сначала определите задачу текста

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

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

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

Как выбрать шрифт для сайта

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

Проверьте поддержку кириллицы, если она нужна проекту, включая «ё», цифры и специальные символы. Отсутствующие знаки браузер может отобразить запасным шрифтом: в результате отдельные буквы будут отличаться по форме и ширине. Откройте страницу с реальными текстами и отключите загрузку шрифта, чтобы увидеть запасной вариант.

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

Одна гарнитура или сочетание нескольких

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

Размер основного текста: выберите базу и проверьте её

Хорошая отправная точка для основного текста — 1rem, то есть размер относительно корневого элемента страницы. Во многих браузерных настройках исходное значение соответствует 16 CSS-пикселям, но пользователь может изменить свои настройки. Поэтому не стоит считать конкретное число гарантированным размером для всех.

Откройте несколько абзацев на телефоне и ноутбуке: не приходится ли приближать текст, достаточно ли заметны ссылки и подписи? Сравнивайте разные размеры в настоящем интерфейсе с выбранным шрифтом. Две гарнитуры при одинаковом CSS-размере могут восприниматься по-разному из-за формы и пропорций букв.

Не делайте важные условия или сообщения об ошибках слишком мелкими ради компактности. Если подпись нужна для выполнения действия, она должна оставаться читаемой и при увеличении масштаба. Не отключайте возможность масштабирования страницы пользователем.

Постройте иерархию заголовков

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

В учебном примере основной текст имеет размер 1rem, заголовок раздела — около 1.5rem, а крупный заголовок страницы может плавно меняться в ограниченном диапазоне. Это не требование к дизайну: проверьте, помещается ли реальный заголовок на узком экране и не теряется ли различие между уровнями.

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

Проверка на длинном заголовке

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

Межстрочный интервал и ширина колонки

Для основного текста можно начать с межстрочного интервала около 1.5 и отрегулировать его по реальному шрифту и длине строк. Заголовкам часто подходит более плотный интервал, но строки не должны соприкасаться или терять читаемость. Проверяйте текст с буквами, выходящими за основную линию, и разными знаками.

Слишком широкая колонка заставляет искать начало следующей строки, а слишком узкая создаёт много переносов. В качестве рабочего ориентира можно попробовать ограничение около 65ch для текстовой области и проверить результат на содержимом. Единица ch не означает точное количество любых букв в строке, поэтому число нельзя считать жёстким правилом.

Оставляйте различимые интервалы между абзацами, заголовками и связанными с ними блоками. Проверяйте списки, таблицы и цитаты: значения, хорошо выглядящие в обычном абзаце, не всегда подходят каждому компоненту.

Контраст, ссылки и доступность

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

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

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

Практический пример CSS

Ниже — небольшой пример для страницы статьи. Он использует системный стек и не требует загрузки файла шрифта. Размеры и ширину нужно проверить на своём контенте; значения внутри clamp() задают нижнюю границу, предпочтительное значение и верхнюю границу.

body {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #1c252b;
  background: #fff;
}

.article {
  max-width: 65ch;
  margin-inline: auto;
  padding-inline: 1rem;
}

.article h1 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  line-height: 1.2;
}

.article h2 {
  font-size: 1.5rem;
  line-height: 1.25;
}

Это учебный фрагмент, а не полная таблица стилей: ему нужны подходящие HTML-элементы и контейнер с классом article. После внедрения проверьте реальный контраст выбранных цветов, длинные строки, масштабирование и состояние ссылок. Не переносите стили в существующую тему без проверки возможных конфликтов.

Загрузка шрифтов и запасной вариант

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

Сократите ненужное число начертаний и файлов, но не удаляйте символы, необходимые содержанию. Оцените сетевые запросы и отображение страницы в условиях, похожих на реальные. Вопросы размещения файлов, обновления и лицензии закрепите за ответственным за сайт.

Типичные ошибки

• Выбирать гарнитуру только по крупному заголовку и не проверять абзацы, цифры и кириллицу.
• Использовать слишком много размеров и начертаний без понятных ролей.
• Уменьшать важные подписи и условия, чтобы карточки выглядели одинаковыми.
• Задавать тексту фиксированную высоту и скрывать переполнение при увеличении масштаба.
• Размещать светлый текст на изменяющемся изображении без проверки контраста.
• Забывать запасной шрифт, лицензию и проверку медленной загрузки.

Типографика взаимодействует с компоновкой: на телефоне меняются ширина строки и переносы. Порядок проверки разных экранов описан в статье об адаптивном дизайне; для меню и ссылок полезно отдельно проверить навигацию сайта.

Чек-лист перед публикацией

1. Определены роли текста и выбрана гарнитура с нужными символами и лицензией.
2. Основные абзацы, заголовки, ссылки, подписи и ошибки проверены на реальном контенте.
3. Иерархия заметна, а HTML-заголовки отражают структуру документа.
4. Длина строк, интервалы и отступы проверены на телефоне и широком экране.
5. Контраст и видимость ссылок и фокуса проверены на фактическом фоне.
6. При увеличении масштаба текст не обрезается и действия остаются доступными.
7. Проверены запасной шрифт и отображение при недоступной загрузке файла.

Начните с одной страницы с реальными текстами и проверьте её в нескольких состояниях. Затем перенесите согласованные роли и значения на остальные шаблоны, повторно проверяя компоненты с длинным содержимым.