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