「ワイドディスプレイの普及で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倍サイズ）で表示されるピクセルサイズ
を調べてみました。

※色つきの行は、16px＝4.2mmよりも2割以上小さくなるデバイス
※ドットピッチとは画面の1ピクセルの間隔を示します


<table border="1">
<tr>
	<th>液晶サイズ<br>（インチ）</th>
	<th>解像度</th>
	<th>ドットピッチ<br>（mm）</th>
	<th>16pxは<br>何mm？</th>
	<th>4.2mmは<br>何px？</th>
</tr>
<tr>
	<td colspan="5" style="font-weight: bold;">■ノートパソコン</td>
</tr>
<tr>
	<td style="text-align: right;">16.4"</td>
	<td>1600×900</td>
	<td style="text-align: right;">0.23 mm</td>
	<td style="text-align: right;">3.6 mm</td>
	<td style="text-align: right;">18.5 px</td>
</tr>
<tr style="background-color: rgb(255, 255, 153);">
	<td style="text-align: right;">15.4"</td>
	<td>1920×1200</td>
	<td style="text-align: right;">0.17 mm</td>
	<td style="text-align: right;">2.8 mm</td>
	<td style="text-align: right;">24.3 px</td>
</tr>
<tr>
	<td style="text-align: right;">15.4"</td>
	<td>1280×800</td>
	<td style="text-align: right;">0.26 mm</td>
	<td style="text-align: right;">4.1 mm</td>
	<td style="text-align: right;">16.2 px</td>
</tr>
<tr style="background-color: rgb(255, 255, 153);">
	<td style="text-align: right;">14.1"</td>
	<td>1440×900</td>
	<td style="text-align: right;">0.21 mm</td>
	<td style="text-align: right;">3.4 mm</td>
	<td style="text-align: right;">19.9 px</td>
</tr>
<tr style="background-color: rgb(255, 255, 153);">
	<td style="text-align: right;">13.3"</td>
	<td>1440×900</td>
	<td style="text-align: right;">0.20 mm</td>
	<td style="text-align: right;">3.2 mm</td>
	<td style="text-align: right;">21.1 px</td>
</tr>
<tr style="background-color: rgb(255, 255, 153);">
	<td style="text-align: right;">12.1"</td>
	<td>1440×900</td>
	<td style="text-align: right;">0.18 mm</td>
	<td style="text-align: right;">2.9 mm</td>
	<td style="text-align: right;">23.2 px</td>
</tr>
<tr style="background-color: rgb(255, 255, 153);">
	<td style="text-align: right;">12.1"</td>
	<td>1280×800</td>
	<td style="text-align: right;">0.20 mm</td>
	<td style="text-align: right;">3.3 mm</td>
	<td style="text-align: right;">20.6 px</td>
</tr>
<tr>
	<td style="text-align: right;">12.1"</td>
	<td>1024×768</td>
	<td style="text-align: right;">0.24 mm</td>
	<td style="text-align: right;">3.8 mm</td>
	<td style="text-align: right;">17.5 px</td>
</tr>
<tr style="background-color: rgb(255, 255, 153);">
	<td style="text-align: right;">10.4"</td>
	<td>1024×768</td>
	<td style="text-align: right;">0.21 mm</td>
	<td style="text-align: right;">3.3 mm</td>
	<td style="text-align: right;">20.4 px</td>
</tr>
<tr style="background-color: rgb(255, 255, 153);">
	<td style="text-align: right;">10.2"</td>
	<td>1024×768</td>
	<td style="text-align: right;">0.20 mm</td>
	<td style="text-align: right;">3.2 mm</td>
	<td style="text-align: right;">20.8 px</td>
</tr>
<tr>
	<td colspan="5" style="font-weight: bold;">■ネットブック</td>
</tr>
<tr>
	<td style="text-align: right;">10.2"</td>
	<td>1024×600</td>
	<td style="text-align: right;">0.22 mm</td>
	<td style="text-align: right;">3.5 mm</td>
	<td style="text-align: right;">19.2 px</td>
</tr>
<tr>
	<td style="text-align: right;">10.1"</td>
	<td>1024×576</td>
	<td style="text-align: right;">0.22 mm</td>
	<td style="text-align: right;">3.5 mm</td>
	<td style="text-align: right;">19.2 px</td>
</tr>
<tr>
	<td style="text-align: right;">10"</td>
	<td>1024×600</td>
	<td style="text-align: right;">0.21 mm</td>
	<td style="text-align: right;">3.4 mm</td>
	<td style="text-align: right;">19.6 px</td>
</tr>
<tr style="background-color: rgb(255, 255, 153);">
	<td style="text-align: right;">8.9"</td>
	<td>1024×600</td>
	<td style="text-align: right;">0.19 mm</td>
	<td style="text-align: right;">3.0 mm</td>
	<td style="text-align: right;">22.1 px</td>
