Web サイト本文の一行の文字数と最大幅 max-width について考えたことをメモっとく。
前提とするブラウザとフォント
Web サイトを制作するときの対応ブラウザなど想定環境の決め方（PC 編）を前提に下記のブラウザの最新バージョンに対応する。
- Chrome
- Internet Explorer 11
- Firefox
- Safari
- Edge
Web サイト本文の font-family に指定するフォントの決め方を前提に下記の CSS のように font-family を指定する。
p {
font-family: Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
}
一行の文字数
一行の文字数は最大全角40文字（半角80文字）。
Understanding WCAG 2.0 の Understanding Success Criterion 1.4.8 に下記のような記述がある。
Width is no more than 80 characters or glyphs (40 if CJK).
また、日本語組版処理の要件（日本語版）にも下記のような記述がある。
1行の行長（字詰め数）は，縦組の場合，最大で52字くらい，横組では最大で40字くらいにする．
フォントサイズ
本文のフォントサイズは 16px。これはブラウザのデフォルトフォントサイズのことが多い。
Google Developers の PageSpeed Insights にある Use Legible Font Sizes というページには下記のような記述がある。
By default, the browser will display each font at 16px (CSS pixels). This is a good default for most cases, but may need to be adjusted for a specific font - i.e. the default size can be set lower or higher to accommodate for the different properties of the font.
MDN の CSS にある font-size というページにも下記のような記述がある。
If you haven't set the font size anywhere on the page, then it is the browser default, which is probably 16px.
最大幅 max-width の値
40 [全角文字] × 16 [px] = 640 [px] ということで、Web サイト本文の最大幅 max-width は 640px。
最大幅 max-width の指定は px と em のどっち？
個人的には px を使いたい。ただ、WCAG 2.0 は em を例示している。
Techniques for WCAG 2.0 の C20: Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized には下記のような記載がある。サンプルコードは em 指定と % 指定のよう。
Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized
Techniques for WCAG 2.0 に従いつつ最大文字数を制限することを考えると em 指定になる。
ただ、最近のブラウザは文字だけ大きくすることもページ全体を拡大することもできるから、em 指定するよりは px 指定の方が選択の幅が広がっていいんじゃないかな。（とか言いながら、この前のサンプルコードには em を使ってたよ……。）
本件は各自におまかせ。CSS Framework の都合とかもあるだろうし。（投げやり）
まとめ
ブラウザのデフォルトフォントサイズ 16px を利用することを前提に CSS で下記のような指定をすると一行の文字数が全角40文字になる。
p {
max-width: 640px;
}
em 指定の場合はこちら。
p {
max-width: 40em;
}
関連記事
Web サイトを制作するときの対応ブラウザなど想定環境の決め方（PC 編）
Web サイト本文の font-family に指定するフォントの決め方
参考文献
https://www.w3.org/TR/WCAG20/
https://www.w3.org/TR/UNDERSTANDING-WCAG20/
https://www.w3.org/WAI/GL/WCAG20-TECHS/
https://www.w3.org/TR/jlreq/ja/
https://developers.google.com/speed/docs/insights/UseLegibleFontSizes
https://developer.mozilla.org/en-US/docs/Web/CSS/font-size