世界中の１％の人々へ

font sizeを固定したら、同じに見えるはずなのに…？

どのブラウザでも同じように見えるハックとして知られるのが、あまりに有名な、Yahoo! User Interface Libraryに書かれていたCSSを参考に、ベースフォントサイズを16pxに固定してみた。
ところが画像で見れもらうとわかるはずなのだが、基本が固定数値であるから本来同じに見えなければならないはずの文字サイズが、IE8のタイトル文字だけが微妙に大きい。
下記は、上記画像における、フォントのCSS（※表示に関連のないCSSは削除してある）。

◇ベースフォントCSS

body {
    font:16px; arial,helvetica,clean,sans-serif;
    *font-size:medium;
    *font:small;
    }

◇エントリー本文CSS（14px）

#content {
    font-size: 87.5%;←14pxに値する計算値
    font-style: Verdana, Arial, sans-serif;
    line-height: 1.5em
    }

◇エントリー内で利用するH3のCSS

#content h3 {
    color: #996633;
    font-size: 120%;←pxに直すと17px(16.8px)
    background-position: top left;
    font-family: Verdana, Arial, sans-serif;
    font-weight: bold;   
    line-height: 1.2em;
    }

Yahoo! User Interface Libraryに書かれていたCSSは、フォトサイズが13px、small、x-smallとなっており、何故？13pxなのかに疑問を持った。

◇Yahoo! User Interface LibraryにあったCSS

body{font:13px； arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}

ブラウザの基本は16px、Medium、100%が通常で、小さな文字でも可読できる1バイト圏はともかく、文字の画数の多い、2バイトコード圏では、16px（medium）を基本としたほうが適切だと思う。何故13pxなんだ？

13pxには意味があるに違いないと考えて、エントリー内で使うフォントサイズを修正したら、見た目が同じになった。

13pxは何か意味があるに違いない。と考えて、エントリー本文で使うフォントサイズが13pxになるよう数値を修正すると、画像のように見た目が同じになった。

◇エントリー本文CSS

#content {
    font-size: 81.25%;←13pxに値する計算値
    font-style: Verdana, Arial, sans-serif;
    line-height: 1.5em
    }

◇エントリー内で利用するH3のCSS

#content h3 {
    color: #996633;
    font-size: 131%;←17pxに値する計算値
    background-position: top left;
    font-family: Verdana, Arial, sans-serif;
    font-weight: bold;   
    line-height: 1.2em;
    }

原因はよくわからないが。13pxには意味があったようだ。
※検証はWindowsのみなので、Macでどうなるかは確認していない。

応用編：CKEditorで、エントリーで指定する文字サイズをカスタマイズする。

このやり方を応用して、CKEditor for Movable Type 1.01をカスタマイズしてみた。カスタマイズは、「システム> ツール > プラグイン > CKEditor for Movable Typの設定 > フォントの設定」から行う。

◇初期状態の10％刻みのフォントサイズ指定

80%/80%;90%/90%;100%/100%;110%/110%;120%/120%;130%/130%;140%/140%;150%/150%;160%/160%;170%/170%;180%/180%;190%/190%;200%/200%

◇YUIの表にある数値に書き換えたフォントサイズ指定

10px/77%;11px/85%,12px/93%;13px/100%;14px/108%;15px/116%;16px/123.1%;17px/131%;18px/138.5%;19px/146.5%;20px/153.9%;21px/161.6%;22px/167%;23px/174%;24px/182%;25%/189%;26px/197%

上記に書き換えれば、ブログ記事やウェブページでも、正しいピクセル表示が得られ、かつIE6、IE7でもフォントサイズの変更が可能。
このやり方は、TinyMCEや、FCKeditorにも応用可能。
※FCKeditorではソースをダイレクトに編集する必要があるが…^^;;

本日のまとめ

基本フォントサイズが14pxで、正しい計算値を入力しても、表示フォントサイズは異なるブラウザで同じにならず、13px（small）であれば、表示が同じになった。あくまでも推測の領域にしかすぎないのだが、どうも、基調となるフォントサイズが決まっているような気がする。実験はおこなっていないが、16px（medium）を基調にしても、表示が同じになるような気がする。
ただし、この方法、書体が異なれば同じ大きさに見えるのは無理なので、多くの人の環境で同じように見えるように設定するには、MS Officeに付属する、「MS PGothic, Meiryo」を追加してあげるのが無難だろう。

参考になれば幸い。

ブログを書くにあたり参考にしたサイト

• YUI 2: Fonts CSS
  http://developer.yahoo.com/yui/fonts/
• 実践アクセシブルHTML - 可変フォントサイズとレイアウト
  http://w3j.org/articles/practicalaccessiblehtml/practicalaccessiblehtml02.html
• フォントサイズ指定手法 : NOTE : The Trap of Web Design
  http://www.ichiro.to/note/fsize
• ブラウザに依存せず文字の大きさを統一させる方法 [Cool Web Window]
  http://www.coolwebwindow.com/weblife_column/coolweb/000131.php
• font-size指定 | d-spica
  http://blog.d-spica.com/entry/070310fontsize.html
• ブラウザによるフォントサイズの違いと統一｜Webマーケティングのネタ帳｜Web制作・Webデザイン制作会社ウェブラボ-東京都新宿区
  http://www.weblab.co.jp/blog/2009/01/post_65.html

独白

なんで、こんなこと実験しているかというと、CMSのテーマの設計をやってるからだ。自分がデザインしたり、HTML書くわけじゃｙないけど、仕様は決めなきゃならない。
個人的にはWebとは、基本は情報を伝えるものであり、全ての人に正しく情報を伝えることが優先するものであって、印刷物のように万人に同じように見える必要はないと思っている。ブラウザやOSが違う場合、大幅にデザインが崩れない限りは、文字の改行位置が変わろうがさほど気にしないけど、CMSの多くは商用Webに使われるものだから、そうもいかず、ここ数日、仕事の合間をぬって調べてみて、疑問に思ったことを実験してみた次第。