Newly available 条件付きOK。Chrome 118+・Safari 17.2+・Firefox 97+で利用可能。
ユニット・関数 Newly available

cap unit

cap 単位はフォントの大文字の高さ（キャップハイト）を1単位とする。アイコンやインラインの装飾要素を大文字テキストの高さに正確に揃えたい場合に有用。em がフォントサイズ全体に対する比率であるのに対し、cap は視覚的な大文字の高さに基づくため、より精密なタイポグラフィ調整が可能。

ユニットタイポグラフィ

概要

cap 単位はフォントの大文字の高さ（キャップハイト）を1単位とする。アイコンやインラインの装飾要素を大文字テキストの高さに正確に揃えたい場合に有用。em がフォントサイズ全体に対する比率であるのに対し、cap は視覚的な大文字の高さに基づくため、より精密なタイポグラフィ調整が可能。

対応ブラウザ

デスクトップ

Chrome 118+
Edge 118+
Safari 17.2+
Firefox 97+

モバイル

Chrome Android 118+
Safari iOS 17.2+
Firefox Android 97+

基本構文

CSS 
.inline-icon {
  /* アイコンを大文字の高さに揃える */
  width: 1cap;
  height: 1cap;
  vertical-align: middle;
}

.badge {
  /* 大文字の高さベースでバッジサイズを調整 */
  height: 1.5cap;
  min-width: 1.5cap;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

実務での使いどころ

  • インラインアイコンの整列

    テキスト横のアイコンサイズを cap 単位で指定し、大文字の高さにぴったり合わせる。

注意点

  • cap の値はフォントによって異なるため、フォント変更時にレイアウトが崩れる可能性がある。

アクセシビリティ

  • cap 単位はフォントメトリクスに基づくため、ユーザーがフォントを変更しても相対的なサイズ関係が維持される利点がある。

参考リンク