Эту статью я написал на основе источника.
Шрифты — это одна из основ дизайна. Мы с помощью теста передаем наши мысли и идеи. Но чтобы научиться пользоваться шрифтами эффективно, важно научиться его систематизировать.
Система шрифтов помогает взаимодействовать разработчикам и дизайнерам между собой, позволяет легче масштабировать проект. И чем раньше ее заложить, тем больше от нее пользы.
Это статья об основах системы шрифтов и небольших полезных советах.
Основа системы шрифтов — стиль.
В Фигме с помощью стилей легко задать нужные свойства на любой текстовый объект. А если переместить стили в библиотеку, сможем делиться ими с командой и даже между проектами.
Благодаря этому можно создать систему шрифтов и использовать его всей командой. Достаточно изменить стиль, и все объекты привязанные к ней изменятся. Это позволит легко поддерживать систему шрифтов.
Для стилей типографики можно задать несколько свойств:
- Сеймество шрифта, начертания и размер
- Межстрочный интервал (интерлиньяж)
- Интервал: между буквами (кернинг), между абзацами, красной строки
- Подчеркивание и зачеркивание
- Печатать только: прописными (uppercase), строчными (lowercase) и т.д.
Свойства не входящих в шрифтовые стили:
- Выравнивание
- Вертикальное выравнивание
- Изменение размера текстового поля
По началу кажется странным, что цвет и выравнивание не входят в шрифтовой стиль. Но у этого метода есть своё огромное преимущество: не нужно плодить стили и учитывать все возможные комбинации шрифта, цвета и выравнивания — их можно настроить вне стиля. Это ускоряет процесс создания системы шрифтов и его обслуживание.
Выбор шрифта, размера и названий для стилей
Чтобы создать систему шрифтов нужно создать стили охватывающие заголовки и основной текст. Стили должны быть для всех ситуаций, но их не нужно плодить, чтобы потом не путаться, когда и какой стиль использовать.
Выбор семейства шрифтов
От выбора шрифта завистей многое. Как минимум нужно учесть несколько вещей:
- Производительность. Есть ли запас производительности? Сколько шрифтов нужно загрузить? Будут ли использоваться стандартные шрифты устройства?
- Бренд. Есть ли фирменные шрифты?
- Мультисистема. Имеет ли смысл использовать один шрифтовой стиль? Может для продукта стоит выбрать простой шрифт, а для лэндинга фирменный?
- Шрифтовая пара. Хватает ли одного шрифта, чтобы заголовки отличались между собой и от основного текста? Может стоит подобрать шрифитовую пару?
Выбор размеров
После выбора шрифта, необходимо определиться с размерами шрифта и межстрочным интервалом для каждого стиля.
Ниже список, который надо учесть:
- Основной текст. Размер шрифта как правило от 14 до 18 px. Межстрочный интервал нужно сделать побольше, чтобы было удобно читать длинный текст. Иначе люди будут читать медленнее и могут запутаться в строках. Обычно межстрочный интервал в 1,5 раза больше размера шрифта. А дальше оценивают на глаз — достаточно или нет.
- Заголовки. Размер шрифта произвольный, главное чтобы был контраст между заголовками и текстом. А вот межстрочный и межбуквенный интервал хочется уменьшить, чтобы заголовок выглядит более компактно.
- Оптический эффект. Имейте в виду, что черный текст на светлом фоне отличается от белого текста на темном фоне. Возможно придется создать отдельные стили для белого и черного текста.
В списке шрифтовых стилей, я советую расположить их от большего к меньшему, так система станет более понятной.
Методы систематизации размера шрифта и высоты строки
Чтобы упростить выбор размеров используют разные методики.
Их много, о нескольких я напишу.
8-пиксельная сетка
Моя любимый подход к с расчетам. Ее суть в том, чтобы все текстовые объекты ложились в 8 пиксельную сетку и соблюдали вертикальный ритм. Для этого высоту строки всех стилей и размер заголовков делают кратно 4.
Иногда делают исключения: для основного текста хорошо подходит 14 px, но он не кратен 4, главное чтобы высота строки была кратна.
Плюсы:
- Простая математика, для расчетов используем только сложение, вычитание, умножение и деление.
- Можно Nudge Amount в настройках выставить 8px и легко перемещать объекты по сетке с помощью Shift+стрелочки.
Минусы:
- Для каждого стиля нужно указать высоту строки отдельно
Советую изучить 8-пиксельную сетку подробнее. Она универсальна и с помощью нее легко масштабировать свой дизайн. Проще определится с отступами, если макет "поехал" фронтендер будет знать об этом и какой отступ там должен был быть.
Метод золотого сечения
Мне не нравится этот метод, у него много минусов, но с помощью него можно определиться с размерами. Суть метода в том что, берем стиль основного текста и умножаем его на определенный коэффициент и получаем размеры для нового стиля.
Минусы:
- Не целые пиксели. Это затруднит работу как дизайнеру, так и разработчикам. Благо в фигме есть привязка к пикселям.
- Высота строки для больших шрифтов будут огромными. Придется уменьшать коэффициент.
Метод процента
Самый простой метод. Размеры шрифтов будут измеряться в пикселях, а высота строки в процентах от размера шрифта.
Плюсы:
- Не нужно указывать высоту строки для всех стилей отдельно. К примеру, для всех маленьких шрифтов высоту строки можно указать 150%, а для больших 110%.
Минусы:
- Если указать для всех размеров шрифтов один и тот же процент, то у заголовков отступ будет слишком большим. Желательно 2 или 3 разных процента.
Если говорить о количестве, то мнения расходятся. Кто-то считает, что достаточно 7 стилей, кто-то — меньше. Но я считаю тут все индивидуально.
К примеру в гайдлайнах СКБ Контура 12 шрифтовых стилей, учитывая кол-во продуктов и их сложность — в самый раз.
Названия и порядок стилей текста
Названия стилей
Правильные названия помогут команде быстрее понять систему шрифтов. А лучше всего назвать стили вместе с командой.
В режиме просмотра кода CSS названия будут в виде комментария, а в режиме таблицы — в виде названия стиля.
Можно использовать несколько подходов:
- На основе размеров: XS, S, M, L, XL
- На основе HTML-тегов: H1, H2
- Описывать функцию стиля, где она используется: modal-header, button-label. Но так можно создать стили с одинаковыми свойствами и не заметить этого.
Порядок стилей
Сила групп
Мы можем сгруппировать стили с помощью «/» (группа/название стиля). Это здорово облегчит выбор нужного стиля. К примеру, в библиотеке Контура отделили обычные стили от их Bold версий.
Отдельные библиотеки
Чем больше будет стилей, тем больше будет список. Можно разделить стили по разным библиотекам и подключить только нужную.
Например, шрифты для мобильной версии и для десктопной будут в разных библиотеках. Дизайнер работающий с мобильной версией подключит только конкретную библиотеку.
Сочетание стилей текста и стилей цвета
В Фигме можно к текстовому объекту применить одновременно стиль шрифта и стиль цвета. Пусть это добавляет дополнительное действие, но благодаря этому, нам не нужно создавать для каждой комбинации отдельные стили.
Многие команды начали в описании стиля цвета для текста писать на каком фоне его использовать.
Другой способ заключается в компонентах. Удобен, если сразу были согласованы текстовые блоки и собираетесь их многократно применять.
К примеру, текстовый блок цитаты. Можно заранее создать компонент с применением стилей. И даже если понадобиться разобрать компонент при повторном использовании — стили текста сохраняться.
Изменение размера текстового поля
В Фигме ко всем текстовым полям можно применить три вида изменения размера текстового поля:
- Рост по горизонтали, ставиться по умолчанию;
- Рост по вертикали;
- Фиксированный размер, ставиться автоматически, если изменить высоту поля.
В макетах лучше всего применять только рост по вертикали или по горизонтали, иначе результат верстки вас не обрадует. Если задать текстовому блоку фиксированный размер, отступы в макете и после верстки будут отличаться.
На видео хорошо видно различия:
- В 1 варианте, когда мы ставим «Рост по вертикали» — ширина блока будет равна высоте строки шрифта, как в браузере,
- Во 2 варианте — текстовый блок фиксированного размера.
Это поможет правильно отобразить отступы в макетах и легче соблюдать вертикальный ритм, если вы использует «8 пиксельную сетку», описанную выше.
Заключение
Дизайн-системы нужно создавать даже для маленьких проектов, хотя бы систему шрифтов и библиотеку контролов. Тогда будет ускоряться разработка и соблюдаться единый стиль проекта.