Заголовок в карточке визуально «съезжает» вниз, кнопка с иконкой центрируется криво, отступы сверху и снизу различаются, хотя в макете равны. Причина - half-leading: браузер делит
line-height над и под строкой по метрикам шрифта, а не по нарисованным глифам. В дизайн-системах это ломает вертикальный ритм.Что делают свойства
text-box-trim: trim-both срезает leading сверху и снизу до em-box. text-box-edge: cap alphabetic задаёт метрики: cap height сверху, baseline снизу..btn {
line-height: 1;
padding: 12px 20px;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}После этого
padding снова отвечает за оптический отступ, а не борется с leading.Production-контекст
Кнопки с иконками, бейджи, заголовки карточек e-commerce и заголовки SaaS-дашбордов: уходит 2-4 px плавающего сдвига при смене шрифта или фолбэка, компоненты перестают зависеть от отрицательных margin.
Trade-offs
Поддержка неполная: без trim текст останется с обычным leading, поэтому обрезку нельзя закладывать в расчёт высоты контейнера. Свойство режет line box, и высокие диакритики или выносные элементы могут пострадать - тестируйте на реальном контенте.
Практика
Включайте через
@supports, покрывайте кнопки и заголовки скриншот-тестами. Для body-text выигрыш мал, а риск обрезки выше - применяйте точечно.