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