Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                

Trans

NPOやソーシャルビジネスの創業・経営・マネジメント

英語圏から学ぶ、body要素に対するfont-size指定方法のまとめ

Web標準

YUI Fonts CSSのfont-sizeで悩み始めてから、font-sizeってどういうのがいいのだろう、と考えていました。そこで、英語圏ではどういうふうに指定しているのが多いのだろうと、いろんな記事を読み漁ってみました。いろいろなやり方はあるにせよ、5つくらいのパターンに分けられるんじゃないかなと思うので、まとめておきます。


font-size: 100%;


主に、body要素に用いられるもの。font-sizeを100%で指定しておいて、font-sizeの指定はユーザの好き好みに合わせるというもの。ユーザビリティに配慮したり、ユーザスタイルシートを生かして読んでほしい場合はこの指定が多いようです。


font-size: 100.01%;


最近ちょくちょく見掛ける、body要素に対して100.01%を指定するというもの。これは、Re: WSG Setting Up Font Sizesの書き込みによると、主に3つの意味がある、とのことです。

  • em指定でbody要素にfont-sizeを指定すると、たまにIEに継承の問題が発生する。
  • Operaの昔のいくつかのバージョンで、body要素にfont-size: 100%;を指定すると、その子孫要素の文字サイズが小さく表示される。
  • ユーザにとって、font-size: 100%;は最も好まれる数字であり、ユーザへの配慮も見られる。

ただし、ほかの記事を読んでみると、「大体のOperaユーザは新しいバージョンへの乗り換えも早いんだから、もう指定する必要はないんじゃない？」という意見もあるようです。


ちなみに、このIEのバグとOperaのバグはこのへんのことかと思います。


font-size: 62.5%;


通常、ブラウザはCSSによる指定がない際は、font-sizeを16pxあたりで表示します。それをうまく使って、body要素に62.5%を指定することにより、16px * 0.625 = 10pxというものを成り立たせる方法。How to size text using ems | clagnut/blogにやり方が詳しく書かれています。


font-sizeをほぼ10pxに合わせられることにより、デザインもやりやすいというメリットがあります。ただし、ユーザがブラウザの文字サイズを常に「大」や「大きく」している場合には、62.5% = 10pxという公式が成り立たなくなります。この10pxの公式に合わせて、デザインの余白やボックスサイズを厳格に組んでいたりすると、思わぬ崩れ方をするかもしれません。


ちなみに、未確認ではあるんですが、html要素にfont-size: 100%;を指定しておき、更にbody要素にfont-size: 62.5%;を指定して、それ以外のセレクタにはfont-sizeをem指定する。また、body要素にfont-size: 81.25%;を指定しておき、16px * 0.8125 = 13pxという指定の仕方もあります。


font-size: 76%;


body要素にfont-size: 76%;を指定するという方法。英語圏の場合は、font-size: 100%;の場合は、文字サイズが大きすぎて読みにくい、とのことです。つまり、多少なりとも、文字サイズを下げてやることが、可読性を上げるらしいのです。


しかし、パーセント指定でも、各UA間のfont-sizeをぴったり合わせるのは難しい。（1%ずらしたからといって、必ずしも文字サイズの表示も変わるわけではないので）しかし、このfont-size: 76%;は文字サイズを約12pxに固定し、モダンブラウザの表示を揃えられるというもの。incremental differencesを見ていただけると、理解が早いかと思います。各ブラウザ間で、可読性も高めながら、ほぼぴったりの表示サイズにすることができます。


ただ、英語の場合はこれでよいのですが、12pxというのは日本語の可読性からすると、若干小さいかなとも思います。


YUI Fonts CSSを使う。


Yahoo! UI Library: Fonts CSSを用いるという方法。ブラウザ間の表示差異をかなりの程度まで吸収することができますが、これも完璧ではありません。詳しくは、以前書いた【解決編】YUI Fonts CSSをモダンブラウザで最適化する。をご参照下さい。


結論


結局、どのやり方も一長一短あるわけで、やはりターゲットをどういうふうに絞るかによって、どういう設定にするのかが変わってくるような気がします。僕はほぼ常に、YUIを使ってはいるのですが、もう少しターゲットなどを意識して、font-sizeを指定する必要がありそうです。