Текст и типографика

d

Работа с текстом в Figma — это не просто выбор шрифта и настройка размера. Когда мы говорим «Текст и типографика» на курсе Платформы, мы имеем в виду системный подход: от метрик OpenType до технических ограничений браузерного рендеринга. В этом материале я разберу, чем именно отличается обучение на нашей платформе от дежурных «шрифтовых пар» на других сайтах. Спойлер: тут нет воды — только инженерные детали и производственные стандарты.

1. Материалы и спецификации: что реально влияет на читаемость

Шрифтовые файлы (форматы .ttf, .otf, .woff2) имеют разную внутреннюю архитектуру. В Figma мы работаем с метриками, заложенными в гарнитуру: x‑height, ascend, descend, caps height. На практике, если x‑height (высота строчных букв) меньше 450 единиц на шкале UPM, текст на экране будет казаться мелким и «сжатым», даже при 16px. Я рекомендую на курсе проверять эти цифры через панель Font Info, прежде чем утверждать макет.

Второй критический параметр — кернинговая таблица. Встроенный кернинг Figma не всегда совпадает с браузерным (Chrome использует HarfBuzz, а Firefox — Graphite). Поэтому после фиксации макета мы прогоняем текст через утилиту ttfdump и сверяем значения. На курсе мы это делаем прямо на занятии — студенты видят разницу в 1–2 пикселя между Figma и реальным рендером.

2. Технические отличия Figma от других редакторов в работе с текстом

Главное отличие Figma от Sketch и Adobe XD — использование собственного движка для отрисовки. В нём нет субпиксельного рендеринга для дисплеев Retina, как это сделано в macOS. Из‑за этого искажается интерлиньяж (межстрочный интервал) при дробных значениях. Мы на курсе рекомендуем всегда округлять line-height до целых пикселей (например, 24px для 16px, а не 1.5). Округления в меньшую сторону — 1.4 — дают наслоение глифов японских или кириллических букв с диакритикой.

Ещё одна примечательная особенность — работа с vertical metrics на кастомных шрифтах. Когда вы импортируете в Figma редкую гарнитуру (скажем, Bespoke Sharp или Stanley), движок может неправильно считать бейзлайн. Проверяется это простым способом: нарисуйте прямоугольник вокруг первой строки — если зазоры снизу больше 1px, значит метрики сбиты. На курсе мы показываем, как через CSS-правила font-display и ascent-override можно такие шрифты «подогнать» под макет.

3. Стандарты качества и производственный контроль на макетах

Все эти этапы собраны в качестве чек-листа на странице курса «Текст и типографика». Мы не просто объясняем теорию — даём реальные метрики (таблицы с допустимыми значениями кернинга для разных весов). Итог: студент получает понимание, как превратить «красивый шрифт» в repeatable production process.

4. Практические кейсы и отличия от конкурентов

В 2026 году на рынке обучения веб-дизайну два типа подходов: «визуально-интуитивный» (нарисовать красиво, не думая о коде) и «технологический» (фокус на инструменте и реализации). Наш курс уникален тем, что мы беспристрастно разбираем и первое, и второе, но с опорой на открытые спецификации (W3C, CSS 4 Font Properties). Ни одна другая площадка в рунете не даёт такого глубокого разбора микротипографики в Figma с привязкой к вёрстке.

5. Шаги к внедрению в собственный workflow

  • Шаг 1. Проверьте, что в файле шрифта есть кириллическая кернинговая пара «То» и «Ту» — при отсутствии в «Типографика» провалятся пробелы между «Т» и «о».
  • Шаг 2. Настройте систему токенов текста: указывайте не только размер и цвет, но и letter-spacing, vertical metrics, min‑width для заголовков.
  • Шаг 3. Используйте шрифты с кастомизированными метриками через параметр «сap-height» (например, интерлиньяж подстраивается под шрифт, а не наоборот).
  • Шаг 4. После фиксации макета выгрузите JSON «Text styles», чтобы разработчик брал значения line-height как количество пикселей, а не безразмерные множители.
  • Шаг 5. Не верьте автоматическому расчёту сглаживания в Figma — для экрана OpenType Functions (Case и Alternative fractions) отключаются, если не вписаны в CSS явно. На курсе мы разбираем, как писать после фиксации шрифта свойство font-feature-settings.

Каждый из этих шагов подкреплён видео с экраном Figma, где я настраиваю шрифт для реального проекта — интернет-магазина с 48‑м размером заглавий. Студенты видят, как ведут себя шрифты в экспорте (когда приложение заменяет OpenType на SVG-буквы) и как этого избежать.

6. Итог: что вы получите после раздела «Текст и типографика»

Закончив курс, вы сможете внятно объяснить дизайн-тимлиду или фронтенд-разработчику, почему в макете line-height = 1.4 — неправильное решение для данного шрифта, а 1.45 — правильное (потому что ascender/descender в файле отличается от стандартного). Вы будете разбираться в GSUB и GPOS таблицах OpenType, понимать, как кернинговая пара влияет на композицию, и сможете исправить глиф на этапе макета, не дожидаясь этапа вёрстки. По сути, это не «уроки по типографике» — это практический документ по инженерной типографике для веба.

Добавлено: 23.04.2026