ブラウザに依存せず文字の大きさを統一させる方法

最近はユーザビリティの観点から文字サイズを可変にすることが推奨されています。
しかし、ブラウザによって文字サイズの表示が異なるのでデザインに差異がでます。
このあたりをどうにかクリアできないものか検証しました。

文字サイズの設定

InternetExplore6(以下IE6)ではスタイルシートなどで文字サイズの単位を「px」にしてしまうと、ブラウザから文字サイズの変更が効きません。
これを逆に利用して、デザイン崩れを防ぐためにユーザが文字を変えられないようにすることが一時流行りました。
しかし今は、ユーザがデザインを自由に変えられるサイトを好んだり(数種類あるスタイルシートから自分の好みでサイトで閲覧できる。例えば、0407さまのサイトを参考。)、自らのデザインでサイトを閲覧したり(ユーザスタイルシートの活用)するように変化してきています。

文字サイズを可変でき、かつサイトのデザインが崩れない(見やすい)ウェブサイトを作成しないと、閲覧してくれないというわけですね。

しかし、文字の単位に「%」や「em」を使用して、文字サイズを可変にしても、ブラウザによって文字の見た目の大きさが異なる場合があります。
実例を挙げます。下のイメージは、Win/Firefox2とWin/IE6で同じファイルを出力したサンプルです。
文字サイズを100%から70%まで変えています。文字の種類は「MS P ゴシック」です。
文字サイズ100%はブラウザのデフォルト(この場合は標準)の大きさです。FirefoxもIEも初期の100%の文字サイズは同じです。px単位に直すと16pxです。
Firefox2.0とIE6の文字サイズ

このイメージを見て気づかれたかと思いますが、文字サイズを変えてもある段階にならないと変化していません。というか変化したように見えていません、と言ったほうが正しいかもしれません。
内部的には文字のサイズは変わっているのですが、つまり99%にすれば15.84px、98%ならば15.68pxとなっているのですが、見た目では変わったようには見えません。これは表示側の限界によるものなのかもしれません。(なぜなのかはわかりません。)

徐々に文字サイズを1%ずつ下げていくと、途中で差異が生じます。97%のところで、Firefoxは一段小さくなっているのに対して、IEでは100%と変わりありません。
しかし、96%になれば、FirefoxとIEの文字のサイズの見た目は同じになります。
むむむ、ややこしいですね。

WindowsのFirefox2.0、IE6、Opera9で、ほぼ同じ大きさに見えるような%を算出しましたので、参考にしてみてください。
ただし、px換算した値は、表示のものと全く一緒ではない可能性があります。(ブラウザの出力の問題で)

%(パーセント)表記目安となるpx換算
63%10.08px
69%11.04px
75%12px
82%13.12px
88%14.08px
94%15.04px
100%16px
107%17.12px
113%18.08px
119%19.04px
125%20px
132%21.12px
138%22.08px
144%23.04px
150%24px
157%25.12px
163%26.08px
169%27.04px
175%28px
182%29.12px
188%30.08px
194%31.04px
200%32px

※69%と70%は文字サイズが変わらないので、わかりやすく70%を指定されても構いません。
実際の表示はこちらをご覧ください。現在閲覧されているブラウザのフォントのサイズがわかります。
文字の種類は「MS Pゴシック」です。
文字の種類が変わると、「目安となるpx換算」の値も変わる可能性がありますので、あくまでも、MS Pゴシックの場合に限ります。文字のサイズが変わる変異点は、文字の種類にはより変化はしません。

行間の設定

font-sizeとよく同時に指定するプロパティに「line-height」があります。
これは「%」や「em」で指定してはいけません。
「%」や「em」を使用してしまうと、文字サイズがそれよりも大きければ、文字が重なってしまいます。
綺麗に表示できるポイントは「単位を指定しない」ことです。
つまり、CSSなどに、

line-height:1.5;

と書けば、文字サイズの1.5倍の高さに指定されるので、文字サイズが変わっても、文字が重なり合うことがなくなります。

2007/5/19 追記

このエントリーでちょっと補足があります。
まず、これはブラウザのデフォルトの標準の文字の大きさが「16px」の場合に限ります。
とりあえず、Windows/IE6、Firefox2、Opera9のデフォルトは同じと確認しております。
恐らく、MacOSXのFirefoxが怪しい。
そういう場合はbodyに「font-size:16px;」を指定すればうまくいくかどうか・・・。ただし確かTableはbodyの値を継承しなかったような気がします。
なので以下のようにCSSを指定すればよいかもしれません。

body [
font-size:16px;
}

table{
font-size:16px;
}

ただし、どの要素が継承するとかを確認していないので、基準となる文字サイズはできるだけブラウザのデフォルトを使用されたほうがよいかもしれません。

あと、私流の文字サイズ指定で気をつけないといけないことは、「文字サイズは継承する」ということです。
例え最初が16pxでも、親要素に88%(14px相当)、子要素に82%(13px相当)を指定すると、子要素の文字サイズは82%にならず、16×88×82=11.5px相当になります。
なので、できるだけ文字サイズを指定するときは一番下の要素に指定するほうが(継承させないほうが)、かなり面倒ですが文字サイズくずれは起こりません。

それと、このコラムを書いたときは知らなかったのですが(はてなのブクマコメントで知りましたが)、ほぼ同じライブラリが存在してました!しかもかなり有名どころ!
Yahoo! UI Library: Fonts CSS

ただし、この場合12pxがOperaで他のブラウザより小さく表示されてしまうということです。
TRANS - Yahoo! UI Library: Fonts CSSを使うのなら、Operaには気を付けて!

しかしなんでYahoo! UI Libraryでは標準の文字サイズを「13px」にしているのか謎です。

誤解してほしくないのは、私は厳密な「px」の文字サイズを表示させたいわけではありません。それならpx指定をしたほうがましです。
重要なのは他の文字との大きさの相関性です。 「文字を大きくする」という行為はそのテキストが他のテキストより「重要」であることをアピールしたいわけですよね。
それが88%に指定した文字と90%に指定した文字の大きさが同じように表示されるのは意味がありません。
あとは、ブラウザによって、文字の大きさが変わってしまうのもデザインという観点から見れば美しくないというだけのことです。

投稿日:2007年2月10日 | 編集

トラックバック歓迎です。以下URLにて登録をお願いいたします。

このエントリーのトラックバックURL:

↓↓↓トラックバックしてくださった方々↓↓↓
※トラックバックされても管理人がスパムと判断したものは公開されません。

ブラウザで異なるFont Sizeを同じに見える方法を実験してみた
from 世界中の1%の人々へ 2009/11/15

top

ホームページ作成に役立つコーナー