Типографика digital-продукта

Как собрать систему текстовых стилей сложного сервиса, не уходя в крайности.

Таблица текстовых стилей проекта

Что мы здесь видим

— назначение стилей (тег, ссылка, служебный заголовок);
— семейства и плотности, типа Fira Sans Light, PT Serif Bold;
— кегли и межстрочные расстояния;
— цвет шрифта;
— отступы до и после текстового блока;
— предполагаемое количество колонок для текстового контейнера;
— и всё это для десктопа, планшетов и мобильных устройств.

Используйте минимум текстовых стилей для закрытия максимума нужд

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

Двух семей достаточно

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

PT Serif Bold и Fira Sans Regular вполне дружат семьями

Осторожнее с чёрным!

Я практически не использую чистый чёрный для наборного текста, да и для заголовков крайне редко. В мелком кегле чёрный текст смотрится резковато, на мой вкус. Такое впечатление, что чуть просветли его — и станет легче читать. Люблю использовать серый плотности 70–80% в зависимости от толщины штрихов букв и межбуквенных просветов. На примере выше параграф набран серым плотности 75%.

Два заголовка с разной степенью уверенности

Без оттенков серого не обойтись

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

UI-кит, палитра цветов

Меньше кеглей!

Обычно количество кеглей для разных стилей текстовых блоков меньше самого количества стилей, то есть на одном кегле можно вырастить несколько стилей. Например, для десяти стилей я использую всего шесть кеглей: 15, 18, 24, 30, 60, 100. Заметили, что часть их лежит в геометрической прогрессии — х, 2х, 4х? Мне кажется, что следование таким простым схемам порождает более гармоничные композиции, как шрифтовые, так и просто графические.

Различные кегли и цвета текста помогают в построении иерархии страницы

Задайте систему отступов

Такова же ситуация с отступами до и после текстовых блоков — они составляют 20, 40, 60 либо 100 пкс. Эти отступы не стыкуются, а больший поглощает меньший. Причём отступ «заголовок- графика» может отличаться от отступа «заголовок-текст». В UI-ките я указываю отступы каждому компоненту любого уровня сложности — от кнопки и чекбокса до виджета карточки статьи или модуля подписки.

Отступы текстовых блоков

Локализуйте стили для разных устройств

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

Проектируйте на самый частый случай, не забывайте про крайние.

Я не раз замечал чересчур навязчивое отношение к длинным фамилиям, заголовкам или пустым состояниям. Да, такие вещи случаются, и чаще в UGC-контенте. Но нельзя строить основные макеты на основе крайних примеров. Изучите стиль заголовков на проекте и под наиболее возможный вариант делайте лучший вид макета. Сделайте основной макет для имён типа Москва и Санкт-Петербург, но продумайте, как в дизайн встроятся Рим и Комсомольск-на-Амуре. Также помните про языковые локализации — надписи в кнопках могут быть особо проблемными.

Помните про колонки и ширину абзаца

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

Проверяйте боем

И последний совет — не засиживайтесь в графическом редакторе, проверяйте шрифты в браузере. Разница в отображении может удивить и расстроить. В разных браузерах и операционных системах, на экранах с разной плотностью точек возникает такое множество вариантов сглаживания и даже изменения пропорций букв, что вам придётся поработать не один час, прежде чем вы останетесь хотя бы частично довольны. Рычагов воздействия немного — на шаг-два больше-меньше поменяйте кегль, процентов на пять-десять уменьшите или увеличьте плотность цвета. Если есть близкие начертания в семье, типа light и thin — можно и это попробовать. Не все доходят до такой степени безумства, но для наборного текста и мелкой служебной типографики такая доводка особенно полезна, а для кеглей покрупнее — интересна и познавательна, попробуйте раз и решите для себя, стоит ли разница потраченного времени.

--

--

Cамый большой коллективный блог про дизайн на русском языке

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store