Типографика в работе: от стилей в Figma до передачи в вёрстку

Твой текст живёт в разных мирах

Твой дизайн будут смотреть с iPhone, Android-смартфона, ноутбука на Windows, макбука и даже умных часов. У каждой платформы — свои системные шрифты: San Francisco у Apple, Roboto у Google, Segoe UI у Microsoft. Использовать их — значит дать пользователю привычный, «родной» опыт.

Но если бренду нужен уникальный характер — подключаем веб-шрифт. Правило простое: нативные шрифты = скорость и привычность. Кастомные шрифты = уникальность и бренд. Выбирай осознанно, а не «потому что красиво».

Адаптив: как текст «сжимается» под мобильные

То, что работает на десктопе, может сломаться на телефоне. На маленьком экране иерархия должна быть ещё чётче.

Правило: уменьшай не только размеры, но и «шаг» между уровнями.
Например, если на десктопе H1 = 48px, а H2 = 32px, то на мобильном H1 = 28px, а H2 = 22px. Так сохраняется контраст, но не тратится место.

Совет: в Figma используй Auto Layout и Constraints — так текстовые блоки будут адаптивными «из коробки». Проверяй макет на разных брейкпоинтах: переключай фреймы и смотри, не «слиплись» ли уровни.

Text Styles в Figma: один раз настроил — применяешь везде

Рисовать каждый заголовок вручную — путь к хаосу и правкам. В Figma есть Text Styles: сохраняешь настройки шрифта один раз и применяешь во всём проекте.

Как сделать? Выдели текст → панель Design → Text → Style → создай новый (например, «H1 / Desktop / Inter / Bold / 32px»). Повтори для H2, Body, Caption. Плюсы: consistency во всём проекте, быстрая правка (изменил стиль — обновилось везде), лёгкий handoff разработчикам.

Называй стили понятно: с префиксами (H1, Body, Label) и указанием платформы (Desktop/Mobile). Это сэкономит часы работы тебе и нервы команде.

От Text Styles к UI-киту: первый шаг к системе

Когда у тебя есть набор Text Styles, цветов, кнопок и отступов — это уже не просто макет, а прототип UI-кита. UI-кит — это библиотека готовых элементов, которые можно быстро собирать в новые экраны.

А если добавить правила использования, документацию и версионность — получится дизайн-система. Звучит сложно? На старте достаточно простого: создай в Figma отдельную страницу «Styles», собери там все текстовые стили, подпиши, где какой использовать. Это уже система. И это уже ценно для команды и заказчика.

Handoff: как передать макет разработчику и не сойти с ума

Ты сделал красивый макет. Но если разработчик не поймёт, какой шрифт, вес или отступ ты использовал — всё поедет. Простые правила:

1. Называй Text Styles понятно: «Body / Regular / 16px / Inter».
2. Указывай fallback-шрифты: если Inter не загрузится, какой показать? (обычно Arial, sans-serif).
3. Пиши примечания: «H1 только для главной», «Caption — для второстепенного текста».
4. Экспортируй спецификации: Figma → Inspect → копируй CSS-параметры.

Чем понятнее ты передашь — тем меньше правок на вёрстке. А это — твоя репутация профи.

Верно: вариант 2.

Конкретные цифры — это факт. «Чуть больше» — субъективно, а 34px — понятно всем. Профи общаются на языке данных, а не ощущений. Так вы сэкономите время друг другу и избежите круга правок.

Практика — смотри, как делают профи

1. Открой в Figma публичную дизайн-систему: Ant Design Open Source
2. Найди раздел «Typography» и посмотри:
3. Какие размеры они используют для H1, Body, Caption?
4. Как названы стили? (есть ли префиксы, платформа?)

Не копируй вслепую — просто отметь одну идею, которую возьмёшь себе. Например: «О, они используют префиксы в названиях — удобно!». Запиши находку. Это твоя первая «кража как художник».

Хочешь расти дальше?

В следующем модуле разберём продвинутые темы:

1. Variable Fonts: один шрифт вместо десяти — оси веса, ширины, анимация
2. Мультиязычность: RTL, иероглифы, адаптация под разные алфавиты
3. Типографика в дашбордах: таблицы, цифры, моноширинные шрифты
4. Анимация текста: как оживить интерфейс микро-взаимодействиями
5. Шрифт и конверсия: как типографика влияет на доверие и продажи
6. Дизайн-системы: как превратить Text Styles в библиотеку для команды

Оставь заявку на уведомление — расскажем, когда стартуем!

Бонусы

Мы подготовили три материала, которые пригодятся уже сейчас:

1. Чек-лист идеальной веб-типографики:
2. Подборка промптов для дизайнера:
3. Галерея: 20 примеров крутой типографики в вебе:

Читай, сохраняй, применяй. Так держать! Ты на верном пути. 🚀

Дальше – финальный БОСС!