Новые CSSединицы rcap, rch, rex, ric
В CSS давно есть единицы вроде rem, em , но они не всегда хорошо отражают реальные метрики конкретного шрифта. Это особенно заметно в интерфейсах, где важны пропорции текста, иконок, полей ввода и отступов.
Новые корневые единицы rcap, rch, rex и ric как раз решают эту задачу: они позволяют строить размеры не от абстрактного font-size, а от реальных характеристик шрифта корневого элемента <html>.
Перейдем к самим единицам с минимальными примерами:
rcap равен cap height корневого шрифта - номинальной высоте заглавных букв шрифта корневого элемента.
К примеру:
rcap может быть полезен для размеров иконок рядом с текстом или логотипов в шапке сайта. Если иконка должна визуально совпадать с высотой заглавных букв, ее можно привязать к rcap, а не подбирать размер вручную.
```
.nav-icon {
width: 1.2rcap;
height: 1.2rcap;
}
```
rch- (root character unit) измеряет ширину символа 0 (ноль),заданную для шрифта корневого элемента <html>.
Как это работает: браузер берет advance measure глифа 0, в шрифте корневого элемента, и это значение становится равным 1rch.
Стоит уточнить что речь идет именно о advance measure-это расстояние, на которое курсор (или печатающая головка) продвигается после отображения символа, до того, как начнет рисоваться следующий символ.
Один из самых практичных сценариев для rch — поля ввода, где ширина должна быть привязана к количеству символов.
Например, если интерфейс предполагает ввод короткого кода, PIN или номера заказа фиксированной длины, можно задать ширину поля не в px и не в rem, а через rch. Тогда размер будет опираться на реальную ширину символов корневого шрифта.
```
.code-input {
width: 8rch;
padding: 0.5rem 1rch;
}
```
Удобно использовать для элементов, которые должны быть пропорциональны ширине символов основного текста. Например, для ограничения длины строки в статьях или настройки боковых отступов, чтобы они гармонировали с ритмом текста.
rex — корневая версия ex, это x-height шрифта корневого элемента.
rex больше не привязан к конкретному элементу. Это корневая версия ex,он считается не от текущего элемента ,а от корневого элемента html.
То есть чтобы точно было понятно rex игнорирует локальные шрифты и всегда смотрит только на глобальный шрифт заданный в html.
Если корневой шрифт, например, 'Georgia', rex всегда будет использовать его метрики, даже если внутри элемента задан другой шрифт
```
html {
font-family: 'Georgia', serif;
font-size: 16px;
}
.button {
font-family: 'Courier New', monospace;
padding: 1rex;
}
```
ric-пожалуй самая не обычная единица про которую хочется сегодня расcказать.
Корневая версия ic, единицы для идеографической метрики в CJK-письменностях. Обычно она соотносится с advance measure символа 水 и полезна прежде всего для китайского, японского и корейского текста.
Удобна, когда нужно создать сетку, рассчитанную на иероглифические тексты. Например, поле для ввода на 20 иероглифов.
Единицы rcap, rch, rex и ric описаны в CSS Values and Units Module Level 4. Несмотря на то что спецификация W3C по-прежнему имеет статус Working Draft, сами единицы уже поддерживаются современными браузерами
Chrome / Edge: 135+ ✅Firefox: 130+ ✅Safari: 18.3+ ✅(на июнь 2026)
и могут использоваться в реальных проектах.
На практике это уже не эксперимент ради эксперимента, а рабочий инструмент для интерфейсов, где важны именно метрики шрифта корневого элемента, а не только font-size.
Особенно ,если вы разрабатываете интерфейсы, где важна точная типографика: лендинги, блоги, сайты с кастомизируемым шрифтом. Для обычных админок разница будет незаметна.
Краткая сводка по css-еденицам :
rch и rex: они понятнее в использовании и хорошо подходят для типографически выверенных интерфейсов, полей ввода и внутренних отступов.
rcap полезен там, где нужно соотносить размеры элементов с высотой заглавных букв, например для иконок и логотипов.
ric остается более нишевой единицей и в первую очередь нужен в интерфейсах, рассчитанных на CJK-тексты.
На всякий случай для production-проектов: используйте с @Supports или fallback-значениями, так как спецификация ещё не финальная.
Подробнее - в спецификации по ссылке ниже:
Если вам интересна тема веб-разработки, я также публикую разборы других кейсов в своем Telegram-канале и в Максе. Буду рад единомышленникам!
