ch unit
ch 単位はフォントのゼロ文字の幅を基準とするため、テキストコンテンツの幅指定に最適です。例えば max-width: 70ch は約70文字幅となり、読みやすい行長を設定できます。フォントサイズやフォントファミリーに応じて自動的にスケールするため、レスポンシブで可読性の高いタイポグラフィ設計に活用されます。
概要
ch 単位はフォントのゼロ文字の幅を基準とするため、テキストコンテンツの幅指定に最適です。例えば max-width: 70ch は約70文字幅となり、読みやすい行長を設定できます。フォントサイズやフォントファミリーに応じて自動的にスケールするため、レスポンシブで可読性の高いタイポグラフィ設計に活用されます。
対応ブラウザ
デスクトップ
Chrome 27+
Edge 12+
Safari 7+
Firefox 1+
モバイル
Chrome Android 27+
Safari iOS 7+
Firefox Android 4+
基本構文
CSS
.article-body {
max-width: 70ch;
margin: 0 auto;
}
input {
width: 20ch;
}実務での使いどころ
-
最適な行長の設定
本文テキストの最大幅を ch 単位で設定し、読みやすい行長（45〜75文字程度）を維持できます。
注意点
- ch 単位はゼロ文字の幅に基づくため、プロポーショナルフォントでは実際の文字数と一致しません。等幅フォントでは文字数と正確に一致します。
アクセシビリティ
- ch 単位で行長を制御することで、読みやすさが向上します。WCAG 2.1 では1行あたり80文字以内を推奨しています。