■WWWにおけるデザインとフォント

同じ文章でも、ゴシック体と明朝体などフォントによって受けるイメージは大きく異なります。これを効果的に選択するのもクリエイター(発信側)の重要な役目だったのですが、WWWではクライアント側のブラウザ設定に依存してしまいます。まず、このあたりを視覚的に追ってみたいと思います。

OS・ブラウザ・書体・指定タグによる文字表示の違い


■まずは自分の環境でテストしましょう。
WEB FONT SIZE 1
(※このサイズ見本はHTMLで書いていますので環境によりサイズは異なります。)
標準以外の装飾タグなど、意外と読みづらいということがお分かりいただけると思います。また、<FONT SIZE=3>が最低ラインで、これより小さいと、ちょっと読みづらいのではないでしょうか? つまり、本文を読ませようという内容でしたら、このあたりが限界になってきそうですね。

・<FONT SIZE=1〜7>
・<H6>〜<H1>
・<FONT SIZE=1〜7><I>
・<FONT SIZE=1〜7><I><B>


■他のOS・ブラウザで、上の見本を見てみました。
WEB FONT SIZE 2
(※こちらは、上のサイズ見本を代表的なOSで表示したものを撮影しGIFにしたものです。)
よく比較するとOS・ブラウザごとに、行間や、詰め具合、サイズの大小関係のバラツキなどがあるようです。しかし、ここに挙げたものも、ほんの一環境での表示例に過ぎませんので参考程度にしてください。

・Windows 95 / Netscape Navigator 3.0 / MSゴシック
・Windows 95 / Internet Explorer 3.0 / MS明朝
・Macintosh / Netscape Navigator 3.0 / OSAKA
・Macintosh / Netscape Navigator 3.0 / リュゥミンライト


■レイアウト例
●フォントカラー・サイズから受けるイメージ
まったく同じ内容の文章を、それぞれ異なる配色とフォントサイズで表現してみました。かなりイメージが違ってきます。
(※テーブル内のバックグラウンドカラーについては、Netscape Navigator 3.0以降で表示)

・モノクロ
・高級感・ハイセンス
・重厚感
・一般的
・パンチ
・ビビット


■便利なホームページ
(※下記のリンクはインターネットに接続してご利用ください。)

●colortable (色のテスト)
背面色と文字のカラーバランスをJAVAscriptを使用してテストできるページです。


[戻る] [選ぶ] [進む]