Посмотрите на первую кнопку на иллюстрации. Кажется, что текст на ней немного сдвинут вниз, правда? Когда я выкладывала этот материал в своем Телеграм-канале для дизайнеров, с этим утверждением все согласились. На самом деле он выровнен строго по центру — сверху и снизу от текста до края кнопки по 24px.
Такое искажение положения текста на кнопке возникает из-за особенностей самого текста. Дело в том, что у него есть дополнительные интервалы над и под буквами. Они помогают строкам текста не слипаться, когда их несколько.
Однако если текст занимает одну строку, эти ин��ервалы создают лишнее пространство, которое мешает дизайнеру точно выравнивать его относительно других элементов. По этой же причине и текст на кнопке из примера выше визуально кажется слегка смещённым вниз.
Решить проблему с лишними интервалами можно несколькими способами. Например, в нашем случае с кнопкой можно:
• уменьшить межстрочный интервал текста (line height);
• увеличить нижний внутренний отступ кнопки (padding);
• или воспользоваться функцией Vertical Trim; на этой функции остановимся подробнее.
Vertical Trim в Figma позволяет выбрать, как отображать контейнер с текстом.
По умолчанию используется стандартный режим (Standard). Но можно включить вариант Cap height to baseline. Тогда Figma автоматически убирает лишние интервалы сверху и снизу, и контейнер точно совпадает с высотой букв.
Эта функция очень полезна, если вы используете её в дизайнерских целях. Но если вы готовите проект для разработки, использовать Vertical Trim нужно с осторожностью.
Главная проблема в том, что свойство Cap height to baseline пока поддерживается не всеми браузерами — например, его не поддерживает Firefox. Поэтому перед использованием данного свойства в Figma обязательно обсудите этот момент с разработчиком, чтобы убедиться, что он потом сможет корректно реализовать такой способ отображения текста.
Комментарии (7)
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 делают буквально почти всё.
Это я чего так: приходится бывает на другом проекте что-то делать, а там бардак - дизайнер ни тему не сделал, так ещё и сам по себе решил это обрезание подрубить. Ему говорим исправь - ему пофиг. В итоге все паддинги и тд приходилось вручную подбирать.
Ну имхо это уже организационная проблема, а не техническая. Работали бы нормально паддинги, что‑нибудь другое бы дизайнер забыл бы сделать.
Konstantin_VK
05.11.2025 21:13Здесь проблема еще в том, что все измерения (даже в вашем случае) проводятся по высоте заглавных букв, а основная масса текста приходится на строчные. Поэтому даже так текст будет смотреться ниже оптического центра блока.
Поэтому подход с ручной правкой паддингов, на мой взгляд, все таки надёжней.
amvasiljev
Золотые слова.