スタイルシートの技

フォントサイズ指定の留意点

フォントサイズを「pt」で指定するのは目が悪い人に取ってはあまり良い設定の仕方とは言えない場合がいくつかの点を挙げると出てきます。 若者向けのページでしたら全然構わないと思うのですが、年齢層により考え方も様々だとは思いますが、いくつか例を挙げてみて行く事にします。

スタイルシートで良く使われる単位」でも紹介しましたが、スタイルシートに限った事ではなく、HTMLでも例えば、width="100%" などのように記述していますように、 単位には以下のものが存在します。

絶対単位

  • in : インチ (1[in] = 2.54[cm])
  • mm : ミリメートル
  • cm : センチメートル
  • pt : ポイント (1[pt] = 1/72[in] = 0.3528[mm])

相対単位

  • em : フォントの高さ
  • ex : 各種フォントの文字「x」の高さ
  • px : ピクセル

これで、単位系を使う時に「絶対単位」を使いますと、どのような環境でもどのようなブラウザでも同じ大きさになります。 しかし、「相対単位」を使いますと、ブラウザの違い(「Netscape Navigator」・「Internet Explorer」・「Opera」など)や、 OSの違い(「Macintosh」「Windows」「Unix」など)によります。

このように、文字の大きさというのは環境によって異なるので、 文字のサイズを含めてサイトのデザインを考えていると環境によるデザインの変化を嫌い、 文字のサイズを絶対単位で指定、つまり絶対指定するようになりました。 すると、文字のサイズはどの環境でも同じですから、自分の望んだ状態に出来ます。 しかし、これにはちょっとした落とし穴が潜んでいるのです。 確かにブラウザによって文字のフォントが小さくなりすぎたりするのを防ぐ事ができますが、 「Internet Explorer」の「表示」→「文字のサイズ」で「大」を試しに指定してみてください。

結果的にフォントは変わりません。ですから、自分では「このサイズが一番イイ!」と思っても、 閲覧者によっては細かい字が見にくくなる場合があるでしょうから、その点を注意しなくては行けません。 サイトはそれぞれ個人の自由ですが、世の中に向けて発信しようとしている人は特に注意しなくてはなりません。 フォントが小さすぎると、イライラしてしまい、一度見ただけで次からは来なくなる…と行った事もあるかもしれないからです。

これを回避する方法としては、「Internet Explorer」にすでに実装されているのですが、 メニューから「ツール」の「インターネットオプション」→「全般」→「ユーザー補助」を選びます。 その中の「Webページで指定されたフォントサイズを使用しない」を選ぶとこの問題点は回避できます。

というので、現地点では問題ないのかも知れません。 結局このサイトのトップページもブラウザ依存でフォントサイズが変わるのが嫌で最初は絶対指定にしていましたが… Verdanaの12ptでしたらどのブラウザでも表示の仕方が同じとなります。 しかし11ptにしてしまうと、Internet ExplorerとFireFox/Operaで見栄えが変わってしまいます。 Internet Explorerでは非常に綺麗なのですが、FireFox/Operaだと日本語が小さくなってしまい見栄えが悪くなってしまいます。

どの指定が一番良いのかは難しい問題で自分で判断しなくてはいけません。 スタイルシートで紹介したようにルーズリーフのような罫線を画像で使うのであれば、 フォントの大きさは固定にしておかなければなりません。 ですから、あまり小さくなりすぎないように配慮し、主なブラウザで自分で実際に表示を確認しておくと安心だと思います。