Продолжаю рассказывать об организации дизайн-систем. На очереди типографика. Начнем с небольшой теории, затем перейдем к систематизации стилей в Figma и закончим парочкой ресурсов с классными шрифтами.
Кстати, я сделал свой телеграм канал - https://t.me/artemsuslovv. Буду рад видеть вас там!
Хорошая типографика
Типографика это один из основополагающих элементов в дизайне интерфейсов. Если пользователь не может прочитать текст — вы можете с ним сразу же попрощаться. Поэтому элементарное знание типографики поможет вам определить лучший шрифт для дизайна интерфейса.
Плохую типографику всегда легко заметить даже людям, которые не сильно разбираются в дизайне. А хорошему шрифту не придают должное значение, так как кажется, что это само собой полагающееся.
С помощью типографики можно вызывать эмоции, задавать направление и выражать индивидуальность.
И важное напоминание: работа с типографикой — это не точная наука. Поэтому тут вы предоставлены сами себе, вашим ощущениям и насмотренности.
Базовый размер шрифта
Определение базового размера шрифта - важный шаг для отзывчивого дизайна. Базовый размер шрифта - это размер шрифта который используется чаще всего на сайте или в приложении. Базовый шрифт обычно применяется для большинства абзацев, меню, списков.
Большинство современных пользовательских интерфейсов и веб-сайтов используют базовый размер шрифта 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/ — фул паки платные, но некоторые начертания можно скачать бесплатно.
Итог
Очень важно как правильно подобрать шрифт, так и грамотно его видоизменять.
Хотел бы напомнить еще раз: работа с типографикой — это не точная наука. Поэтому тут вы предоставлены сами себе, вашим ощущениям и насмотренности.
Успехов!
***
ikle
Это не просто плохое значение, это отвратительное значение, как и любое другое абсолютное значение. Нужно забыть вообще об абсолютных значениях размера шрифта, если его не задаёт пользователь непосредственно.
Пользователь задал уже базовый размер шрифта в настройках браузера и/или в настройках ОС: не надо диктовать ему свои правила!
Не надо этого делать! Размер интерлиньяжа задаётся дизайнером шрифта для корректного отображения. Увеличение интерлиньяжа имеет смысл лишь для создания спецэффектов, которым не место ни в базовом тексте, ни в заголовках, ни в подписях элементов управления. А уменьшать его вообще нельзя: начнётся наложение элементов одних глифов на другие.
Не нравится интерлиньяж? Выберите более профессионально выполненный шрифт (гарнитуру).
И снова: не нужно этого делать. Выберите более профессионально выполненный шрифт (гарнитуру).
mikhail-edoshin
Расстояние между строками действительно зависит от длины строки -- чем длиннее строка, тем больше расстояние, а в коротких строках его можно уменьшить. Аналогично с трекингом, он действительно зависит от размера шрифта, заголовки можно набирать плотнее, чем мелкий шрифт. Компьютерный шрифт обычно разрабатывается для некоторого условного размера шрифта (12 пунктов) и не учитывает такие тонкости, там даже нет механизма для этого.
ikle
Я уже написал выше, что при уменьшении вы получите наложение глифов или, по крайней мере, слишком их близкое расположение. Забота об интерлиньяже и трекинге — это работа дизайнера шрифта, а не его пользователя.
То, что вы описываете — это костыли вокруг кривых шрифтов: я не просто так два раза предложил посмотреть в сторону более профессиональных шрифтов. Если вы генерируете картинку, которую будете отдавать пользователю, то такой способ имеет право на жизнь. Но вот при попытке их использовать для текста, рендеринг которого производится браузером вы с большой вероятностью получите кривое отображение.
Или вы хотите написать костыли для всего множества экранов и алгоритмов рендеринга шрифта? Достаточно посмотреть на разнообразие ноутбуков и телефонов, чтобы сильно опечалиться от перспектив реализации такой затеи. Проще найти нормальный экранный шрифт. Экранный.