Не первый раз сталкиваюсь с отличием font-weight при переносе из макета Figma в код. В этот раз решил написать статейку как решил проблему, авось кому пригодиться.
Настройка сглаживания шрифтов
Сглаживание (anti-aliasing) влияет на толщину и четкость
рендеринга шрифта: antialiased делает шрифты тоньше и четче (похоже на рендеринг в Figma), а
grayscale применяет сглаживание в градациях серого, что улучшает читаемость.
html,body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}Этот способ помог мне сразу, но рассмотрим ещё несколько
Использование font-weight с дробными значениями
Вариативные (Variable) шрифты - это гибкие шрифты, где один файл содержит разные начертания (толщину, наклон, ширину и др.).
Если шрифт поддерживает вариативные веса, можно указать более точное значение:
h1 {
font-variation-settings: "wght" 480;
}Явное указание text-rendering
Эта настройка влияет на то, как браузер будет рендерить текст: optimizeLegibility улучшает рендеринг шрифтов и кернинг.
body {
text-rendering: optimizeLegibility;
}Вот так вот просто в 2025 решается проблема разницы толщины шрифтов в Figma и в браузере.
