Для начала нужно научиться их не разбрасывать.
А если без шуток, то аналогия с кеглями действительно хорошая: когда все кегли упорядочены, они создают ощущение единства, стройности, цельности, понятности. А что такое упорядоченность? Это определенные правила и рамки. Со шрифтами аналогично — четкая иерархия и закономерность помогают лучше воспринимать коммуникацию.
В своей универсальной дизайн-системе Constructor мы выработали определенные правила, которые позволяют нам получать итоговую типографику для новых проектов максимально быстро и с прогнозируемо хорошими результатами.
Стоит оговориться, что в этой статье речь идет о цифровых проектах, но эти правила можно внедрить и в графический дизайн, учитывая его специфику.
Фундамент принципа
Чтобы понять, как все устроено, нужно немного уйти от типографики как таковой и погрузиться в более низкоуровневые материи. Внутри Const Lab мы договорились строить цифровые макеты на базе микромодуля 8 пикселей. Также, основываясь на последовательности Фибоначчи, мы получаем гармоничные отступы и другие размерности. Что это значит в контексте типографики? Мы привязываемся к этим размерностям в интерлиньяже и кеглях.
В итоге получается следующая градация для отступов:
4, 8, 16, 24, 40, 64, 104…
Важно привязываться к микромодулю
Тексты часто размещаются в колонках, и бывает так, что в колонках используются разные размерности. Таким образом, получается, что при модульной системе строки на базовых линиях начинают рифмоваться между собой. Они также могут рифмоваться с высотами изображений и других объектов, что помогает создать отличный контролируемый вертикальный ритм по всей странице — все объекты находятся на закономерных отступах друг от друга. Все это делает дизайн более целостным и качественным.
Текстовые стили
Выбор текстовых стилей основан на необходимости создания четкой иерархии текстовой информации, которая помогает пользователю быстро ориентироваться в контенте. Разделение текстов на сущности позволяет достичь визуального контраста и логической последовательности, что особенно важно для сохранения целостности дизайна. Поэтому мы разделили текстовые стили по сущностям, и, как правило, этого набора хватает для большинства проектов.
Заголовки (H1, H2, H3, H4)
Здесь есть три особенности:
- За 25 лет мы ни разу не использовали более четырех уровней вложенности: либо нам так везло, либо мы умеем отлично структурировать информацию. Но держим в голове, что исключение из правил может быть и тогда немного придется сместить иерархию.
- Это не реальные HTML-теги. Чтобы избежать проблем с интеграцией SEO-заголовков и визуальной иерархии на фронт-энде, мы визуально приравниваем <H1> и <H2>, т. е. семантически это разные теги, но выглядят они одинаково и наследуют стили «дизайнерского» заголовка H1. Далее <H3> наследует стиль H2 и т. д.
- У каждой размерности заголовка есть вариант для мобильных устройств (или наоборот), поскольку то, что легко вмещается на экране десктопа, может не поместиться на экран мобильного телефона. Поскольку мы уверены, что дизайн правильнее проектировать от большего к меньшему (не путать с разработкой, там мы как раз придерживаемся принципа mobile first), по умолчанию мы создаем стили для десктопа, а мобильные идут с суффиксами [mobile] (речь идет только про название стилей в Figma, в верстке все перестраивается автоматом в зависимости от размеров вьюпорта).
Base
Стандартный стиль для текстов по умолчанию. Например, на моем сайте им набран весь основной текст.
Large
Используется для тизеров, врезок и прочего. В любой момент, когда требуется более крупный наборный текст. Он может по кеглю совпадать с одним из заголовков, но вынесен отдельно, поскольку заголовки могут быть по умолчанию жирными, обладать другим интерлиньяжем или вообще набраны другой гарнитурой.
Small
Для более мелких текстов, например, заметки сбоку от основного текста или хинты под полями ввода.
Remark
Для совсем мелких надписей, например, приписки у телефонного номера или подписи под иконками в таббаре. Не используется в каждом проекте, но достаточно часто.
Label
Исключительно для кнопок. Отдельный от остальных стиль, чтобы кнопку сложнее было спутать с чем-то другим. Возможно, потребуется другой шрифт или начертание, а также у кнопки точно должна быть высота строки кратная высоте иконок, которые могут использоваться в кнопках.
Decor
Это опциональный стиль для текстов, требующих отдельного шрифта, но не являющихся при этом заголовками, врезками и пр. Например, им можно выводить цитаты, слоганы или другие сообщения, которые требуют отдельного начертания.
Mega
Это опциональный стиль, но мы используем его достаточно часто, поэтому он попал в этот список, хотя по умолчанию его не сохраняем. Применяется для гигантских заголовков.
Иногда приходится добавлять дополнительные стили, но это больше исключение. 8–10 различных шрифтовых стилей — это достаточный джентльменский набор, которого хватит для большинства проектов. Большее разнообразие начинает вносить хаос, а при меньшем количестве не хватает детализации. Получается, что нам постоянно нужно держать контраст на золотой середине: много стилей размывают контраст между ними, а мало стилей размывают контраст между объектами, так как не хватает выразительных средств для разделения смысловых типов и их размещения в заданном пространстве.
Кристаллизация метода
Мы пользовались этим подходом несколько лет, создавали качественные проекты, нашу методику копировали многие и успешно применяли в своих проектах. Но как-то раз мне пришла мысль, как еще улучшить этот метод. Дело в том, что красивые цифры, кратные микромодулю, на самом деле гармоничны только на первый взгляд. Они понятны и логичны для простого человека и опытного разработчика. Но пытливый дизайнер всегда найдет, что можно улучшить.
Дело в том, что кегль шрифта сам по себе не определяет высоту наборной строки, которая зависит от высоты строчного знака (x-height). В большинстве случаев x-height не равен микромодулю (если равен, то это, скорее всего, счастливое совпадение). Чтобы добиться визуальной гармонии, необходимо подобрать кегль так, чтобы x-height был кратен микромодулю, при этом сам кегль вполне может оказаться не гармоничным по значению и содержать дробную часть — в этом нет ничего страшного.
Такой принцип подбора кеглей позволяет сохранить ритм и согласованность в тексте, делая дизайн более целостным и приятным для восприятия.
Надеюсь, внимательный читатель заметил, что для текстов, набранных прописными, высота считается по заглавным (стиль Label). Также для стиля Remark высота x-height выбивается из общей системы размерностей и даже не кратна 2, но здесь приходится жертвовать ввиду допустимого минимального кегля на экране — 9 pt.
В данном примере видно, что есть разница между подходами с разными шрифтами, тут еще и заголовки прописными набраны, а также декор стал общим с мобилой и лейбл может существовать вполне без заглавных.
Общее в двух примерах — это сохраняемый ритм (он разный, но принцип через «Фибоначчи» остается), визуальная кратность микромодулю и наследованные иерархических отступов от разного типа шрифтовых стилей.
Таким образом, чтобы получить оптимальную размерность и визуально сохранить ритм микромодуля, необходимо пересчитать x-height под размер, кратный микромодулю. И пусть полупиксели в кегле не смущают (по факту на фронт-энде вообще через rem, скорее всего, размеры заданы будут) — их не будет видно пользователю. Полупиксели именно в кегле шрифта, но зато высота строки кратна микромодулю точно и не содержит дробных значений + визуально высота строчных как раз недробная. В старом же методе при красивых цифрах высота строчных была полупиксельной и гуляла от проекта к проекту (шрифты в разных проектах, как правило, разные, а у каждого шрифта высота строчных своя; и даже в рамках одного шрифта нередко бывает, что при меньшем кегле высота строчных увеличивается).
С новым подходом получится не только четко соблюсти иерархию, но сделать максимально ритмичный и зарифмованный дизайн.
