主要サイトの文字の大きさの調査
気になったので調べた。
計測環境
- 計測日時は項目ごとに異なる。
- Windows 10、Chrome 最新版で計測。
- Windows のディスプレイ拡大機能は使用しない (100% に設定)。
- Chrome のフォント設定は「中」で、拡大機能は使用しない。
- フル HD のデスクトップでブラウザを最大化した状態で計測。
計測したもの
- 本文の要素の
font-size,line-height,widthの値を計測し、さらにその指定方法 (絶対/相対) も調べた。 - 計測する値が JavaScript で動的に決まる場合もあるが、考えだすときりがないので気にしないことにした。
- 計測するサイトは独断と偏見で選んだ。Top Websites in Japan - SimilarWeb Website Ranking も参考にした。
計測結果
| サイト | font-size | 指定方法 | line-height | 指定方法 | width | 指定方法 | width / font-size (参考) |
|---|---|---|---|---|---|---|---|
| Google 検索 | 13px | small | 20.02px | 相対 | 592px | 絶対 | 45.5 |
| Yahoo! 検索 | 13px | small | 20.8px | 相対 | 566px | 絶対 | 43.5 |
| gihyo.jp | 15.1632px | 相対 | 28.8108px | 相対 | 495px | 絶対 | 32.6 |
| ねとらぼ | 16px | 相対 (1rem) | 27.2px | 相対 | 640px | 絶対 | 40.0 |
| Qiita | 16px | 相対 | 30.4px | 相対 (1.9) | 804px | グリッド | 50.3 |
| 4Gamer.net | 16px | 相対 (100%) | 24px | 相対 (1.5em) | 534px | 絶対 | 33.4 |
| 14px | 絶対 | 20px | 絶対 | 506px | 絶対 | 36.1 | |
| Wikipedia | 15.104px | 相対 (94.4%) | 24.1664px | 相対 (1.6) | 1678px | 指定なし | 111.1 |
| 小説家になろう | 16px | 絶対 | 28.8px | 絶対 | 600px | 絶対 | 37.5 |
| Medium Japan | 21px | 絶対 | 33.18 | 相対 (1.58) | 700px | 絶対 | 33.33 |
| note | 18px | 絶対 | 36px | 絶対 | 620px | 絶対 | 34.4 |
| SICP | 27.2px | 相対 (170%) | 34.272 | 相対 (126%) | 781px | 相対 (67ex) | 28.7 |
- 指定方法が相対にもかかわらず数字が書かれていないマスは、値の指定方法が複雑で表のマスに書ききれなかったことを表す。値は省略した。
- width の指定方法が絶対であるとは、幅が絶対値で指定された何らかの要素から
p要素の幅が決まっていることを表す。p要素にwidthが直接設定されたわけでは必ずしもない。
観察
- "モダン" なサイトは文字がでかい。
トリビア
-
4Gamer.net の記事の本文は
div要素で書かれている。 -
gihyo.jp の記事の本文には
text-align: justifyが指定されている。 - 小説家になろう では段落の先頭に一文字空白があるように表示されるが、ここには実際に全角スペースが入っている。