Единица измерения cap в CSS

С 11 декабря 2023 года (Baseline: Newly Available) в CSS появилась новая единица измерения — cap. Она измеряет высоту заглавной латинской буквы в шрифте, установленном для элемента. Это значит, что теперь можно задавать размеры, отступы и позиционирование элементов не только в пикселях, em или rem, но и относительно визуальной высоты заглавных букв.

Эта единица особенно полезна при работе с крупными заголовками, адаптивной типографикой и точным выравниванием текста.

Как это работает

Когда вы указываете font-size: 10cap, вы просите браузер установить такой размер шрифта, при котором заглавные буквы (например, H, T, A) будут примерно равны 10 условным единицам. В отличие от em или ch, cap опирается именно на высоту букв, которую дизайнер шрифта заложил в метрики гарнитуры.

Пример:

h1 {
  font-size: 10cap;
}

Если шрифт имеет заглавные буквы высотой, скажем, 0.7 от полной высоты строки, браузер пересчитает итоговый font-size, чтобы итоговая высота заглавной буквы была 10 единиц (например, пикселей).

Чем полезна единица cap

1. Предсказуемая типографика. Вы можете выравнивать заголовки, baseline, и другие элементы с точностью, зависящей не от общей высоты строки, а от фактического размера заглавной буквы.

2. Адаптивный дизайн. Вместо ручного подгона заголовков под нужную визуальную высоту — просто используете cap, и высота текста будет соответствовать ожиданиям вне зависимости от выбранного шрифта.

3. Унификация размеров. Когда важно, чтобы текст в разных блоках (например, в кнопках и заголовках) имел одинаковую оптическую высоту, cap — отличный инструмент.

Когда использовать

• При работе с динамически загружаемыми шрифтами, где em может вести себя нестабильно.
• В компонентах, где важна визуальная симметрия текста и иконок.
• Для выравнивания текста по вертикали — особенно если комбинируете текст с графикой.

Пример с вертикальным выравниванием:

.icon-label {
  padding-top: 1cap;
  padding-bottom: 1cap;
}

cap — это современная и точная единица измерения, которая делает работу с типографикой в CSS более контролируемой и предсказуемой. Она особенно полезна в проектах, где важна визуальная гармония и точность в отрисовке текста. Используйте её, если хотите добиться консистентности и избежать ручной подгонки размеров.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.