Шрифты для Figma: 10 вариантов и выбор для UI-дизайна

Шрифт для Figma выбирают под задачу: основной текст, подписи и числа должны легко читаться, а крупный заголовок может быть более выразительным. Сначала проверьте нужный алфавит и начертания, затем — реальные надписи на макете. Красивый латинский образец ещё не показывает, как будет выглядеть русскоязычный интерфейс.

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

Как выбрать шрифт для интерфейса

Проверьте текст, который действительно будет на экране

Добавьте в макет «Настройки уведомлений», «Сохранить изменения», «Ещё», «№ 24» и «1 250,50 ₽». Посмотрите на ё, й, щ, ъ, кавычки и знак рубля. Если часть символов выглядит иначе, проверьте, не подставился ли другой шрифт. Для многоязычного продукта повторите проверку с текстом каждого нужного языка.

Разделите функции текста и характер бренда

Шрифт логотипа не обязан становиться шрифтом каждой подписи. На экране оплаты важны различимость цифр, суммы и действий; в промоблоке можно дать больше места выразительному заголовку. Подбирайте начертание по этой роли, а не по правилу «банку — строгий, социальной сети — весёлый».

Соберите небольшую систему, а не коллекцию гарнитур

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

10 шрифтов: где каждый стоит попробовать

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

1. Lato

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

2. Great Sailor

Great Sailor — выразительный шрифт с засечками. На образце хорошо виден контраст тонких и толстых штрихов. Попробуйте его для короткого крупного заголовка или брендового акцента; для мелких подписей и плотной формы сначала проверьте читаемость, а не переносите удачное оформление постера напрямую в UI.

3. Woodman

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

4. Avalon

Название Avalon встречается у разных авторов. Например, у FontSite это семейство без засечек. Перед загрузкой сверяйте разработчика и конкретное начертание: одинаковое название не гарантирует одинаковую форму букв, языковой состав или лицензию. Выбирайте по образцу нужного семейства, а не только по названию.

5. Nunito

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

6. Lunatoire

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

7. Roboto

Roboto — шрифт без засечек, доступный в Google Fonts. Это кандидат для регулярного интерфейсного текста: сравните цифры, знаки и длину часто повторяющихся команд. Не добавляйте вторую гарнитуру только ради разнообразия — сначала попробуйте построить иерархию размером и насыщенностью.

8. Montagu Slab

Montagu Slab имеет выраженные засечки и подходит для заметного типографического акцента. В макете сравните заголовок и абзац отдельно: выразительное начало статьи не означает, что тем же начертанием удобно читать длинную форму или подпись к полю.

9. Laro

Laro от Larin Type Co — семейство без засечек. Начните с выбора пары начертаний для заголовка и текста; затем проверьте, сохраняется ли различие при уменьшении масштаба. Образец с крупным названием показывает характер гарнитуры, но не заменяет проверку мелких элементов.

10. Resist Sans

Resist Sans от Groteskly Yours включает варианты Text и Display. Для небольшого текста сравните Text, а для крупных заголовков — Display. Выбирайте конкретный вариант в контексте макета: одинаковое название семейства не означает, что все его начертания решают одну задачу.

Семейства и начертания можно сверить в каталогах авторов и площадок: Lato, Nunito, Roboto и Montagu Slab в Google Fonts; Avalon у FontSite, Laro и Resist Sans на страницах издателей. Эти источники — на английском.

Как добавить шрифт в Figma и избежать подмены

Для локального шрифта Figma поддерживает файлы TTF и OTF. Установите нужные начертания в системе. При работе в браузере подключите Figma font installer; в настольное приложение он уже включён. После установки обновите вкладку или перезапустите приложение. Порядок действий описан в справке Figma (на английском).

Если появляется предупреждение об отсутствующем шрифте, проверьте точное семейство и начертание. Regular не заменяет отсутствующий Medium без изменения макета. Для совместной работы обеспечьте доступ к тем же шрифтам всем, кто редактирует текст. Установка на вашем компьютере сама по себе не даёт доступ коллеге и не расширяет лицензию.

Если браузер не видит установленный шрифт, проверьте связь с Figma font installer и разрешение на доступ к локальной сети в настройках Figma. Для этого у сервиса есть инструкция по устранению неполадок (на английском).

Сравните варианты текста в Pixso на одном экране

Соберите в Pixso карточку настроек: заголовок «Уведомления», короткое описание, числовое значение и кнопку «Сохранить». Сделайте два варианта с одинаковыми текстом, шириной блока и размером шрифта. Меняйте сначала гарнитуру, затем насыщенность — так будет видно, какое решение улучшает читаемость.

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

Если переносите существующий макет, проверьте текст после импорта: доступность шрифта и совпадение начертаний важнее внешнего сходства одного экрана. Возможности совместной работы описаны в сравнении Pixso и Figma.

Сравнить текст на макете в Pixso