Типографика в Figma

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

По внешнему виду и правилам построения выделяют пять видов шрифтов: антиквы, гротески, брусковые, рукописные и акцидентные.

Антиквы

Шрифты с засечками. Подходят для оформления печатных изданий и журналов.

Гротески

Шрифты без засечек, используются в интерфейсах. Такие шрифты легко считывать, они простые, легко воспринимаются и не требуют зрительной нагрузки.

Брусковые

Шрифты с засечками, но они грубые и тяжёлые. Шрифтs используют для заголовков, баннеров и книг.

Рукописные

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

Акцидентные

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

Для изучения начертаний возьмем один из самых распространенных шрифтов – Roboto. У Roboto есть группа стандартных начертаний, курсивных – Italic, а также Condensed – сжатый. Посмотрите, как выглядит каждое начертание, чтобы в дальнейшем иметь визуальное представление.

Чтобы выбрать начертание, находим на панели справа раздел Text. Первой строкой в этом разделе находится название шрифта, на второй строке – выбор начертания и размера шрифта.

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

Рекомендации по выбору начертаний

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

Для заголовка подойдет любое начертание от Semibold до Black. Главное, чтобы заголовок был хотя бы в два раза толще основого текста, поэтому пропускаем начертание Medium. Так заголовок с текстом будут смотреться гармонично. Ниже примеры заголовков в разном начертании.

Есть несколько рекомендаций по использованию шрифтов, остальное — дело вкуса.

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

В привычном разделе Text, под регулировкой размера шрифта, находится трекинг (letter spasing). Нажимаем на окошко и пишем любое число. Так же можно регулировать стрелками вправо/влево.

Еще одна шрифтовая настройка — высота строки. Понадобится, если заголовок располагается в несколько строк. Нажимаем на окошко line height и пишем любое число, смотрим как увеличивается и уменьшается расстояние между строками.

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

1. В самой Figma доступно большое количество шрифтов, но многие из них только на латинице. Чтобы найти свой бриллиант, придётся покопаться.

2. Google Fonts — большая часть этих шрифтов есть в Figma, но на сайте более удобный поиск и можно выбрать в фильтрах кириллицу.

3. Typetype — есть бесплатные и платные шрифты, сравнительно не дорогие. Часто бывают скидки.

4. Myfonts (только c vpn) — cайт для поиска шрифтов.

5. Fontspring — сайт для покупки шрифтов.

6. Typetoday — шрифты с кириллицей, платные

7. Paratype — есть бесплатные и платные шрифты.