Про типографику в интерфейсе. Почти каждый раз когда начинае | Про продукт и студию

Про типографику в интерфейсе.

Почти каждый раз когда начинаешь новый проект одной из первых проблем становиться типографика. Надо выбрать шрифт, посидеть продумать все размеры шрифтов, их межбуквенные, межстрочные, собрать стили и тд. Работка пыльная, душная, и в связи с этим хочу немного (или много) облегчить вам жизнь.

После того как вы выбрали шрифт, надо выбрать размеры. Лучше чем плагин Typescales вы ничего не найдете. Открываем плагин, выбираем размер базового шрифта (обычно 16 px или иногда 14px, в iOS — 15 px), выставляем scale (рекомендую 1.2, потом руками округлим значения до кратных 4), line height (межстрочный интервал) от 1.2 до 1.35 (это значения для заголовков, в наборном тексте и меньше рекомендую потом заменить межстрочный на 1.4 или даже 1.5), в scales указываем количество стилей которое нам нужно. Жмем Generate и плагин нам автоматически создаст гайд по типографике.

Если вы адский фанат золотых сечений и подобных приколов — можно зайти на type-scale и выбрать в scale: Golden Ratio. Сразу скажу — для интерфейса это оч хуевая затея, для коммуникационки более менее норм.

После того как мы добавили базовые стили их нужно шлифануть, а точнее подправить межбуквенный интервал (letter spacing). Если вы используете шрифт SF или Inter, то все оч изи, ибо есть плагины: Inter letter spacing (для шрифта inter), и Fix San Francisco (для SF).

Если вы используете другой шрифт — советую погуглить запросы типа « letter spacing» или посидеть потыкать на глаз. Если ничего нет, то можно оставить для наборного шрифта 0 межбуквенный, у шрифтов больше по чуть чуть его уменьшать, а у шрифтов меньше наоборот — увеличивать.

Когда размерная сетка готова и межбуквенные настроены остается только назвать стили. Если вы делаете типографику для веба, то точно нужно предусмотреть H1-H… заголовки, стили body текста (наборный текст), caption (мелкий текст) и если нужно — display (текст для промо, лендингов и тд., обычно сильно крупнее обычной типографики в интерфейсе). Если это аппка, то стили для Title, Body Text, Caption.

Также если вы делаете типографику для веба нужно продумать ее scale под мобильные устройства. Например у нас есть Display заголовок со свойствами 56 (размер) / 64 (межбуквенный), на мобилке это ту мач, поэтому тестим на нужном нам разрешении подходящий размер, думаю 32/36 для мобилки в этом случае оч даже ничего будет. Так нужно пройтись по всем стилям, body и caption можно оставить едиными с десктопом, или уменьшить для мобилки межстрочный интервал, ибо экран меньше, нужно вмещать больше контента, но это не обязательно. Так у вас получаться стили например H1 Desktop и H1 Mobile и всегда будет понятно где что использовать. Куда же без осознанности…)

Кст если вы собираете дефолтную аппку на iOS, то можете ваще всей этой хренью не страдать и зайти на сайт эпла в гайды, там уже все готово. У них своебразные стили, например вместо классических 16 px body, 18 px large text и 20 small heading — там будет 15,17,22. Почему так - я хз, но все это юзают

В идеале получается универсальная палашня стилей из которых можно собрать что угодно, а главное — в интерфейсе будет иерархия и чистота, а разработка будет в экстазе