rcap, rch, rex, ric単位でルート要素に基づいたサイズを指定する
rcap, rch, rex, ricはルート要素のフォントの特性に基づいたCSSの長さ単位です。cap, ch, ex, icのルート要素を基準にした単位として、ページ全体で一貫したサイズ指定が可能になります。
はじめに
CSSにはフォントに基づいた相対単位があります。emやex、chなどがその代表です。
これらの単位は要素やその親に適用されているフォントに基づきます。一方、ルート要素（<html>）のフォントを基準にしたr接頭辞付きの単位も存在します。emに対するremがその例です。
この記事ではそんなルート要素を元とした相対単位、rcap、rch、rex、ricの4つが、Firefox 147のリリースにより、Baseline 2026に追加されたので紹介します。
cap, ch, ex, ic単位の復習
まず、Baseline 2026に追加された単位からrを取り除いたものを確認しましょう。
cap: 現在のフォントの大文字の高さch: 現在のフォントの「0」の幅ex: 現在のフォントの小文字xの高さic: 現在のフォントの「水」の幅
これらはその要素に付与されたフォントサイズか、親要素から継承されたフォントサイズに基づいて計算されます。 そのため、ネストした要素では値が変わる可能性があります。
rcap, rch, rex, ric単位の紹介
remがemのルート要素を元としたものであるように、rcap、rch、rex、ricはそれぞれcap、ch、ex、icの基準をルート要素にした単位です。
これらの単位は、常にルート要素のフォント設定に基づいて計算されます。どこで使用しても同じ値になるため、ページ全体で一貫したサイズ指定が可能です。
rのあるなしによる動作の比較
font-sizeの値を変更してみてください。chは親要素のfont-sizeに連動してサイズが変わりますが、rchは常にルート要素（16px）を基準にするため同じサイズです。
ブラウザの文字サイズ設定を変更している場合、正しく動作しないことがあります。
rcap
ルート要素のキャップハイトに基づく単位です。
.heading {
/* 大文字の高さを基準にしたマージン */
margin-bottom: 1rcap;
}rch
ルート要素の「0」の幅に基づく単位です。
.input-number {
/* 数字10桁分の幅を確保 */
width: 10rch;
}rex
ルート要素の小文字「x」の高さに基づく単位です。
.inline-icon {
/* xに合わせたアイコンサイズ */
height: 1rex;
width: 1rex;
}ric
ルート要素の「水」の幅に基づく単位です。CJKのテキストで特に有用です。
.japanese-text {
/* 全角文字20文字分の幅 */
max-width: 20ric;
}単位の比較
rcap, rch, rex, ricとそれの元となる文字の比較
幅を測る単位（rch, ric）
高さを測る単位（rcap, rex）
文字と単位バーをそれぞれ4倍にしたものを表示しています。
1ricは「水」の幅、1rch は「0」の幅、1rcap は大文字Hの高さ、1rexは小文字xの高さです。
おわりに
rcap、rch、rex、ricの4つの単位を紹介しました。
これらはremと同様にルート要素を基準とするため、コンポーネントがどこに配置されても一貫したサイズを維持できます。
特定の文字サイズに基づいた精密で相対的なサイズの指定が可能になり、デザインの一貫性を保ちやすくなります。
なお、行の高さに基づくlh単位のルート版であるrlhはBaseline 2023から利用可能です。これで、フォント関連の相対単位のルート版が全て揃いました。