ワイドディスプレイの普及でWebの文字が大きくなる?
今日は、ワイドディスプレイの普及とディスプレイの高精細化が進んでいることを考慮して、改めて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倍サイズ)で表示されるピクセルサイズ
を調べてみました。
液晶サイズ (インチ) | 解像度 | ドットピッチ (mm) | 16pxは 何mm? | 4.2mmは 何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 |
■ネットブック | ||||
10.2" | 1024×600 | 0.22 mm | 3.5 mm | 19.2 px |
10.1" | 1024×576 | 0.22 mm | 3.5 mm | 19.2 px |
10" | 1024×600 | 0.21 mm | 3.4 mm | 19.6 px |
8.9" | 1024×600 | 0.19 mm | 3.0 mm | 22.1 px |
■ディスプレイ | ||||
30" | 2560×1600 | 0.25 mm | 4.0 mm | 16.6 px |
27" | 1920×1200 | 0.30 mm | 4.8 mm | 13.9 px |
24" | 1920×1200 | 0.27 mm | 4.3 mm | 15.6 px |
24" | 1920×1080 | 0.28 mm | 4.4 mm | 15.2 px |
22" | 1680×1050 | 0.28 mm | 4.5 mm | 14.9 px |
21.5" | 1920×1080 | 0.25 mm | 4.0 mm | 16.9 px |
21.3" | 1600×1200 | 0.27 mm | 4.3 mm | 15.5 px |
20" | 1680×1050 | 0.26 mm | 4.1 mm | 16.4 px |
19" | 1440×900 | 0.28 mm | 4.5 mm | 14.8 px |
19" | 1280×1024 | 0.29 mm | 4.7 mm | 14.3 px |
17" | 1280×1024 | 0.26 mm | 4.2 mm | 15.9 px |
15" | 1024×768 | 0.30 mm | 4.8 mm | 14.1 px |
14" | 1024×768 | 0.28 mm | 4.4 mm | 15.1 px |
ここから、次のようなことがわかります。
16pxの文字の表示サイズは2.8mm~4.8mm、4.2mmの表示サイズにするための文字サイズ指定は13.9px~24.3pxと、表示デバイスによって1.7倍の開きがある。
デスクトップPC用の液晶ディスプレイは、サイトを作る側が想定している文字サイズと大きく変わらない表示になっている。
ネットブックも文字が小さく表示されがちだが、さほど極端に小さく表示されているわけではない。
ノートパソコンでは、想定しているよりもかなり小さい文字で表示されている可能性が高い。
特にノートパソコンでは、12インチ~13インチで1440×900ピクセルという、メジャーなタイプで文字が小さく表示されてしまうのが厳しいところ。そういった環境では、16ピクセルの文字が新聞よりも小さく表示されているということです。
最近はオフィスでもスペース節約のためにノートパソコンを使う企業も多いし、女性や学生などはノートパソコンを好む印象があります。ユーザー層に応じて、本文の文字は、これまでの16ピクセルよりも大きなサイズを選ぶほうが良い場合もあるかもしれませんね。
この記事は、メールマガジン「Web担ウィークリー」やINTERNET Watchの「週刊 Web担当者フォーラム通信」に掲載されたコラムをWeb担サイト 上に再掲したものです。
コメント
本文サイズを何pxにす
本文サイズを何pxにするかは、サイト制作者じゃなくてブラウザの使用者が決めることじゃ?
Re: 本文サイズを何pxにするか
編集部の安田です。コメントありがとうございます。
んーと、おっしゃりたいことはわかるんですが、この記事は「どう指定するか」の問題じゃなくて、「標準的な設定でみている大多数の人にどう表示されると想定するか」の問題を論じています。
その想定や仮説なしにデザインできるシチュエーションが皆無だとは言いませんが、多くの場合は前提として1回は考えておくべきなんじゃないか、という提案ですので、そういった観点で読んでいただけると助かります。
# 記事中でサイズを選ぶとか指定するとか書いてあるじゃないか、という突っ込みはご容赦を