Чтобы текст был разборчивым
Размер шрифта часто выбирают на глаз. В итоге текст кажется либо слишком мелким, либо крупным, не помещается в макет, спорит с визуалом или просто плохо читается. Универсального решения нет: один и тот же размер может быть уместен в интерфейсе и совершенно непригоден для презентации или карточек в соцсетях. Рассказываем, как выбрать размер букв с учётом носителя, дистанции и контекста использования.
Соотношение размера шрифта (кегля) и межстрочного интервала (интерлиньяжа). Оптимальная высота строки обычно составляет 120–150% размера шрифта. Слишком плотный текст затрудняет чтение, а слишком большое межстрочное расстояние визуально разрывает текст.
Длина строки. Рекомендуемая длина строки — около 45–75 символов, примерно 8–15 слов. Если строка слишком длинная, внимание сложно удерживать, а короткие строки вызывают частую перестановку взгляда.
Иерархия размеров. Заголовки принято делать в 1,2–2 раза больше основного текста, чтобы создать визуальную иерархию: сначала самые крупные, затем средние подзаголовки и обычный текст. Например, можно работать через множитель 1,5: если текст 16px, заголовок получится 24px. Но это не догма, пропорции можно варьировать под конкретную задачу и стиль макета.
Контраст и читаемость. Высокий контраст шрифта и фона, например, тёмный текст на светлом фоне, облегчает чтение. Яркие или шумные картинки на фоне осложняют восприятие мелкого шрифта, а низкая контрастность будет утомлять глаза.
Всё это — скорее рекомендации. Иногда правила можно нарушать.
Владелица дизайн-студии и школы karma.web
В основе всегда читаемость: кегль и интерлиньяж должны дружить (обычно беру 120–145% для текстовых блоков), шрифты не путаются между собой, заголовки выстроены логично. Главный принцип — один размер = одна роль, чтобы пользователь сразу понимал структуру.
Но на лендингах, обложках или в брендинге эти правила часто ломают. Там важнее эмоция, , а не вдумчивое чтение. Я также могу сжать интерлиньяж в крупном заголовке или сделать резкий контраст размеров — если это в характере бренда и не убивает главный посыл.
Основной текст должен быть максимально удобным для длительного чтения, это его основная задача.
Обычный размер. В вебе часто используют примерно 16px — около 12pt (типографских пунктов). Для печатных материалов традиционно берут 9pt –12pt, в зависимости от шрифта и целевой аудитории. Если аудитория старше или текст читают на расстоянии, например, в буклете или на плакате, лучше увеличить размер.
Пример шрифта в веб-пространстве вы видите, читая этот материал в «Конверте», а вот вариант в печати — традиционно более мелкий и плотный:
Межстрочный интервал. При большом объёме текста логично чуть увеличить межстрочный интервал (1,4–1,6 размера шрифта), чтобы абзацы «дышали» и глазу было легче следить за строкой.
Читаемость. Выбирайте шрифты с хорошей читаемостью. Отдавайте предпочтение гарнитурам с чёткими контурами букв или заметными засечками. Избегайте слишком тонких элементов, особенно при небольшом размере шрифта. Красивый декоративный шрифт нужно тестировать: он может хорошо выглядеть крупным, но стать неразборчивым в основном тексте. В большинстве случаев лучше отдавать препочтение простым качественным шрифтам.
Длина строк. Для основного текста следите за длиной строки (см. первый блок). Избигайте слишком широких колонок без разбивки (в газетах ширина колонки обычно 40–60 символов, в книгах — чуть больше). В адаптивном дизайне проверьте, чтобы на экранах разной ширины строки не становились слишком длинными или короткими.
Размер под аудиторию. Если текст рассчитан на людей с ослабленным зрением, детей или пожилых, учтите их потребность в более крупном шрифте и межстрочном расстоянии. Сделайте так, чтобы читатели могли масштабировать текст.
Заголовки привлекают внимание и структурируют контент, поэтому их размер должен явно выделяться. Они — основная навигация по макету, будь то печатное издание или лонгрид на сайте.
Владелица дизайн-студии и школы karma.web
Я всегда начинаю с задачи, а не с красоты. Сначала разбираюсь: что тут главное? Где человек сканирует, а где реально читает? Где принимает решение? Только потом подбираю размеры и жирность шрифта.
Проверяю просто: отхожу от монитора или уменьшаю макет до 20–30%. Если иерархия всё равно считывается — хорошо. Второй тест — пробежаться глазами только по заголовкам. Понятен смысл страницы? Значит, структура рабочая.
Основной заголовок. Обычно самый крупный шрифт в макете — в 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), чтобы текст масштабировался вместе с адаптивным макетом. Обратите внимание на качество рендеринга шрифта, то есть его финальной визуализации, в браузерах и ОС: гарнитуры с чёткими линиями и хорошим контрастом (жирностью) повышают читаемость на экране.
Владелица дизайн-студии и школы karma.web
Типичная ошибка — взяли десктопный макет и просто сжали под телефон. Иерархия при этом разваливается: заголовки мельчают, текст слипается, читать тяжело.
Вторая беда — не учитывают носитель. То, что нормально смотрится на экране, в печати может провалиться из-за кегля или контраста. Особенно часто вижу это в презентациях, которые изначально делали для показа, а потом распечатали и раздали.
Мобильные устройства. Поскольку экран маленький, элементы интерфейса должны быть крупнее. Для основного текста в мобильных приложениях рекомендуется не менее 14–15pt. Заголовки и кнопки делают ещё больше, а межстрочный интервал чуть шире, чтобы привлечь внимание и облегчить чтение на маленьком экране.
Печатные материалы. Помните об условиях чтения: мелкий шрифт (6–8pt) заметно усложняет чтение, особенно при плохом освещении. Для книг и журналов комфортными считаются 9–12pt с межстрочным интервалом около 130–150% от размера шрифта. Выбирайте размеры исходя из формата, вида шрифта и цели издания.
Большие форматы (плакаты, билборды, презентации). На больших носителях текст можно увеличить значительно, но нужно учесть расстояние до зрителя. Заголовки на плакате могут быть 72pt и больше, чтобы их было видно издалека. При этом у основного текста на больших форматах часто делают междустрочный интервал в сантиметрах — это помогает сохранить читаемость с любого ракурса.
Специальные задачи. Инфографика, табличные отчёты, приборные панели и другие узкоспециализированные задачи имеют свои нюансы. Например, в визуализации данных для акцента рисуют очень крупные цифры, а пояснения пишут маленьким шрифтом.
Пример инфографики-отчёта в печатном буклете, где есть пояснения к разделом, оформленные менее контрастным шрифтом, но читабельные и заметные:
В интерфейсах приборов текст может быть оптимизирован по технологическим требованиям. Главное — всегда тестировать конкретный случай: покажите макет людям, дайте им почитать и учтите пожелания, где скорректировать размер.
Присоединяйтесь к сообществу тех, кто делает маркетинг:
Поддерживаем друг друга мемами и здравым смыслом.
Искренние письма о работе и жизни, эксклюзивные кейсы и интервью с экспертами диджитала.
Проверяйте почту — письмо придет в течение 5 минут (обычно мгновенно)
33 слова о маркетинге 
