CSSルート相対フォント単位カリキュレーターとは
ルート相対フォント単位（Baseline 2026：Chrome 131+、Safari 18.2+、Firefox 136+）は、開発者にルート要素フォントの特定のグリフ測定値へのアクセスを提供します。rcapはキャップ高さ（大文字の高さ）に等しく、rchは文字幅（0グリフのアドバンス測定値）に等しく、rexはx-height（xのような小文字の高さ）に等しく、ricは表意文字幅（CJKフォントでは通常1em）に等しくなります。単にルートフォントサイズであり、フォントの実際のグリフ比率について何も教えてくれないremとは異なり、これらの単位は使用中の書体の真のメトリクスを公開します。
クイックアンサー
rcap（キャップ高さ）、rch（文字幅）、rex（x-height）、ric（表意文字幅）は、remがフォントサイズのみを反映するのとは異なり、ルート要素フォントの特定のグリフ測定値を参照するルート相対フォント単位です。それらのピクセル値はフォントファミリーによって異なります。キャップ高さの調整にはrcap、垂直リズムにはrex、文字幅のサイズ指定にはrch、CJKテキストにはricを使用します。Chrome 131+、Safari 18.2+、Firefox 136+（Baseline 2026）。
Last updated: 2026-06-01
制限事項
- これらの単位はルート要素フォントを参照し、適用先の要素は参照しません。要素相対のグリフ測定値には、cap、ch、ex、icなどの専用フォント相対単位が存在しますが、これらも普遍的にサポートされているわけではありません。単位だけを使用して特定の要素自身のキャップ高さを参照する方法はありません。
- rchはゼログリフの幅を測定しますが、これは特定のテキストコンテンツの平均文字幅を表さない可能性があります。文字幅が混在するフィールド（住所など）では、rchで設定された幅がワイド文字ではオーバーフローしたり、狭い文字では余分なスペースが残ったりする可能性があります。
- ricは非CJKフォントでは1emに等しく、ラテンテキストではremと冗長になります。ricの値がremと異なるのは、ルートフォントに表意文字グリフメトリクスが含まれている場合のみで、これは主に中国語、日本語、韓国語フォントに適用されます。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- ルートフォントファミリーとサイズを入力すると、フォントの実際のグリフ測定値に基づいて、rcap、rch、rex、ricの計算されたピクセル等価値が表示されます。
- 各単位をremと比較して比率を確認します。x-heightが大きいフォントはrex値がremに近くなり、小文字が小さいフォントはrexが小さくなります。
- プリセットからユースケースを選択して推奨単位を見つけます。調整にはキャップ高さ、垂直リズムにはx-height、入力サイズ指定には文字幅。
- 選択した単位を選択したプロパティに適用した生成CSSを、remフォールバック宣言とともにコピーします。
主な用途
- rcapを使用して、装飾的なイニシャルキャップやドロップキャップの高さを周囲のテキストのキャップ高さに正確に合わせ、オーバーシュートやギャップを回避します。
- フォーム入力フィールドとモノスペースコードブロックを実際の文字幅（rch）に基づいてサイズ設定し、40のmaxlengthがフィールド幅内に正確に収まるようにします。
- 異なる書体間でフォントのx-heightに比例してスケールする垂直リズムのために、rexを使用してテキスト要素の垂直スペーシング（マージン、パディング）を設定します。