</tr>
<tr>
	<td colspan="5" style="font-weight: bold;">■ディスプレイ</td>
</tr>
<tr>
	<td style="text-align: right;">30"</td>
	<td>2560×1600</td>
	<td style="text-align: right;">0.25 mm</td>
	<td style="text-align: right;">4.0 mm</td>
	<td style="text-align: right;">16.6 px</td>
</tr>
<tr>
	<td style="text-align: right;">27"</td>
	<td>1920×1200</td>
	<td style="text-align: right;">0.30 mm</td>
	<td style="text-align: right;">4.8 mm</td>
	<td style="text-align: right;">13.9 px</td>
</tr>
<tr>
	<td style="text-align: right;">24"</td>
	<td>1920×1200</td>
	<td style="text-align: right;">0.27 mm</td>
	<td style="text-align: right;">4.3 mm</td>
	<td style="text-align: right;">15.6 px</td>
</tr>
<tr>
	<td style="text-align: right;">24"</td>
	<td>1920×1080</td>
	<td style="text-align: right;">0.28 mm</td>
	<td style="text-align: right;">4.4 mm</td>
	<td style="text-align: right;">15.2 px</td>
</tr>
<tr>
	<td style="text-align: right;">22"</td>
	<td>1680×1050</td>
	<td style="text-align: right;">0.28 mm</td>
	<td style="text-align: right;">4.5 mm</td>
	<td style="text-align: right;">14.9 px</td>
</tr>
<tr>
	<td style="text-align: right;">21.5"</td>
	<td>1920×1080</td>
	<td style="text-align: right;">0.25 mm</td>
	<td style="text-align: right;">4.0 mm</td>
	<td style="text-align: right;">16.9 px</td>
</tr>
<tr>
	<td style="text-align: right;">21.3"</td>
	<td>1600×1200</td>
	<td style="text-align: right;">0.27 mm</td>
	<td style="text-align: right;">4.3 mm</td>
	<td style="text-align: right;">15.5 px</td>
</tr>
<tr>
	<td style="text-align: right;">20"</td>
	<td>1680×1050</td>
	<td style="text-align: right;">0.26 mm</td>
	<td style="text-align: right;">4.1 mm</td>
	<td style="text-align: right;">16.4 px</td>
</tr>
<tr>
	<td style="text-align: right;">19"</td>
	<td>1440×900</td>
	<td style="text-align: right;">0.28 mm</td>
	<td style="text-align: right;">4.5 mm</td>
	<td style="text-align: right;">14.8 px</td>
</tr>
<tr>
	<td style="text-align: right;">19"</td>
	<td>1280×1024</td>
	<td style="text-align: right;">0.29 mm</td>
	<td style="text-align: right;">4.7 mm</td>
	<td style="text-align: right;">14.3 px</td>
</tr>
<tr>
	<td style="text-align: right;">17"</td>
	<td>1280×1024</td>
	<td style="text-align: right;">0.26 mm</td>
	<td style="text-align: right;">4.2 mm</td>
	<td style="text-align: right;">15.9 px</td>
</tr>
<tr>
	<td style="text-align: right;">15"</td>
	<td>1024×768</td>
	<td style="text-align: right;">0.30 mm</td>
	<td style="text-align: right;">4.8 mm</td>
	<td style="text-align: right;">14.1 px</td>
</tr>
<tr>
	<td style="text-align: right;">14"</td>
	<td>1024×768</td>
	<td style="text-align: right;">0.28 mm</td>
	<td style="text-align: right;">4.4 mm</td>
	<td style="text-align: right;">15.1 px</td>
</tr>
</table>

ここから、次のようなことがわかります。

16pxの文字の表示サイズは2.8mm～4.8mm、4.2mmの表示サイズにするための文字サイズ指定は13.9px～24.3pxと、表示デバイスによって1.7倍の開きがある。

デスクトップPC用の液晶ディスプレイは、サイトを作る側が想定している文字サイズと大きく変わらない表示になっている。

ネットブックも文字が小さく表示されがちだが、さほど極端に小さく表示されているわけではない。

ノートパソコンでは、想定しているよりもかなり小さい文字で表示されている可能性が高い。

特にノートパソコンでは、12インチ～13インチで1440×900ピクセルという、メジャーなタイプで文字が小さく表示されてしまうのが厳しいところ。そういった環境では、16ピクセルの文字が新聞よりも小さく表示されているということです。

最近はオフィスでもスペース節約のためにノートパソコンを使う企業も多いし、女性や学生などはノートパソコンを好む印象があります。ユーザー層に応じて、本文の文字は、これまでの16ピクセルよりも大きなサイズを選ぶほうが良い場合もあるかもしれませんね。