Посмотрите на первую кнопку на иллюстрации. Кажется, что текст на ней немного сдвинут вниз, правда? Когда я выкладывала этот материал в своем Телеграм-канале для дизайнеров, с этим утверждением все согласились. На самом деле он выровнен строго по центру — сверху и снизу от текста до края кнопки по 24px.
Такое искажение положения текста на кнопке возникает из-за особенностей самого текста. Дело в том, что у него есть дополнительные интервалы над и под буквами. Они помогают строкам текста не слипаться, когда их несколько.
Однако если текст занимает одну строку, эти интервалы создают лишнее пространство, которое мешает дизайнеру точно выравнивать его относительно других элементов. По этой же причине и текст на кнопке из примера выше визуально кажется слегка смещённым вниз.
Решить проблему с лишними интервалами можно несколькими способами. Например, в нашем случае с кнопкой можно:
• уменьшить межстрочный интервал текста (line height);
• увеличить нижний внутренний отступ кнопки (padding);
• или воспользоваться функцией Vertical Trim; на этой функции остановимся подробнее.
Vertical Trim в Figma позволяет выбрать, как отображать контейнер с текстом.
По умолчанию используется стандартный режим (Standard). Но можно включить вариант Cap height to baseline. Тогда Figma автоматически убирает лишние интервалы сверху и снизу, и контейнер точно совпадает с высотой букв.
Эта функция очень полезна, если вы используете её в дизайнерских целях. Но если вы готовите проект для разработки, использовать Vertical Trim нужно с осторожностью.
Главная проблема в том, что свойство Cap height to baseline пока поддерживается не всеми браузерами — например, его не поддерживает Firefox. Поэтому перед использованием данного свойства в Figma обязательно обсудите этот момент с разработчиком, чтобы убедиться, что он потом сможет корректно реализовать такой способ отображения текста.
Комментарии (6)
udinhtml
05.11.2025 21:13Краем уха слышал как-то и наблюдал лично сам, что базовая линия может смещаться из-за неудачной конвертации или каких-то других операций с файлами шрифтовой гарнитуры. И получается, что скачивая одно и то же семейство, базовая линия у них может быть разной. Поэтому имеет смысл пробовать скачивать с сайта разработчика, а не с google fonts, например, если пошло что-то не так.
VBDUnit
05.11.2025 21:13Странно что Фигма по умолчанию не включает эту штуку.
Приходилось писать быстрый рендеринг многострочного текста вдоль кривой Безье, поседел от количества нюансов и того, насколько на самом деле у шрифтов много заморочек и нюансов. У них туча разных вспомогательных линий и размеров.
И выравнивание текста в простейшем случае должно опираться на размер строчной латинской буквы «x», а не на фактический размер букв. В крайнем случае — на размер кегля.
Отсюда: https://alzari.ru/shrifty.html 
Kaelns
05.11.2025 21:13Потому что поддержка у этого свойства в css только с 25 года только в новейших браузерах.
Мне кажется в фигме всё же в большинстве своём сайты лепят, а не что-то лишь бы жизнь испортить
Это я чего так: приходится бывает на другом проекте что-то делать, а там бардак - дизайнер ни тему не сделал, так ещё и сам по себе решил это обрезание подрубить. Ему говорим исправь - ему пофиг. В итоге все паддинги и тд приходилось вручную подбирать.
VBDUnit
05.11.2025 21:13Потому что поддержка у этого свойства в css только с 25 года только в новейших браузерах.
А что мешает сделать микросервис, который на вход жрёт шрифт, а на выходе дает всю нужную инфу о его размерах и прочих ТТХ? В конце концов это можно сделать на бекенде с кешированием. В общем, может я опять перегибаю оверинжиниринг, но для меня подобные проблемы выглядят как‑то диковато.
В WPF для десктопа 2008 года всё это было из коробки. Там только рендеринг шрифтов в самом начале был размытый из‑за игонра хинтинга, но это быстро починили. Почему эти сверхтехнологии инопланетных цивилизаций дошли до веба в 2025 году, большая загадка. И это при том, что сейчас на WebKit делают буквально почти всё.
Это я чего так: приходится бывает на другом проекте что-то делать, а там бардак - дизайнер ни тему не сделал, так ещё и сам по себе решил это обрезание подрубить. Ему говорим исправь - ему пофиг. В итоге все паддинги и тд приходилось вручную подбирать.
Ну имхо это уже организационная проблема, а не техническая. Работали бы нормально паддинги, что‑нибудь другое бы дизайнер забыл бы сделать.
amvasiljev
Золотые слова.