スタイルシート、JavaScript、DOM、ブラウザ判別、PHP 等ウェブ制作関連の各種情報
「フォントサイズ指定手法」、「続フォントサイズ指定手法」の続きです。
最近自分がスタイルシートで利用しているサイズ（font-size のパラメータ）の一覧が以下。
Mac Firefox3 が単位問わず、数値に対して実際のサイズ変化をするようになり、ウインドウズは ClearType のメイリオがデフォルトになったことから、基本的にピクセル基準相対サイズ計算で互換がとれるようになりました。
メイリオ指定が制作側の意図するもので、ユーザー側もその環境なのであれば（見た目の実際の大きさがフォントで違って見える点はおいといて）単に指定サイズとその相対的な反映状態に関しては、一応算出した値で揃った状態になると思われます。
body を親としてのひとつ階層下への指定なら上記でだいたい済みますが、パーセント指定でややこしいのは、ブロックをイレコにして、親と子でサイズを変えた場合の指定です。
スタイルシート側の指定の手順に気をつけて、上位ブロックの継承を避けるように構成（指定）するか（そううまくは行かないことは多いが、工夫はできる筈）上位ブロックの指定値が、ピクセル換算でいくつのサイズになっているかをもとに、新たに算出値を出した上で、チェックをしながら揃っている（ように見える）サイズに調整します。
これまで、自分は Mac Firefox 3 以外であれば、親 100% に対しての子 94% が一回り小さいサイズになり、ブラウザ互換もとれていてとても便利に使ってたのですが、それは揃わなくなってしまいました。なので、自分が必要なので、ふた回り小さく、っていう指定もつけて、チェックしてみました。
94% でも 93.75% でも、同じじゃん！という環境が多いのだけど、Mac の Firefox3 だけ「微妙」に違うのです。
試しに、単純計算（親より子が小さい場合に「子割る親」）をしてみたところ、結果的には、それで良いということでした。
これまでの経緯で、そもそもの基準となる値をどうするかや、単純計算で出した数値でブラウザ毎に同じ挙動をしているとは限らないことを知っていれば、その値を使えるのかどうか、実際には見てみないと分からないので、こんなことをいつもしてるのです。
また、欧文指定した時に、フォントサイズが意図しない状態になる事に気づかない方もいるかもしれないし、それはパーセントで指定した時だけなのかどうかを知りたいという方がいるかもしれない。実際に表示されるサイズが同じになる状況では指定方法を変えても同じバグに遭遇します。Verdana 指定がはいっていて、11px 相当指定にした場合、IE6 でどうなるか、上記の表で実際に見て確認できます。IE8 のチェックでは直っているような気がします。まだ正式版では無い等から、はっきりとは分かりませんが。
自分は後の font-family 指定についてと、このサイズの一覧で、だいたいコトが足りる（ていうか多すぎ）と思っているものです。一覧表を参照してというよりは、実装時に計算して指定しますので、これさえあれば、というものではありません。ついでにいうと、チェック時にブラウザ別で多少異なる状態にもしなっていても、情報が伝わっているのであれば、それでヨシ、ということもあります。
| (+16px) | 200% (32px) | 160% (24px) | 142.85% (20px) | 146.15% (19px) |
|---|---|---|---|---|
| (+8px) | 150% (24px) | 133.33% (20px) | 135.71% (19px) | 138.46% (18px) |
| +4px | 125% (20px) | 126.66% (19px) | 128.57% (18px) | 130.76% (17px) |
| +3px | 118.75% (19px) | 120% (18px) | 121.42% (17px) | 123.07% (16px) |
| +2px | 112.5% (18px) | 113.33% (17px) | 114.28% (16px) | 115.38% (15px) |
| +1px | 106.25% (17px) | 106.66% (16px) | 107.14% (15px) | 107.69% (14px) |
| 基準 | 100% : 12pt : 16px | 93.75% : (11.25pt) : 15px | 87.5% : (10.5pt) : 14px | 81.25% : (9.75pt) : 13px |
| -1px | 93.75% (15px) | 93.33% (14px) | 92.85% (13px) | 92.3% (12px) |
| -2px | 87.5% (14px) | 86.66% (13px) | 85.71% (12px) | 84.61% (11px) |
| -3px | 81.25% (13px) | 80% (12px) | 78.57% (11px) | 76.92% (10px) |
| -4px | 75% (12px) | 73.33% (11px) | 71.42% (10px) | - |
| -5px | 68.75% (11px) | 66.66% (10px) | - | - |
| -6px | 62.5% (10px) | - | - | - |
一目で分かるのも欲しいと思って。
| (+16px) | フォント指定 ABC | フォント指定 ABC | フォント指定 ABC | フォント指定 ABC |
|---|---|---|---|---|
| (+8px) | フォント指定 ABC | フォント指定 ABC | フォント指定 ABC | フォント指定 ABC |
| +4px | フォント指定 ABC | フォント指定 ABC | フォント指定 ABC | フォント指定 ABC |
| +3px | フォント指定 ABC | フォント指定 ABC | フォント指定 ABC | フォント指定 ABC |
| +2px | フォント指定 ABC | フォント指定 ABC | フォント指定 ABC | フォント指定 ABC |
| +1px | フォント指定 ABC | フォント指定 ABC | フォント指定 ABC | フォント指定 ABC |
| 基準 | フォント指定 ABC | フォント指定 ABC | フォント指定 ABC | フォント指定 ABC |
| -1px | フォント指定 ABC | フォント指定 ABC | フォント指定 ABC | フォント指定 ABC |
| -2px | フォント指定 ABC | フォント指定 ABC | フォント指定 ABC | フォント指定 ABC |
| -3px | フォント指定 ABC | フォント指定 ABC | フォント指定 ABC | フォント指定 ABC |
| -4px | フォント指定 ABC | フォント指定 ABC | フォント指定 ABC | - |
| -5px | フォント指定 ABC | フォント指定 ABC | - | - |
| -6px | フォント指定 ABC | - | - | - |
※相対的に変えたブロックから、親のサイズに戻す、ということがあるので、ここに無い値になる場合もあります。1px の違いをあえて使うのはそういう場合で、特に大きいサイズは上記ではそうそう使わないものがあります。MS フォント環境では、文字間はちょいと変わるけど、ひとつの文字自体のサイズは同じものがあるのは以前から指摘している点で、その微妙な違いのものは大きいサイズでも小さいサイズでもあまり使いません。
ま、だから、実装時に「子のサイズピクセル値割る親のサイズピクセル値（小さい時）」を使うってダケです実は。
ウインドウズの IE で、メニューでフォントサイズを変更している方は出会った事がありますが、モニター解像度や基本サイズを変更してる方は少なく、現実的には、96dpi 16px が変更されていることはほぼ無いと思います。標準モードと互換モードで medium 指定値が異なるのは（バグというか、そういう仕様に何故かしてた）よく知られていますが、例えば、IE6 で body に指定が無い状態で、IE5.5- とサイズが異なります。その場合に body に 100%（他で調べて欲しいのですが、100.01% にしておくと、em 指定時の継承問題も回避できます）を指定することで、互換を保てます。
そこで IE については IE5.5- を（レイアウト上で）ターゲットブラウザとして対応させる場合には 100% 指定で基本のサイズを揃えることにして、あとは他のブラウザをどうやって揃えるか、を考えます。IE と同じ 96dpi 12pt または 16px を指定すれば良いだけなんだけど、IE にはポイント指定、ピクセル指定をかませたくないので、スタイルシート上でハックを使うなりで IE 以外でのみ指定します。
また、その指定も、Firefox3、Safari3、Chrome、Opera9 等はデフォルト 16px（96dpi）で揃っているので、実は、指定がいりません。なのでこの指定は古いブラウザで、デフォルト 14px 15px 等があることへの対処です。この点でも、現時点で実質「揃えることにこだわって指定する」必要が以前と違っていらなくなりました。
フォントサイズ指定関係の情報がほかにも（やっと最近は）結構あって、一番興味を持ったのがこの「基準を 62.5% / 10px にする」というものです。相対値を em にする、という方が多いようなのですが（どうも以前から em 絡みでの問題が多いので、自分は気持ち的に避けたいだけ）パーセントでも良い訳で、これは使えます。
自分の場合は、モトを 100% にしておく状態に慣れてしまって、切り替えられない（いっぱいサイトを制作管理してて、そのへんの手法が変わると混乱する）でいますが、今後は利用を検討する可能性大です。
その他、Yahoo! が提供している The Yahoo! User Interface Library (YUI) の fonts CSS によるブラウザサイズ互換もよく使われているようです。これは 100% を 13px としての相対指定のようで（ごめんなさい、使ってないので詳細は分かりません）その値もブラウザ互換を考えて出た値らしく、ピクセル相当サイズへのパーセント相対指定になっています。
基本的に「ブラウザが変わってもフォントサイズが揃っている状態にしてレイアウトしたい」という面に関しては、なんとかなるものであって、制作者都合でやりやすいものをご自身で見つければ良く、ただ、これまでもこの先も、ユーザーが利用している環境やユーザーエージェントの実装状況によって、あるいは単にデザイン的な流行等で、指定の際のパラメータの良好な状態は変化する可能性がある、とだけは覚えておくべきかな、と思います。今回のフォントサイズに限らず、スタイルシートのテクニック、はたまた、ウェブドキュメント制作周辺状況が一カ所に留まる事無く常に変化しているので、状況に応じて柔軟に対応できるように、可能であれば「後方互換」や「先を見据えた」手法をとれれば、それにこした事はありません。
フォントサイズは（デザイナーだったら）ページのレイアウトデザイン上でのバランスで決定したいトコロですが、他のメディアと異なるウェブの優位性を損なわない「ウェブのデザイン」のためのアプローチとして、デザイナーはちょいと視点を変えて「ウェブ上でどうなのか」を専門的に考える必要があると感じます。
そもそも、元のフォントサイズが 1、2px 小さくなっても、逆に大きくても、基本相対値でフォントサイズ以外の指定値（line-height 等やブロックのマージンやパディング値）に依存してレイアウトが崩れることのないような作り方にしておけばあまり気にする事は無いのかもしれません。それが大変ナンデス、ではなく、そういうレイアウトをできるようにすることが、ウェブデザインのテクニック向上であって、必要な事だと自分は思っています。
ブラウザのデフォルト設定で文字サイズが小さい（あるいは大きい）と思うユーザーが自身で設定変更をできるようにしておくことのほうが重要で、制作側の文字サイズ指定はあくまでも読み易さや、視覚的に構造を把握しやすくするために大小比率指定をするけれど、基本となるサイズはユーザー側に任せて、サイズ調整時のレイアウトの変化を許容するようにしておくこと。デフォルト状態のサイズ統一は制作上の都合（おそらく）でそうしたほうが作り易いけれど、その文字サイズ自体をレイアウトの基準としないように作ります。
考え方としても、レイアウトデザインとしても、一番大変なところなのですが、特にターゲットユーザーとして多くの方へ提供するウェブドキュメントなのであれば、ユーザーがサイズを変更できる手段を制作側で取り払ってしまわないことと、ある程度、最初から、むしろサイズを小さくしない状態で提供することを考えて欲しい。自分の地元の自治体サイトが、どうにも使いづらいのです。
制作者が作り易くなるためのフォントサイズのブラウザ互換に関する情報として、コレを書いているけれど、本当に大切なのはソレなんですよね。
尚、ページ上でサイズを変更するボタン（やメニュー）を用意しているサイトも見かけますが、ナニがいいたいって、ソレを付ける前に、最初からどうしてもう少し小さくないサイズで提供できないのかと思うのです。ソレがついてるから、小さくしても良い、と考えてるのか、小さかったから付けてるのかは分からないけれど、どうにもソコがじれったい。
そのサイトで提供している情報が必要でアクセスし、文字が小さいからメニューで大きくしている方にはいっぱい出会いました。メニューで大きくする方法は（場合によっては固定されていて出来ない訳ですが）自分がそこにいれば教えることができますが、例えば、そういう方々は「後付けボタン」の存在にも気づきません。（これはほぼ 100% ）あと、自分がですが、そのボタンを使って大きくした状態が、全然大きくないのが殆どです（大状態で 16px いくかいかないか）
このへんに関連する情報は、自分も気にしているので結構あります。実は、公共サイトの制作で、その「文字サイズ変更ボタン」の制作を頼まれた事があり、その発注元と半分ケンカになったことがあります。機能自体、作る事は簡単で、自分は上に書いたように「実際にソレを必要としている方が使えるようにするために」いろいろ考えて提案したのですが、ディレクター役の方が、ただたんにクライアントに「今、アクセシビリティ対応っていえばウケが良い」というわ、分かりやすく、ちゃんと目立つようにつくったものが「普通の方はいらないのだから（邪魔なので）小さくして」などとのたまうわ「そんなにでかいサイズ（150% 24px 相当だったと思う）はなくてもいいんじゃないの」とかと、もう、それはそれは実際の必要性を無視していたので「使い物にならない機能を付けるのは意味が無いです」と憤慨しました。
たぶん、実際についているサイトもそう変わらないと思います。それが現実で、でも、自分はそのへんに関しては、どうしてもそういう場合の関係者の考え方を正したいと思って行動を続けています。（最初は body にサイズ指定いれず、本文にも指定無しで作る）
ウェブ制作に関わる人間の一人として、自分ができることなのだから、サイトのターゲットユーザー等をふまえながら「読み易い」というレイアウトの基本作りのために、フォントサイズの指定は常に慎重に行っています。
…てことで、ふと、ボタンでなくてスライダーというのはどうだろうと作ってみたものがあります。
所詮、現状、いっくら制作者ががんばっても意図したフォントで全ての環境で揃えるというのは無理で、紙媒体デザインのプロにしてみれば「アリエネー」状態で、それを理由に「ウェブはヤランン！」という方もいるくらいで、そのへんは「デザインの根本的な考え方」をウェブ用にしないとならないのは確かです。
「どうせ、好きにできないんだから、どうでも良い」という方もいるかもしれませんが、デザイン上、やはり「読み易さ」を考えることはできるわけで、好きな書体の「美しさ」を追求できなくても、ウェブとして良好な状況になるように、デザイナーなら考えるでしょう。
ウインドウズでは最高とはいわないけど、メイリオは MS フォントよりはマシなので、指定をいれています。
The Trap of Web Design は、clips2 を使ってますが、
body {
font-family: Meiryo, "Trebuchet MS", "MS PGothic", Sans-Serif;
font-size: 100.01%;
line-height: 1.5;
}
html>/* */body {
font-family: Meiryo, "Trebuchet MS", "Lucida Grande", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Sans-Serif;
font-size: 16px;
}てな感じ。一昨年（2007年くらい）から、これで落ち着いてましたが、最近また考えて、今回調整してたら、
body {
font-family: AquaKana, "メイリオ", Meiryo, Sans-serif;
font-size: 100.01%;
}こうなりました。AquaKana は Safari Mac 版でしか反映しないため、実質、マック用への指定は無いのと同じ。カタカナメイリオは、Safari ウインドウズ版（Opera も Firefox もみたい…）で、Meiryo だと反映しなくて、こうなりました。
※ Opera10 で、上の CSS コードの日本語（メイリオ）記述が出ていないことに気づいてしまった。正式日本語版待ちでチェック要。
本当は "Trebuchet MS" 等、英数を変えたいのだけど、メイリオ指定が入ると意味無しなので、今回は（徹底的に整理してみたら）やめました。
ClearType の不完全さや、IE のそういった和文欧文組みの反映状態等、たまに The Trap of Web Design で書いてみたりしてるので、探してください。また、フォントサイズよりも、このフォントファミリーの話題（指定順序とか）は、ネット上に様々な情報があるんで、いろいろ参考に。「明朝体を使う」ような話は自分も本当はやりたくてまだできずにいます。
そうそう、font-family の指定順序ですが、基本、ずっと、マック用 → ウインドウズ用なんですが、メイリオも MS フォントもマックにインストールされてる場合があって、逆に、ヒラギノ（まぁ、Osaka も）なんかがウインドウズに入っていて反映される（Adobe 系アプリケーションユーザーだったら、小塚書体もはいってますけど、OpenType は反映しないすか？）ことがあって、そして、あんまり良好な表示状態では無く、困ってる方がいるかもしれない。
そういうときは、だからなんらかの方法でブラウザ判別して、指定を変える方法をとることになると思います。それはスタイルシートハックとは限らず、例えば自分の場合、レイアウトも含めて、最近は判別処理が必要なことを JavaScript に任せても良いのではないかと、アプローチを変えつつあります。このへんはおそらくまた、できるなら判別が必要なことはナニか、その場合、どうやって判別処理するか、という話で別途書く予定です。JavaScript 非対応環境の事を考えれば、ソッチ依存は避けたい、と以前考えていましたが、そのへんが自分の制作手法では変わりつつあります。
ちなみに、この Note のレイアウトは、完全 JavaScript 依存でできています。
更新 2009年02月25日 12:01 初回投稿 2009年02月17日 12:00
フリーのウェブサイトディレクター。音響オペレーター。北海道札幌にて活動中。
Web Site designed by Studio Susto