トップ > デザイン論 > 文字サイズは何が適切?

文字サイズは何が適切?

スポンサード リンク
Webデザインを考えるに当たって、結構悩むのが文字サイズです。

IEの場合、何も指定しないと大きなサイズで表示されます。
その為、多くのサイトが文字サイズを小さく変更して表示しています。
そこで問題になるのがサイズを固定にするか可変にするかです

ptやpxなどの絶対指定で小さくした場合、文字サイズが変わらないのでレイアウト的には非常にやりやすいです。
しかし、文字が小さくてよく見えないという場合に大きくすることが出来ません。
これでは万人に優しいホームページとは言えません。

逆に、x-smallや%などの相対指定で小さくした場合、IEとFirefoxなどのほかのブラウザでは表示サイズがかなり異なってしまう場合があります。

IEでは、ブラウザの文字サイズ設定が中の場合、互換モードにおいて100%とsmallの文字サイズが同じに表示されます。
その為、一段階小さく表示するにはx-smallを使うわけですが、そうするとFirefoxなどのほかのブラウザで見た場合に極端に小さくなってしまいます。

では、これを回避するにはどうすればよいでしょうか。

先ほど「互換モード」という言葉に触れましたが、これがポイントになっています。
HTMLファイルはドキュメントタイプ宣言という、ソースの最初に記述する宣言によってドキュメントタイプを指定することが出来ます。
これを指定しない場合は、互換モードで認識されます。

その互換モードではsmallと100%が同じサイズで表示される仕様になっています。
ですが、標準モードではmediumと100%が同じサイズで表示されます。

そこで、以下のようなドキュメントタイプ宣言を書いて標準モードにしてみます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
(最後のURL記述を入れないと互換モードになります。)

標準モードにすれば、smallで一段階小さい文字サイズを表示出来ます。
こうすれば、文字サイズを一段階小さくしてもブラウザによる表示の差があまりなくなると思います。

しかし、標準モードにした場合は少し注意が必要です。
IEにおけるwidthとpadding、borderの解釈が互換モードの時と変わってしまうからです。
ここでは関係ない話になってしまうので、それについては関連サイトをご覧下さい。

また、smallを指定している場合には、IEの文字サイズ設定が中でも小でも大体同じサイズで表示することが可能です。
私は、100%のサイズの文字は大きすぎて逆に見づらいので、ブラウザで文字サイズ設定を小にしています。
その場合にもsmallなら対応出来るのが嬉しいところです。
この時、%指定だと更に文字が小さくなってしまいます…。

これらを踏まえて、文字サイズを考える時は色々なブラウザで確認しながら決定すると良いと思います。
また、可変文字サイズに対応出来るレイアウトを作るようにするとより良いと思います。

(もしかしたらこれら解釈は間違っているかもしれません。その場合にはご指摘頂けると幸いです。)