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

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

Почему правильная жирность шрифта имеет значение

Жирность шрифта — это не просто эстетический выбор. Она напрямую влияет на восприятие информации, визуальную иерархию и даже скорость чтения. Исследования Nielsen Norman Group показывают, что пользователи сканируют интерфейсы за 2–3 секунды, и жирный текст становится первым ориентиром, который привлекает внимание. Неправильно подобранная жирность может превратить важный призыв к действию в незаметный элемент, а заголовок — в визуальный шум.

Представьте, что вы проектируете интерфейс мобильного банка. Заголовок «Ваш баланс: 15 000 ₽» должен быть легко читаем даже при беглом взгляде. Если вы используете Regular вместо Bold, пользователь может пропустить эту информацию — особенно в условиях плохого освещения или на маленьком экране. В то же время, если вы сделаете жирным каждый элемент, иерархия исчезнет, и интерфейс станет перегруженным.

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

Как сделать жирный шрифт в Figma: пошаговая инструкция

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

1. Выберите текстовый слой на холсте. Можно щелкнуть по тексту или выделить его в панели Layers.
2. Откройте панель свойств справа — она автоматически отобразит параметры текста.
3. Найдите поле «Weight». Оно находится рядом с размером шрифта («Size») и именем шрифта («Font»).
4. Щелкните по текущему значению (например, «Regular»). Появится выпадающий список с доступными весами.
5. Выберите «Bold» (700). Если нужен более тяжёлый вариант — выберите «Extra Bold» (800) или «Black» (900).
6. Если «Bold» не отображается — проверьте, поддерживает ли выбранный шрифт этот вес. Некоторые шрифты имеют только Regular и Italic.

Если вы работаете с группой текстовых элементов, выделите их все одновременно — изменения применятся ко всем сразу. Это особенно полезно при редактировании списков, заголовков или карточек.

Что такое вес шрифта и как его выбрать

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

Не существует универсального правила «всегда использовать Bold». Например, в интерфейсах для пожилых пользователей может быть предпочтительнее SemiBold (600), потому что Bold (700) может казаться слишком агрессивным. В современных материальных дизайнах (Material Design 3) рекомендуется использовать Medium (500) для заголовков, а Bold — только для акцентов.

Частые ошибки при применении жирности и как их избежать

Даже опытные дизайнеры допускают ошибки, связанные с жирностью. Вот самые распространённые:

• Использование искусственной жирности. Если шрифт не имеет Bold-варианта, Figma создаёт его алгоритмически. Результат — размытые, нечёткие буквы, особенно в размерах меньше 14px. Решение: всегда проверяйте, есть ли в списке шрифта Bold. Если нет — замените шрифт на аналог с полной поддержкой весов (например, Inter, Roboto, Lato).
• Переиспользование Bold везде. Если каждый заголовок, кнопка и метка сделаны жирными, ничего не выделяется. Решение: используйте иерархию: Regular → Medium → SemiBold → Bold. Оставьте Bold только для самого важного.
• Несогласованность между платформами. На iOS Bold может выглядеть иначе, чем на Android. Решение: тестируйте дизайн на реальных устройствах или используйте компоненты с фиксированными весами, а не настройками по умолчанию.
• Игнорирование доступности. Слишком жирный текст на светлом фоне может вызывать усталость глаз. Решение: соблюдайте контрастность (минимум 4.5:1 для текста 16px и меньше по WCAG).

Чтобы избежать этих ошибок, создайте в Figma собственную систему стилей текста. Используйте Text Styles — это позволит вам применять одинаковые настройки жирности по всему проекту и легко обновлять их в одном месте.

Как работать с шрифтами без жирных вариантов

Иногда вы сталкиваетесь с шрифтами, которые не имеют Bold. Это типично для кастомных или бесплатных шрифтов, скачанных с сайта типа DaFont или Google Fonts. В этом случае Figma автоматически применяет «fake bold» — искусственное утолщение. Но это не лучшее решение.

Что делать?

• Вариант 1: Замените шрифт. Найдите аналог с полной палитрой весов. Например, если вы используете «Open Sans», замените его на «Inter» — он бесплатный, современный и имеет 9 весов.
• Вариант 2: Используйте SemiBold. Если Bold отсутствует, но есть SemiBold — это лучше, чем искусственная жирность. SemiBold (600) часто выглядит естественнее, чем «fake Bold».
• Вариант 3: Увеличьте размер. Вместо жирности увеличьте размер текста на 1–2 пункта. Это может компенсировать недостаток визуального веса без ущерба для качества.
• Вариант 4: Добавьте тень или контур (осторожно). В редких случаях — например, для логотипов — можно использовать очень тонкую тень (1px, прозрачность 10%), чтобы создать эффект объёма. Но это не для основного текста!

Лучшие практики: когда и где использовать жирный шрифт

Правильное применение жирности — это искусство баланса. Вот проверенные практики от ведущих дизайнерских команд:

• Заголовки H1 — всегда Bold (700) или Extra Bold (800). Это основной акцент страницы.
• Заголовки H2–H3 — SemiBold (600). Достаточно для выделения, но не перегружает.
• Кнопки CTA — Bold. Важно, чтобы пользователь мгновенно понял, что это действие.
• Текст в навигации — Regular или Medium. Жирность здесь нарушает спокойствие интерфейса.
• Подписи к изображениям — Regular. Не отвлекайте от основного контента.
• Метки и статусы — SemiBold. Например: «Активно», «Ошибка», «Готово».

Экспертное мнение: как дизайнеры используют жирность в реальных проектах

Мы поговорили с Еленой Михайловой — старшим UX-дизайнером из команды Яндекс.Маркета. Её команда работает с 20+ миллионами пользователей ежедневно.

• Жирный шрифт в Figma выбирается через панель свойств — поле «Weight».
• Используйте только настоящие веса шрифта, а не алгоритмическую жирность.
• Создавайте Text Styles для единообразия и быстрого обновления.
• Bold применяется только для акцентов — не более 3 элементов на экране.
• Тестируйте жирность на разных экранах и с учётом доступности.