rex unit
rexは、ルート要素のフォントにおけるx-height（小文字「x」の高さ）を基準とするCSS長さ単位です。ex単位がその要素自身のフォントを基準とするのに対し、rexは常にルート要素のフォントを基準にします。テキストのx-heightに合わせたインラインアイコンのサイズ調整や、精密なタイポグラフィ設計に活用されます。
概要
rexは、ルート要素のフォントにおけるx-height（小文字「x」の高さ）を基準とするCSS長さ単位です。ex単位がその要素自身のフォントを基準とするのに対し、rexは常にルート要素のフォントを基準にします。テキストのx-heightに合わせたインラインアイコンのサイズ調整や、精密なタイポグラフィ設計に活用されます。
対応ブラウザ
デスクトップ
Chrome 111+
Edge 111+
Safari 17.2+
Firefox 147+
モバイル
Chrome Android 111+
Safari iOS 17.2+
Firefox Android 147+
基本構文
CSS
.inline-icon {
width: 1rex;
height: 1rex;
vertical-align: middle;
}実務での使いどころ
-
テキストに合わせたインライン要素のサイズ調整
ルートフォントの小文字高さに基づいてアイコンやインジケーターのサイズを設定し、テキストとの視覚的な調和を実現します。
注意点
- フォントによってx-heightの比率が大きく異なるため、Webフォントの読み込み前後でサイズが変わる可能性があります。
アクセシビリティ
- rex単位はルートフォントサイズの変更に追従するため、ユーザーのアクセシビリティ設定を尊重した設計が可能です。