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