Типографика digital-продукта
Как собрать систему текстовых стилей сложного сервиса, не уходя в крайности.
После того, как я успокоился с видом нескольких страниц в рамках редизайна сервиса, настало время привести в порядок и постулировать на будущее шрифтовую систему. Почему к ней нельзя приступать до макетирования страниц? Да просто потому, что вы не можете оценить необходимый объем воздуха, количество колонок, в которых будут жить заголовки и параграфы, не знаете объём и характер контента. Как минимум, нужен набор из двух — простой и сложной с точки зрения контента и функциональности страниц. Например, можно начать с главной, страницы о проекте и страницы выдачи билетов, если брать мой случай с планировщиком путешествий. Про набор текстов в макетах с помощью всяких lorem-ipsum-болванок я уже высказывался раньше — считаю, что это недопустимо в большинстве случаев. Дизайнер обязан знать текст, который потом будет помещён на живой сайт, должен чувствовать настроение, объём, структуру текста, чтобы не мешать этому, а поддерживать своей шрифтовой системой.
Несмотря на уверенность в том, что шрифты были обкатаны ещё при создании макетов, полезно выложить их в один документ даже для себя. К тому же он понадобится для передачи макетов в вёрстку.
Что мы здесь видим
— назначение стилей (тег, ссылка, служебный заголовок);
— семейства и плотности, типа Fira Sans Light, PT Serif Bold;
— кегли и межстрочные расстояния;
— цвет шрифта;
— отступы до и после текстового блока;
— предполагаемое количество колонок для текстового контейнера;
— и всё это для десктопа, планшетов и мобильных устройств.
Такой набор стилей кристаллизуется в результате соблюдения нескольких правил, которым я следую уже много лет. Они либо вычитаны и высмотрены в работах мастеров, либо получены через кровь и ошибки — кажется, такая смесь опыта позволяет не бездумно заучить, а выстрадать и понять саму суть, почему сделано именно так. Итак, мои правила:
Используйте минимум текстовых стилей для закрытия максимума нужд
Вы видите окончательную систему из десяти стилей. Сырая таблица, собранная из макетов, насчитывала больше — промежуточный стиль заголовка сервисной страницы (регистрация, ошибка), другой стиль ссылки, чтобы стояла рядом с подзаголовком (ага, и такое было),.. Когда смотришь на отдельно взятый макет, локально применённые стили смотрятся уместно. Когда же видишь весь проект сразу, понимаешь, что без некоторых стилей можно запросто обойтись — либо они встречаются слишком редко и могут быть заменены привычным стилем, либо слишком похожи на другие и выглядят оплошностью или выбиваются из общего лук-энд-фила.
Двух семей достаточно
Некоторые дизайн-системы отлично живут с одним семейством шрифтов. В этом случае желательно найти шрифт с гаммой плотностей — как минимум, пригодятся лёгкое, обычное и полужирное. У меня же ситуация такова, что рядом живут две большие половины — собственно сам сайт с интерфейсом поиска путешествий и отображения маршрутов и Журнал, или блог, со статьями, обзорами и интервью, поэтому я решил использовать для них две семьи.
Для начала я решил попробовать найти кириллические, стилистически совместимые шрифты среди бесплатных, и пока считаю, что мне повезло. На более «интерфейсной» части я использую семейство Fira Sans, его чистые линии и несколько начертаний (я использую Light, Regular и Medium) созвучны стилю сайта, буквы отлично читаются в мелком кегле, в крупном — изящны и легки, а обширная языковая раскладка позволит отображать контент на многих языках. Жаль, что в русской раскладке в некоторых парах дыряв кернинг, вы не замечали?
Для Журнала я выбрал всем известное семейство PT Serif — мне кажется, заголовки в полужирном начертании отлично смотрятся с лёгкой Фирой, намекают на печатный вид и позволяют отделить именно журнальный контент. Этот шрифт я буду использовать для заголовков статей, рубрик, для карточек статей в каталоге, для мелких подзаголовков в тексте.
Осторожнее с чёрным!
Я практически не использую чистый чёрный для наборного текста, да и для заголовков крайне редко. В мелком кегле чёрный текст смотрится резковато, на мой вкус. Такое впечатление, что чуть просветли его — и станет легче читать. Люблю использовать серый плотности 70–80% в зависимости от толщины штрихов букв и межбуквенных просветов. На примере выше параграф набран серым плотности 75%.
Заголовки же должны выглядеть весомее, заметнее, тяжелее. Близкие к параграфам заголовки я оформляю на 5–10% темнее основного текста, а «внешние» отдельно стоящие заголовки можно набирать чисто чёрным. Вот, например, крупный заголовок серого цвета оставляет совсем другое впечатление, чем чёрный:
Без оттенков серого не обойтись
Для составления ясной иерархии текстовых блоков игры с кеглями часто бывает недостаточно. Даже на примере выше заголовок чуть темнее параграфа. А когда в текст приходят комментарии, цитаты, выноски, или нужно показать недоступные ссылки, кнопки, контролы… Приходится что-то выделять, что-то гасить, и в этом сильно помогают оттенки серого. За все годы я на нескольких проектах пробовал добавлять немного краски в серые оттенки для текста, но это выглядело неряшливо и в продакшн не пошло ни разу. Сейчас я обхожусь такой градацией:
20% — для неактивных ссылок, погашенного текста;
50% — комментарии к фотографиям мелким кеглем, цитаты крупным Fira Sans Light;
75% — наборный текст параграфов. В качестве эксперимента я на некоторое время сменил его на 85%, но нашему фронтендеру Коле это показалось слишком, я с ним согласился и вернулся на отметку 75;
85% — для заголовков рядом с текстом, и тех, что покрупнее. Необходимости в чистом чёрном тексте я не ощутил.
Меньше кеглей!
Обычно количество кеглей для разных стилей текстовых блоков меньше самого количества стилей, то есть на одном кегле можно вырастить несколько стилей. Например, для десяти стилей я использую всего шесть кеглей: 15, 18, 24, 30, 60, 100. Заметили, что часть их лежит в геометрической прогрессии — х, 2х, 4х? Мне кажется, что следование таким простым схемам порождает более гармоничные композиции, как шрифтовые, так и просто графические.
Задайте систему отступов
Такова же ситуация с отступами до и после текстовых блоков — они составляют 20, 40, 60 либо 100 пкс. Эти отступы не стыкуются, а больший поглощает меньший. Причём отступ «заголовок- графика» может отличаться от отступа «заголовок-текст». В UI-ките я указываю отступы каждому компоненту любого уровня сложности — от кнопки и чекбокса до виджета карточки статьи или модуля подписки.
Локализуйте стили для разных устройств
С этим понятно — меняется ширина экрана, а значит, и абзаца, громоздкие заголовки занимают несколько строк, слова могут не вмещаться в строку — все эти ужасы устраняются подгонкой стилей на разных устройствах. К тому же на тач-устройствах мы нажимаем кнопки не курсором мыши, а пальцем, что требует комфортных размеров и отступов, хотя это больше не про типографику, а кнопки и прочие контролы. Рекомендую проверять стили непосредственно на устройствах в деле, не ограничиваться примеркой в одном файле.
Проектируйте на самый частый случай, не забывайте про крайние.
Я не раз замечал чересчур навязчивое отношение к длинным фамилиям, заголовкам или пустым состояниям. Да, такие вещи случаются, и чаще в UGC-контенте. Но нельзя строить основные макеты на основе крайних примеров. Изучите стиль заголовков на проекте и под наиболее возможный вариант делайте лучший вид макета. Сделайте основной макет для имён типа Москва и Санкт-Петербург, но продумайте, как в дизайн встроятся Рим и Комсомольск-на-Амуре. Также помните про языковые локализации — надписи в кнопках могут быть особо проблемными.
Помните про колонки и ширину абзаца
Желательно держать количество символов в строке более-менее одинаковым на всех устройствах, варьируя количество колонок, занимаемых текстовым блоком. Например, параграф на десктопе из двенадцати колонок занимает всего шесть, на планшете —уже восемь-десять, а на телефоне — всю ширину экрана минус небольшие отступы. Но всё равно мы столкнёмся с разными физическими ширинами экранов, и тут придётся играть с тем, что дано, и варьировать межстрочное и даже кегль для более комфортного чтения. Так что не только кегль и межстрочное влияют на ширину строки, но и наоборот.
Проверяйте боем
И последний совет — не засиживайтесь в графическом редакторе, проверяйте шрифты в браузере. Разница в отображении может удивить и расстроить. В разных браузерах и операционных системах, на экранах с разной плотностью точек возникает такое множество вариантов сглаживания и даже изменения пропорций букв, что вам придётся поработать не один час, прежде чем вы останетесь хотя бы частично довольны. Рычагов воздействия немного — на шаг-два больше-меньше поменяйте кегль, процентов на пять-десять уменьшите или увеличьте плотность цвета. Если есть близкие начертания в семье, типа light и thin — можно и это попробовать. Не все доходят до такой степени безумства, но для наборного текста и мелкой служебной типографики такая доводка особенно полезна, а для кеглей покрупнее — интересна и познавательна, попробуйте раз и решите для себя, стоит ли разница потраченного времени.
Вкратце таков мой опыт и советы про типографику продуктов. Пишите вопросы и пожелания — по ним я узнаю, о чём рассказать дальше.
