フォントの大きさを思ったサイズに指定することはデザインにおいては非常に重要なことである。
YUI(http://developer.yahoo.com/yui/)ではフォントのサイズを指定するためのCSSとしてFonts CSSを配布している。
このCSSファイルの考え方は、フォントの基本サイズを規定し、そのサイズを基準に相対的に指定するものだ。
実際には13pxのサイズを基本(100%)とし、14pxの文字指定ならば108%を指定するといった考え方だ。
これはこれで良いのだが、日本語環境で利用した場合色々と問題が見られる。
先ず全体的に文字が大きい。また、IEとFirefoxなどで行送りに差異が発生し、様々なブラウザ間で同様のレイアウトが出来ない。
日本語のボディやベースラインといったフォントデザインに起因するものなど原因は色々考えられるが、先ずは見た目に合わせる必要がある。
しかし、そもそもなぜ文字の表示をコントロールする必要性があるのか。
以下の理由が考えられる。
● クライアント（デザイン側）の文字サイズ指定。
● 主要なブラウザ間で同様のページデザインを行うため。
一つ目の問題を解決するには例えば、13pxの文字の大きさを基準とするならば、13pxの文字がどれくらいの大きさかを規定しなければならない。
クライアントとデザイナー、コーディングを行う者の間に13pxの大きさのイメージに差があったのでは話にならないからだ。
しかし、これは一見簡単なようで、中々難しい問題である。 実際には文字を扱うソフトウェアの表示には様々な違いがあるからだ。
以下の比較でも解るように、各ピクセルサイズを指定しても文字送りに変化はあるものの文字サイズに変化が見られない箇所がある。
これは欧文半角フォントは1px単位でフォントがレンダリングされているが、和文フォントが2px毎のレンダリングとなっているからだ。
そこで一先ず、『基本文字をPhotoshopでアンチエイリアス オフに指定した13pxの文字サイズの描画』と規定した。
| ポイント | Photoshop(画像) | Fireworks(画像) | Dreamweaver プレビュー画面(画像) |
| 8px | |
|
|
| 9px | |
|
|
| 10px | |
|
|
| 11px | |
|
|
| 12px | |
|
|
| 13px | |
|
|
| 14px | |
|
|
| 15px | |
|
|
| 16px | |
|
|
| 17px | |
|
|
| 18px | |
|
|
| 19px | |
|
|
| 20px | |
|
|
上の各ソフト表示によるとFireworksの13pxに若干の問題が感じられる。Photoshopではフォントサイズを変更しても文字送りの同じ箇所が見られる。
他のソフトでも一見スムースに変化している様に見られるが、文字の大きさに変化はなく、文字送りだけが変化している箇所が見られる。
和文フォントを考える場合、『すべてを使えるように』と考えるよりも、『どのフォントサイズ使用が問題ないか』を考える必要がある。
二つ目の問題を解決するには文字送りや行送りの差異を無くさなくてはならない。
背景にグラフィックを配置しその前に文字を置いた場合などにブラウザ間で行送りに違いがでてしまっては、共通のレイアウトなど不可能なことととなってしまい、その結果、下方向に余裕を持たせたページデザインとなってしまうからだ。
作成した jfonts.css:
今回作成したjfonts.cssは上記の問題点を解消(解消に近づける)ものである。
設計思想は可能な限り簡略化し、フォントサイズでの対応を目指している。
これは現在の jfonts.cssが不完全であり、将来更新の際に差し替えを可能にするためである。
※CSS初期化を将来も差し替え可能なものと考えた場合、YUI reset.cssの役目は重要で、できる限り単純なリセットが望まれる。
何をリセットし、何をセットするかという考えよりも、レンダリングにストレスが無いのであれば、グローバルセレクタによるリセットでもよいかも知れない。
ソース:
| jfonts.css | jfontsize.css |
| /*fonts base size set for ja-font by @itami.info 20081204*/
body {
|
/*set font size for ja-font by @itami.info 20081204*/ .px8{font-size:62%;}/**/ .px10{font-size:74%;}/**/ .px11{font-size:83.3%;} .px12{font-size:93%;} .px13{font-size:100%;}/**/ .px14{font-size:105%;} .px15{font-size:115%;}/**/ .px17{font-size:136%;}/**/ .px21{font-size:162%;}
|
設置方法:
YUIのreset.css、jfonts.cssとfontsize.cssを読み込む。
<link href="css/reset.css" rel="stylesheet" type="text/css" /> YUI配布のリセットCSS
<link href="css/jfonts.css" rel="stylesheet" type="text/css" />
<link href="css/jfontsize.css" rel="stylesheet" type="text/css" /> フォントサイズ指定用CSS
サイズ指定: 13px = 100%
|
サイズ指定: 12px = 100% (検証中) font-size: 12px;に設定した場合
|
YUI reset.cssによるフォントスタイルのリセット --> jfonts.cssにより基本フォントサイズを視覚的に13px、行送り1.5(em)にセット
| h1 | ６日の東京株式市場は、前日のニューヨーク株式相場が大幅反落したことを受けて景気の先行き懸念が広がり、大幅下落した。 |
| h2 | ６日の東京株式市場は、前日のニューヨーク株式相場が大幅反落したことを受けて景気の先行き懸念が広がり、大幅下落した。 |
| h3 | ６日の東京株式市場は、前日のニューヨーク株式相場が大幅反落したことを受けて景気の先行き懸念が広がり、大幅下落した。 |
| h4 | ６日の東京株式市場は、前日のニューヨーク株式相場が大幅反落したことを受けて景気の先行き懸念が広がり、大幅下落した。 |
| h5 | ６日の東京株式市場は、前日のニューヨーク株式相場が大幅反落したことを受けて景気の先行き懸念が広がり、大幅下落した。 |
| h6 | ６日の東京株式市場は、前日のニューヨーク株式相場が大幅反落したことを受けて景気の先行き懸念が広がり、大幅下落した。 |
| p | ６日の東京株式市場は、前日のニューヨーク株式相場が大幅反落したことを受けて景気の先行き懸念が広がり、大幅下落した。 |
jfontsize.cssによるフォントサイズの指定
| <h1 class="px13">６日の東京株式市場は500円安ABCdef123456</h1> | ６日の東京株式市場は500円安ABCdef123456 |
| <p><span class="px14">６日の東京株式市場は500円安ABCdef123456</span></p> |
６日の東京株式市場は500円安ABCdef123456 |
jfontsize.cssによるフォントサイズの指定と各ソフトウェアによるフォント表示との比較
| % | ポイント | CSS(パーセント指定) |
Dreamweaver プレビュー画面(画像) | Fireworks(画像) | Photoshop(画像) |
| 62% | 8px | ６日の東京株式市場は500円安ABCdef123456 | |
|
|
| 68% | 9px | ６日の東京株式市場は500円安ABCdef123456 | |
|
|
| 74% | 10px | ６日の東京株式市場は500円安ABCdef123456 | |
|
|
| 83.3% | 11px | ６日の東京株式市場は500円安ABCdef123456 | |
|
|
| 93% | 12px | ６日の東京株式市場は500円安ABCdef123456 | |
|
|
| 100% | 13px | ６日の東京株式市場は500円安ABCdef123456 | |
|
|
| 105% | 14px | ６日の東京株式市場は500円安ABCdef123456 | |
|
|
| 115% | 15px | ６日の東京株式市場は500円安ABCdef123456 | |
|
|
| 123% | 16px | ６日の東京株式市場は500円安ABCdef123456 | |
|
|
| 136% | 17px | ６日の東京株式市場は500円安ABCdef123456 | |
|
|
| 145% | 18px | ６日の東京株式市場は500円安ABCdef123456 | |
|
|
| 154% | 19px | ６日の東京株式市場は500円安ABCdef123456 | |
|
|
| 160% | 20px | ６日の東京株式市場は500円安ABCdef123456 | |
|
|
reset.css、jfonts.css 、jfontsize.css 利用時の各主要ブラウザでの表示(画像)
作成中
結論:完全に一致させることは無理である。
上記 reset.css、jfonts.css 、jfontsize.css を設置し、各ブラウザ間で問題の少ないフォントサイズとして使い分けることが良いだろう。
（長々と書いた割りには大した結論でなくてすみません。。）
@itami.info