Коротко — потому что «Roboto» в Figma и «Roboto» в браузере не обязательно одинаковые: разные файлы/варианты/оси вариативных шрифтов, разная подстройка (hinting), разные алгоритмы сглаживания (subpixel vs grayscale), синтез веса/курсива браузером, разная обработка фич OpenType и кернинга. Из‑за этого высота, толщина и формы могут отличаться. Полностью 100% совпадение не всегда достижимо, но можно почти подогнать. Что проверить и сделать — чек‑лист с практическими шагами.
1) Убедитесь, что используете тот же файл шрифта, что и в Figma
- Посмотрите в Figma, какой конкретно Roboto (Roboto Regular / Roboto Variable / Roboto Flex и т. п.) и какая версия.
- Скачайте точно такой же файл (лучше self‑host woff2/woff из Google Fonts или репозитория), а не полагайтесь на системный локальный Roboto.
- В @font-face явно указывайте font-weight и font-style для каждого файла (или диапазон для переменных шрифтов).
Пример:
@font-face {
font-family: 'Roboto';
src: url('/fonts/roboto-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
2) Проверьте, что браузер не «синтезирует» вес или курсив
- Если указали font-weight: 500, а файл 500 отсутствует, браузер сделает «faux bold». Решение — подключить нужные веса или использовать переменный шрифт.
- Отключите синтез, если хотите контроль: font-synthesis: none;
3) Убедитесь в числовом совпадении веса и стиле
- Используйте точные числовые значения font-weight (100–900), а не «bold/normal».
- Если в Figma стоит Weight = 500, в CSS поставьте font-weight: 500 и подключите файл/ось для 500.
4) Формат шрифта и вариативность
- Figma может использовать вариативный файл (axis wght/opsz и т. п.). Если в Figma используется вариативный Roboto, в CSS можно управлять через font-variation-settings: 'wght' 450;
- Если вы подключаете статические .ttf/.otf/woff2 с другими метриками — формы будут отличаться.
5) OpenType‑фичи, кернинг и лигатуры
- Figma включает ли автоматический кернинг/лигатуры? Сверьте и в CSS:
- font-kerning: normal;
- font-variant-ligatures: common-ligatures;
- font-feature-settings: 'liga' 1, 'kern' 1;
- Иногда включение optimizeLegibility помогает: text-rendering: optimizeLegibility;
6) Антиалиасинг/сглаживание (самая заметная причина)
- Рендеринг шрифтов зависит от движка (Skia, DirectWrite, CoreText и т.д.) и настроек OS. Figma (особенно desktop) и браузер могут использовать разные алгоритмы.
- На macOS можно попробовать:
- -webkit-font-smoothing: antialiased; /* делает «тоньше» (grayscale) */
- -webkit-font-smoothing: subpixel-antialiased; /* не всегда поддерживается */
- -moz-osx-font-smoothing: grayscale;
- На Windows подбирать бессмысленно — ClearType и субпиксельная отрисовка могут отличаться.
- Попробуйте переключать эти свойства, чтобы приблизиться к виду Figma. Но точного совпадения не гарантировать.
7) Высота строки, размер, letter-spacing
- Сверьте точные параметры из Figma: font-size, line-height, letter-spacing (tracking). Малые различия сильно влияют на визуальное восприятие.
- Используйте точные значения (px) вместо относительных, если нужно пиксельно.
8) Убедитесь, что загружается именно ваш файл
- В Chrome DevTools → Fonts/Network проверьте, какой файл загружен и какие вес/формат используются.
- Уберите local() в src, если локальная версия ОС отличается и мешает.
9) Дополнительные CSS‑хитрости (если нужно приближать визуально)
- Корректировать weight: иногда проще поднять/опустить font-weight на 50–100 для визуального совпадения.
- Применять тонкий text-shadow (не рекомендуется, но может «утолщить» визуально):
text-shadow: 0 0 0 rgba(0,0,0,0.01);
- Принудительный рендер на GPU (иногда меняет сглаживание): transform: translateZ(0); backface-visibility: hidden;
10) Реальность: точного 1:1 может не быть
- Разные рендереры, hinting в шрифтах и особенности ОС делают идеальное совпадение маловероятным. Можно добиться очень близкого результата, но могут быть микроотличия.
Практическая последовательность действий (рекомендуемая)
1. Откройте Figma, посмотрите точное имя шрифта/версию/вес.
2. Скачайте тот же файл и self‑host (.woff2).
3. Подключите через @font-face с правильными font-weight/font-style и без local(), убедитесь по DevTools, что загружен ваш файл.
4. Примените в CSS точные значения font-size, line-height, letter-spacing.
5. Попробуйте включить/выключить -webkit-font-smoothing и font-synthesis: none, font-kerning и font-feature-settings до лучшего соответствия.
6. Если всё ещё видно различие — попробуйте подключить тот же вариативный файл и управлять осью wght (font-variation-settings) для точной подгонки.
Если хотите — прикрепите:
- скриншот из Figma и из браузера,
- ваш @font-face и пример CSS‑стиля,
- информацию какой файл шрифта вы подключаете (woff2/ttf и откуда) —
я посмотрю и подскажу конкретные правки.