ex unit

概要

フォントの小文字「x」の高さを基準とする相対単位です。テキストの本文サイズに正確に比例するため、アイコンやインライン要素をテキストの高さに合わせる場合に最適です。フォントによってex/emの比率が異なるため、フォント固有のサイジングが必要な場面で活用できます。

対応ブラウザ

基本構文

.inline-icon {
  width: 1ex;
  height: 1ex;
  vertical-align: middle;
}
.superscript {
  font-size: 0.8ex;
}

実務での使いどころ

• インラインアイコンのサイズ調整

  テキスト内に配置するアイコンの大きさをex単位で指定し、フォントの小文字の高さに正確に合わせます。

注意点

アクセシビリティ

• ex単位はフォントサイズ設定に追従するため、ユーザーのアクセシビリティ設定を自然に尊重します。

参考リンク

• MDN Web Docs — ex unit