Как выбрать размер шрифта для разных задач

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

Базовые правила типографики

Соотношение размера шрифта (кегля) и межстрочного интервала (интерлиньяжа). Оптимальная высота строки обычно составляет 120–150% размера шрифта. Слишком плотный текст затрудняет чтение, а слишком большое межстрочное расстояние визуально разрывает текст.

Длина строки. Рекомендуемая длина строки — около 45–75 символов, примерно 8–15 слов. Если строка слишком длинная, внимание сложно удерживать, а короткие строки вызывают частую перестановку взгляда.

Иерархия размеров. Заголовки принято делать в 1,2–2 раза больше основного текста, чтобы создать визуальную иерархию: сначала самые крупные, затем средние подзаголовки и обычный текст. Например, можно работать через множитель 1,5: если текст 16px, заголовок получится 24px. Но это не догма, пропорции можно варьировать под конкретную задачу и стиль макета.

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

Всё это — скорее рекомендации. Иногда правила можно нарушать.

Размер шрифта для основного текста

Основной текст должен быть максимально удобным для длительного чтения, это его основная задача.

Обычный размер. В вебе часто используют примерно 16px — около 12pt (типографских пунктов). Для печатных материалов традиционно берут 9pt –12pt, в зависимости от шрифта и целевой аудитории. Если аудитория старше или текст читают на расстоянии, например, в буклете или на плакате, лучше увеличить размер.

Пример шрифта в веб-пространстве вы видите, читая этот материал в «Конверте», а вот вариант в печати — традиционно более мелкий и плотный:

Межстрочный интервал. При большом объёме текста логично чуть увеличить межстрочный интервал (1,4–1,6 размера шрифта), чтобы абзацы «дышали» и глазу было легче следить за строкой.

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

Длина строк. Для основного текста следите за длиной строки (см. первый блок). Избигайте слишком широких колонок без разбивки (в газетах ширина колонки обычно 40–60 символов, в книгах — чуть больше). В адаптивном дизайне проверьте, чтобы на экранах разной ширины строки не становились слишком длинными или короткими.

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

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

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

Основной заголовок. Обычно самый крупный шрифт в макете — в 1,5–2 раза больше основного текста. Например, если основной текст 12pt, заголовок статьи может быть 18pt. Заголовок должен быть заметным, но при этом гармонировать с общим стилем страницы.

Подзаголовки. Подзаголовки отделяют разделы и абзацы. Часто подзаголовок делают примерно на 20–50% больше основного текста (например, 15–18pt при тексте 12pt). При этом они должны ощутимо отличаться от заголовка и быть мельче, чтобы не возникло путаницы.

Хороший пример иерархии из Telegram-канала Яндекс Путешествий:

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

Мелкий текст и дополнительные надписи

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

Подписи и сноски. Берите размер около 80–90% от основного текста (например, 9–10pt при основном тексте 12pt). Такой текст меньше по кеглю, но должен оставаться разборчивым. В печатных материалах для сносок иногда используют курсив или чуть более светлый цвет, чтобы не отвлекать внимание от главного содержания.

Мелкий служебный текст. Номера страниц, оглавление, другие подписи обычно делают немного меньше основного, но не меньше примерно 8–10pt в печати (или 11–12px в вебе). Если слишком уменьшить, это серьёзно осложнит чтение.

Иконки и кнопки. Текст на кнопках и пиктограммах тоже важен для пользователя. На современных устройствах размер шрифта для подписи кнопки лучше держать не меньше 14–16px. Пользователи должны легко находить такие элементы и нажимать на них, не промахиваясь.

Пример кнопок с понятными шрифтами на лендинге буткемпа Авито:

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

Шрифты для разных сред

Контекст чтения, как правило, меняет требования к размеру и интервалам шрифта.

Цифровые экраны. На сайтах, в приложениях или на электронных табло шрифт часто воспринимается мельче, чем на бумаге. Поэтому для продолжительного чтения обычно выбирают не менее 12pt. В веб-дизайне удобно использовать относительные единицы (em/rem), чтобы текст масштабировался вместе с адаптивным макетом. Обратите внимание на качество рендеринга шрифта, то есть его финальной визуализации, в браузерах и ОС: гарнитуры с чёткими линиями и хорошим контрастом (жирностью) повышают читаемость на экране.

Мобильные устройства. Поскольку экран маленький, элементы интерфейса должны быть крупнее. Для основного текста в мобильных приложениях рекомендуется не менее 14–15pt. Заголовки и кнопки делают ещё больше, а межстрочный интервал чуть шире, чтобы привлечь внимание и облегчить чтение на маленьком экране.

Печатные материалы. Помните об условиях чтения: мелкий шрифт (6–8pt) заметно усложняет чтение, особенно при плохом освещении. Для книг и журналов комфортными считаются 9–12pt с межстрочным интервалом около 130–150% от размера шрифта. Выбирайте размеры исходя из формата, вида шрифта и цели издания.

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

Специальные задачи. Инфографика, табличные отчёты, приборные панели и другие узкоспециализированные задачи имеют свои нюансы. Например, в визуализации данных для акцента рисуют очень крупные цифры, а пояснения пишут маленьким шрифтом.

Пример инфографики-отчёта в печатном буклете, где есть пояснения к разделом, оформленные менее контрастным шрифтом, но читабельные и заметные:

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

Чек-лист по выбору шрифта

• Подходите к выбору размера шрифта с точки зрения удобочитаемости и иерархии информации.
• Основной текст должен быть комфортным для чтения на предполагаемом устройстве или носителе (в вебе – обычно ≥16px, в печати – примерно 10–12pt, если нет особых условий).
• Заголовки и акценты делайте заметно больше основного текста, но сохраняйте единый подход к масштабированию (например, кратные шаги или множитель 1,25–1,5).
• Межстрочный интервал задавайте чуть больше размера шрифта (обычно 1,2–1,5×), чтобы строки не «слипались» и текст хорошо читался.
• Контролируйте длину строки (~50–70 символов), чтобы глаз удобно переходил от конца строки к началу следующей.
• Учитывайте аудиторию и контекст: для детей, пожилых или людей с ослабленным зрением выбирайте более крупный шрифт и простор между строками.
• Протестируйте макет, попросите отзывов и корректируйте размеры в зависимости от реального восприятия и задач проекта.