今日は、ワイドディスプレイの普及とディスプレイの高精細化が進んでいることを考慮して、改めてWebサイトに適切な文字サイズを考えてみましょう。
あなたのサイトでは、本文の基本文字サイズを何ピクセルにしていますか? その文字サイズは、訪問者にとって見やすいサイズですか?
二昔前は、小さな文字のオシャレなページが流行っていましたが、ここ数年は「見やすい文字サイズ」を選ぶようになっていますね。ヤフーやアサヒコムなどの代表的なサイトでは、本文16ピクセルを基本としているようです。
実はこの「ピクセル」というサイズ指定は、絶対サイズではありません。というのも、どんなディスプレイでどう表示されるかによって、実際の表示サイズが変わるからです。
ちなみに、16ピクセルの文字は、XGA(1024×768ピクセル)の15インチ液晶では4.8mmの大きさになります。手元にあった新聞の本文文字サイズを測ってみると14Q(3.5mm)でしたから、約1.37倍。紙とディスプレイの視認性の違いを考えても、少し大きめといったところでしょうか。
さて、最近の売れ筋のノートパソコンやディスプレイを調べてみると、画面サイズは、ディスプレイで17インチから27インチほど、ノートパソコンで 10インチ~16インチほど。解像度は1280×1024から1920×1200と幅広くありました。最近は、DVDやテレビをパソコンで視る人も多いからか、ディスプレイのワイド化が進んでおり、さらに解像度も高くなってきているようです。
そこで、さまざまなディスプレイで、
・16pxの文字が実寸でどれくらいの大きさで表示されるのか
・文字サイズ4.2mm(紙の14Qの1.2倍サイズ)で表示されるピクセルサイズ
を調べてみました。
※行右端の☆マークは、16px=4.2mmより2割以上小さくなるデバイスを表す
※ドットピッチとは画面の1ピクセルの間隔
※崩れて見える場合はMSゴシックなどの等幅フォントで表示してください
■ノートパソコン
液晶 | | ドット | 16pxは | 4.2mmは
サイズ | 解像度 | ピッチ | 何mm? | 何px?
-------|------------|---------|--------|--------
16.4" | 1600× 900 | 0.23 mm | 3.6 mm | 18.5 px
15.4" | 1920×1200 | 0.17 mm | 2.8 mm | 24.3 px ☆
15.4" | 1280× 800 | 0.26 mm | 4.1 mm | 16.2 px
14.1" | 1440× 900 | 0.21 mm | 3.4 mm | 19.9 px ☆
13.3" | 1440× 900 | 0.20 mm | 3.2 mm | 21.1 px ☆
12.1" | 1440× 900 | 0.18 mm | 2.9 mm | 23.2 px ☆
12.1" | 1280× 800 | 0.20 mm | 3.3 mm | 20.6 px ☆
12.1" | 1024× 768 | 0.24 mm | 3.8 mm | 17.5 px
10.4" | 1024× 768 | 0.21 mm | 3.3 mm | 20.4 px ☆
10.2" | 1024× 768 | 0.20 mm | 3.2 mm | 20.8 px ☆
続きは会員限定です。無料の読者会員に登録すると続きをお読みいただけます。
- 会員登録 (無料)
- ログインはこちら
関連記事
2009.02.10
2015.01.26
安田 英久
株式会社インプレスビジネスメディア Web担当者Forum編集長
企業のウェブサイト活用やウェブマーケティングに関するメディア「Web担当者Forum」(http://web-tan.forum.impressrd.jp/)を運営しています。