Как сделать удобную дизайн-систему. Шрифты. Часть 2

Всем привет!

Продолжаю рассказывать об организации дизайн-систем. На очереди типографика. Начнем с небольшой теории, затем перейдем к систематизации стилей в Figma и закончим парочкой ресурсов с классными шрифтами.
Буду рад видеть тебя в своем Телеграм-канале! Там я пишу про дизайн, крипту и музыку.

Типографика это один из основополагающих элементов в дизайне интерфейсов. Если пользователь не может прочитать текст — вы можете с ним сразу же попрощаться. Поэтому элементарное знание типографики поможет вам определить лучший шрифт для дизайна интерфейса.

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

С помощью типографики можно вызывать эмоции, задавать направление и выражать индивидуальность.

И важное напоминание: работа с типографикой — это не точная наука. Поэтому тут вы предоставлены сами себе, вашим ощущениям и насмотренности.

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

Большинство современных пользовательских интерфейсов и веб-сайтов используют базовый размер шрифта 16px. Это всегда хорошее значение по умолчанию для начала, так как оно удобно для чтения текста на экране. Что касается дашбордов, то там базовый шрифт лучше принимать 14px, так как обычно в таких системах нужно уместить большое количество элементов и при этом сохранить достаточно свободного пространства.

Для лучшей читаемости ваших текстов важно правильно выбрать межстрочный интервал.

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

Обычно, межстрочный интервал для базового текста должен быть в 1,5-2 раза больше кегля. Например, если базовый текст имеет 16-ый кегль, то межстрочный интервал будет в диапазоне 24-32.

Для заголовков ситуация обратная. Начиная с заголовков размером 28-32px, межстрочный интервал нужно умножать на 1,2-1,0. Это правило работает почти всегда.

Большинство шрифтов изначально имеют значение трэкинга 0% и его практически не имеет смысла менять. Но, например, в хедерах иногда все же стоит это делать и в меньшую сторону, но в пределах 5%.

Начнем с основного правила:

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

Нейминг состоит из следующих параметров:

• Где используется шрифт. Это может быть Подпись (Caption), Основной текст (Body), Подзаголовок (Subheader), Заголовок (Header).
• Далее идет обозначение размера, но не в формате пикселей, а в формате “размеров одежды” (у меня такая ассоциация). То есть: XS, S, M, L, XL. Например, 16px=M, тогда 18px=L и так далее. С какого размера начинать? Логичнее начинать с М, так как если нужно будет добавить другой размер такого же шрифта, то вы можете прыгнуть либо на градацию вверх либо вниз, чего не сделаешь, начиная с XS или XL.
• Последним параметром идет начертание: Light, Book/Regular, Medium, SemiBold, Bold и так далее. Также, каждому начертанию можно зарезервировать свое числовое значение как в статье про цветовые стили. То есть, Light - 300, Book - 400, Medium - 500, SemiBold - 600, Bold - 800 и так далее. Этот вариант подходит для лучшей синхронизации с разработчиками.

Итого, мы получаем следующий формат нейминга: Body/M/Book или Subheader/L/700.

Вот так будет выглядеть иерархия в Figma.

https://www.fontshare.com/ — один из лучших сайтов с бесплатными шрифтами.

https://pangrampangram.com/ — фул паки платные, но некоторые начертания можно скачать бесплатно.

Очень важно как правильно подобрать шрифт, так и грамотно его видоизменять.

Хотел бы напомнить еще раз: работа с типографикой — это не точная наука. Поэтому тут вы предоставлены сами себе, вашим ощущениям и насмотренности.

Успехов!

***

Telegram | Instagram | Dribbble | Behance