Подписи в типографике
Узнайте, как использовать подписи, чтобы помочь пользователям быстрее просматривать страницу и получать ключевую информацию с первого взгляда.
Подписи к изображениям обычно остаются незаметными до тех пор, пока они не понадобятся. Но когда читатель останавливается, чтобы разобраться в иллюстрации или схеме, именно подпись даёт ему нужный контекст.
Они помогают быстрее сканировать страницу: взгляд цепляется за картинку, а короткий текст рядом поясняет, что на ней происходит, без необходимости вчитываться в основной материал.
Для пользователей скринридеров подписи часто становятся единственным способом воспринять визуальный контент. А при аккуратном типографическом оформлении они ещё и работают на общий стиль продукта, поддерживая визуальный язык бренда.
Назначение подписей
В типографической иерархии подписи занимают самую нижнюю ступень — их размер обычно меньше основного текста. Это логично: они не должны перетягивать внимание, но обязаны быть читаемыми, когда до них доходит дело.
Подпись — это краткое пояснение к визуальному контенту: кто на фото, что показано на графике, откуда взята иллюстрация. Иногда сюда же добавляют ссылку на автора или правообладателя.
Функции подписей:
- Точки входа. При беглом просмотре страницы взгляд цепляется за картинки, а подписи помогают быстро понять, о чём они и стоит ли читать дальше.
- Контекст для всех. Даже если изображение не загрузилось или пользователь не может его увидеть, подпись даёт недостающую информацию.
- Доступность. Люди с нарушениями зрения или когнитивными особенностями получают пояснения к визуальному ряду, который иначе был бы для них закрыт.
Совет! Подпись нужна не каждому изображению. Если картинка носит чисто декоративный характер и не несёт смысла — подпись можно опустить. Для всех содержательных изображений она обязательна.
Выбор шрифтов для подписей
Подписи живут на самом мелком размере в иерархии страницы — обычно от 6 до 9 пунктов. Поэтому главное требование к ним: шрифт должен оставаться читаемым даже в таких условиях. Вот на что обратить внимание при выборе:
- Свободный трекинг. В малых размерах буквы не должны слипаться. Немного увеличенный межбуквенный интервал поможет сохранить читаемость.
- Гротески предпочтительнее антикв. Шрифты без засечек (sans serif) при малых размерах обычно читаются лучше: тонкие засечки в антикве могут просто исчезнуть или начать мешать.
- Тонкие начертания. Парадоксально, но очень жирные шрифты в мелком кегле сливаются, а тонкие сохраняют чёткость. Выбирайте light или regular, не bold.
- Большая высота строчных (x-height). Чем выше очко строчных, тем крупнее выглядит буква при том же кегле.
- Открытые внутренние просветы (counters). У букв вроде «а», «е», «о» просветы должны быть хорошо различимы, иначе они превратятся в точки.
Стилизация подписей
Чаще всего подписи стараются делать минималистичными: чёрный или тёмно-серый текст рядом с изображением или под ним, чтобы не отвлекать от основного контента. Но дизайнерская задача часто шире, и хочется добавить визуального интереса.
Что можно делать:
- Экспериментировать с цветом, используя светлые оттенки на тёмных фонах
- Добавлять появление подписи при наведении — это экономит пространство и создаёт интерактивность
- Играть с контрастными начертаниями
Чего стоит избегать:
- Курсив в мелком размере плохо читается, особенно людьми с дислексией. Если нужно выделить подпись, лучше использовать жирное начертание или другой цвет
- Слабый контраст — главный враг доступности. Даже если подпись кажется вам «воздушной», проверьте её по WCAG: текст на фоне должен уверенно читаться
Главный принцип: какой бы стиль вы ни выбрали, подпись должна оставаться функциональной. Визуальные эксперименты хороши до тех пор, пока не начинают мешать восприятию.
Размер подписей
Подписи находятся на нижнем уровне типографической иерархии, поэтому их задача — быть заметно меньше основного текста, но при этом оставаться читаемыми.
Хорошее практическое правило: делать подписи примерно на 2 пункта меньше базового размера шрифта. Например, если основной текст набран 16px, подпись можно задать 14px. Этого снижения достаточно, чтобы визуально отделить подпись от основного контента, но не настолько, чтобы текст перестал читаться.
Если сделать подписи крупнее, они начнут конкурировать с обычным текстом, нарушая иерархию. Слишком мелкие — потеряют читаемость, особенно на мобильных устройствах. Ориентируйтесь на контраст размеров, но не в ущерб доступности.
Расположение подписей
Главная задача подписи — сопровождать визуальный контент, а не конкурировать с ним. Именно поэтому оптимальное место для подписи — непосредственно под изображением, фотографией или иллюстрацией.
Такое расположение решает сразу две задачи:
- Не отвлекает. Пользователь сначала воспринимает картинку, а если нужны пояснения — опускает взгляд чуть ниже и находит подпись. Она не мешает и не перетягивает внимание на себя.
- Создаёт чёткую связь. Расположение «под» визуально закрепляет за подписью конкретное изображение. Даже при беглом просмотре понятно, к чему относится текст.
Любые эксперименты с расположением (сбоку, внутри изображения, при наведении) возможны, но требуют осторожности. Главное, чтобы пользователь без усилий понимал, какой именно визуальный элемент сопровождает подпись.
Доступность подписей
У подписей и alt-текста похожая задача — помогать пользователям воспринимать визуальный контент. Но работают они по-разному.
Alt-текст — это служебный атрибут для скринридеров. Когда изображение не загрузилось или пользователь не видит его, программа озвучивает alt-текст, объясняя, что изображено. Пользователи с обычным зрением alt-текст не видят.
Подпись — это видимый элемент интерфейса. Её читают все, и она даёт контекст, который не всегда очевиден из картинки.
Как не дублировать информацию. Если подпись уже подробно описывает изображение, alt-текст можно сделать коротким или даже пустым (для декоративных картинок). И наоборот: когда подпись минимальна, alt-текст берёт на себя развёрнутое описание.
Особый случай — сложные изображения. Графики, диаграммы, инфографики несут много данных, которые невозможно передать одной фразой. Здесь подпись нужна обязательно, а в идеале — ещё и расшифровка ключевых показателей в основном тексте или в том же alt-тексте, если подпись не справляется.
Совет! Если подпись получилась развёрнутой, alt-текст можно сделать кратким — просто обозначить тип изображения или основные выводы. Главное, чтобы пользователи скринридеров не слушали одно и то же дважды.
Регистр для подписей
Любой текст длиннее 2–3 слов, набранный прописными буквами, начинает восприниматься как крик. Но дело не только в эмоциональной окраске — такой текст объективно сложнее читать.
Почему так происходит? Есть несколько объяснений. Самое распространённое: при чтении мы распознаём не отдельные буквы, а целые слова по их силуэту — характерным выступам верхних и нижних выносных элементов. В тексте, набранном капсом, все слова превращаются в прямоугольники одинаковой высоты, и этот естественный паттерн распознавания перестаёт работать.
Кроме того, скринридеры часто читают текст в верхнем регистре побуквенно, что создаёт дискомфорт для пользователей с нарушениями зрения.
Что это значит для подписей. Верхний регистр допустим для коротких фраз: заголовков, кнопок, меток. Но для подписей, которые могут состоять из нескольких слов, это плохой выбор. Они станут труднее читаться и потребуют от пользователя лишних усилий.
Лучшее решение. Предложный регистр (первое слово с заглавной, остальные со строчной) выглядит естественно и привычно — именно так мы читаем обычный текст. Подписи в таком регистре не привлекают излишнего внимания, но остаются доступными и понятными.
Совет! Заглавный регистр (Title Case) оставьте для заголовков и акцентных элементов. Для подписей он избыточен и нарушает типографическую логику.
