フォントスタイルのリセットとベースサイズのセット(YUI font.cssの検証 jfonts.css、)ver.20081204 @itami.info

只今修正中

 

トピックに戻る  ブログのトップ

 

フォントの大きさを思ったサイズに指定することはデザインにおいては非常に重要なことである。

YUI(http://developer.yahoo.com/yui/)ではフォントのサイズを指定するためのCSSとしてFonts CSSを配布している。

このCSSファイルの考え方は、フォントの基本サイズを規定し、そのサイズを基準に相対的に指定するものだ。

実際には13pxのサイズを基本(100%)とし、14pxの文字指定ならば108%を指定するといった考え方だ。

これはこれで良いのだが、日本語環境で利用した場合色々と問題が見られる。

先ず全体的に文字が大きい。また、IEとFirefoxなどで行送りに差異が発生し、様々なブラウザ間で同様のレイアウトが出来ない。

日本語のボディやベースラインといったフォントデザインに起因するものなど原因は色々考えられるが、先ずは見た目に合わせる必要がある。

しかし、そもそもなぜ文字の表示をコントロールする必要性があるのか。

以下の理由が考えられる。

 

● クライアント(デザイン側)の文字サイズ指定。

● 主要なブラウザ間で同様のページデザインを行うため。

 

一つ目の問題を解決するには例えば、13pxの文字の大きさを基準とするならば、13pxの文字がどれくらいの大きさかを規定しなければならない。

クライアントとデザイナー、コーディングを行う者の間に13pxの大きさのイメージに差があったのでは話にならないからだ。

しかし、これは一見簡単なようで、中々難しい問題である。 実際には文字を扱うソフトウェアの表示には様々な違いがあるからだ。

以下の比較でも解るように、各ピクセルサイズを指定しても文字送りに変化はあるものの文字サイズに変化が見られない箇所がある。

これは欧文半角フォントは1px単位でフォントがレンダリングされているが、和文フォントが2px毎のレンダリングとなっているからだ。

そこで一先ず、『基本文字をPhotoshopでアンチエイリアス オフに指定した13pxの文字サイズの描画』と規定した。

 

実際にWEBサイト制作現場で良く利用されているFireworks、Dreamweaver(プレビュー画面)、Photoshopの表示
ポイント 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 {
font-family:"MS Pゴシック",Arial,sans-serif ;
font-size: 13px;
line-height:1.5;
font-weight:normal;
font-style:normal;
}
select,
input,
button,
textarea {
font:100% "MS Pゴシック",Arial,sans-serif ;
}
table {
font-size:inherit;
font:100%;
}
textarea {
font-size: 100%;
}

 


/*set font size for ja-font by @itami.info 20081204*/

.px8{font-size:62%;}/**/
.px9{font-size:68%;}

.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%;}/**/
.px16{font-size:123%;}

.px17{font-size:136%;}/**/
.px18{font-size:145%;}
.px19{font-size:154%;}
.px20{font-size:160%;}

.px21{font-size:162%;}
.px22{font-size:170%;}
.px23{font-size:177%;}
.px24{font-size:185%;}

 


 

 

設置方法:

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%


ポイント %
8px 62%
9px 68%
10px 74%
11px 83.3%
12px 93%
13px 100%
14px 105%
15px 115%
16px 123%
17px 136%
18px 145%
19px 154%
20px 160%

サイズ指定: 12px = 100% (検証中)

font-size: 12px;に設定した場合
ポイント %
8px 68%
9px 74%
10px 79.5%
11px 93%
12px 100%
13px 105%
14px 115%
15px 123%
16px 136%
17px 145%
18px 154%
19px 160%
20px  

 

 

 

YUI reset.cssによるフォントスタイルのリセット --> jfonts.cssにより基本フォントサイズを視覚的に13px、行送り1.5(em)にセット

h1

6日の東京株式市場は、前日のニューヨーク株式相場が大幅反落したことを受けて景気の先行き懸念が広がり、大幅下落した。

h2

6日の東京株式市場は、前日のニューヨーク株式相場が大幅反落したことを受けて景気の先行き懸念が広がり、大幅下落した。

h3

6日の東京株式市場は、前日のニューヨーク株式相場が大幅反落したことを受けて景気の先行き懸念が広がり、大幅下落した。

h4

6日の東京株式市場は、前日のニューヨーク株式相場が大幅反落したことを受けて景気の先行き懸念が広がり、大幅下落した。

h5
6日の東京株式市場は、前日のニューヨーク株式相場が大幅反落したことを受けて景気の先行き懸念が広がり、大幅下落した。
h6
6日の東京株式市場は、前日のニューヨーク株式相場が大幅反落したことを受けて景気の先行き懸念が広がり、大幅下落した。
p

6日の東京株式市場は、前日のニューヨーク株式相場が大幅反落したことを受けて景気の先行き懸念が広がり、大幅下落した。


jfontsize.cssによるフォントサイズの指定

<h1 class="px13">6日の東京株式市場は500円安ABCdef123456</h1> 6日の東京株式市場は500円安ABCdef123456
<p><span class="px14">6日の東京株式市場は500円安ABCdef123456</span></p>

6日の東京株式市場は500円安ABCdef123456

 

 

jfontsize.cssによるフォントサイズの指定と各ソフトウェアによるフォント表示との比較

% ポイント

CSS(パーセント指定)

Dreamweaver プレビュー画面(画像) Fireworks(画像) Photoshop(画像)
62% 8px 6日の東京株式市場は500円安ABCdef123456
68% 9px 6日の東京株式市場は500円安ABCdef123456
74% 10px 6日の東京株式市場は500円安ABCdef123456
83.3% 11px 6日の東京株式市場は500円安ABCdef123456
93% 12px 6日の東京株式市場は500円安ABCdef123456
100% 13px 6日の東京株式市場は500円安ABCdef123456
105% 14px 6日の東京株式市場は500円安ABCdef123456
115% 15px 6日の東京株式市場は500円安ABCdef123456
123% 16px 6日の東京株式市場は500円安ABCdef123456
136% 17px 6日の東京株式市場は500円安ABCdef123456
145% 18px 6日の東京株式市場は500円安ABCdef123456
154% 19px 6日の東京株式市場は500円安ABCdef123456
160% 20px 6日の東京株式市場は500円安ABCdef123456

 

 

reset.css、jfonts.css 、jfontsize.css 利用時の各主要ブラウザでの表示(画像)

 

作成中

 

結論:完全に一致させることは無理である。 上記 reset.css、jfonts.css 、jfontsize.css を設置し、各ブラウザ間で問題の少ないフォントサイズとして使い分けることが良いだろう。
(長々と書いた割りには大した結論でなくてすみません。。)

 

@itami.info