Back to Top

entacl Lab. Webクリエイティブラボラトリー

Webクリエイティブラボラトリー

投稿日:    投稿者: 小平

いまさらだけど、font-sizeを比較してみた

いまさらだけど、font-sizeを比較してみた

いまさらだけど、font-sizeって何つかっていますか?
yahoo YUIファンは、パーセントかな?
ピクセルはもうなかなかいないのかな?
emでやってると、結構らくちんなのかな?
remでやってるのは、css3できりすてなのかな?
などなど
思っていたら比較してみよってことで比較しました。

font-sizeの種類比較

各デモもつくってみました、なんとなくですがw
ブラウザ間にてもきれいにサイズは表示できるようしている状態です。
ピクセル - px
往年のご隠居的存在ですね
あえてピクセルを使う必要ってないですよね
メリット
  • ピクセルの世界のweb屋にとってはわかりやすい
デメリット
  • IEで文字拡大できない
パーセント
yahoo!YUIリセットcssなどを使用している場合は、わかりやすそうです。
とりあえず、↓のcssをデモしてみました→
body {
	font-size: small;
}
.px-9 {
	font-size: 65%;/*9px*/
}
.px-11 {
	font-size: 85%;/*11px*/
}
.px-14 {
	font-size: 110%;/*14px*/
}
.px-16 {
	font-size: 123%;/*16px*/
}
.px-22 {
	font-size: 167%;/*22px*/
}
.px-26 {
	font-size: 197%;/*26px*/
}
            
メリット
  • YUIリセットとかとセットで使えばわかりやすい
  • IEでも拡大ができる
デメリット
  • 一度設定すれば使い回せるけど、指定の仕方がわかりづらい
  • 入れ子にすると、どんどん拡大/縮小などされてしまう
em
1emは1文字ってかんじで、indentさせる場合はemを使用するとかなり便利です。
それと統一する形で使用すると気持ちよくなれそうな気もしますねw
とりあえず、↓のcssをデモしてみました→
body {
	font-size: 62.5%;/*ベースを10pxにしています*/
}
.px-9 {
	font-size: 0.9em;/*9px*/
}
.px-11 {
	font-size: 1.1em;/*11px*/
}
.px-14 {
	font-size: 1.4em;/*14px*/
}
.px-16 {
	font-size: 1.6em;/*16px*/
}
.px-22 {
	font-size: 2.2em;/*22px*/
}
.px-26 {
	font-size: 2.6em;/*26px*/
}
            
メリット
  • 指定の仕方がわかりやすい
  • IEでも拡大ができる
デメリット
  • 入れ子にすると、どんどん拡大/縮小などされてしまう
rem
css3!!!!!
なんといっても、目玉はどんどん入れ子にしちゃっても継承されずにオリジナルサイズにて表示してくれることですよね。
IEのカバー率がなんとも悩ましいヤツです。
とりあえず、↓のcssをデモしてみました→
html {
	font-size: 62.5%;/*ベースを10pxにしています*/
}
.px-9 {
	font-size: 0.9rem;/*9px*/
}
.px-11 {
	font-size: 1.1rem;/*11px*/
}
.px-14 {
	font-size: 1.4rem;/*14px*/
}
.px-16 {
	font-size: 1.6rem;/*16px*/
}
.px-22 {
	font-size: 2.2rem;/*22px*/
}
.px-26 {
	font-size: 2.6rem;/*26px*/
}
            
メリット
  • css3なので、最新感を表現できる!
  • 入れ子にして指定しても親に左右されずに使用できる←これ、大事!
デメリット
  • css3のため、対応ブラウザが制限されてしまう
  • chrome/firefox/safari最新版はダイジョブだけど、IE8以下は未対応になっている

ということはー!

remって最強なんじゃねって思いませんか?新しいし、入れ子オッケーだし!
でも、web屋クライアントってそんな甘くないんですよね。。。。w
IE9のみ対応で全然オッケー!とはなかなかまだまだ。。。。ですよね。。。。。
それでもremを使うの〜!って人は、他も併用してあげないといけません。
だって、IE8以下ってこんな感じ
ss.gif
併用させるってなったら
ピクセルと併用する場合
html {
	font-size: 62.5%;/*ベースを10pxにしています*/
}
.px-9 {
	font-size: 0.9rem;/*9px*/
	font-size: 9px;
}
.px-11 {
	font-size: 1.1rem;/*11px*/
	font-size: 11px;
}
.px-14 {
	font-size: 1.4rem;/*14px*/
	font-size: 15px;
}
.px-16 {
	font-size: 1.6rem;/*16px*/
	font-size: 16px;
}
.px-22 {
	font-size: 2.2rem;/*22px*/
	font-size: 22px;
}
.px-26 {
	font-size: 2.6rem;/*26px*/
	font-size: 26px;
}
            
ただ、こうしてしまうとピクセルで指定しているので、前述した通りIE8以下では拡大することができません
上記のremサンプルでは、↑のように指定しているので見てみてください。

そのため、IE8以下にてサイズ変更させるためには、emもしくはパーセントでも指定することが必要になります。
html {
	font-size: 62.5%;/*ベースを10pxにしています*/
}
.px-9 {
	font-size: 0.9rem;/*9px*/
	font-size: 0.9em;
}
.px-11 {
	font-size: 1.1rem;/*11px*/
	font-size: 1.1em;
}
.px-14 {
	font-size: 1.4rem;/*14px*/
	font-size: 1.4em;
}
.px-16 {
	font-size: 1.6rem;/*16px*/
	font-size: 1.6em;
}
.px-22 {
	font-size: 2.2rem;/*22px*/
	font-size: 2.2em;
}
.px-26 {
	font-size: 2.6rem;/*26px*/
	font-size: 2.6em;
}
            
ただ、こうしてしまうと元の木阿弥になるのですがIE8以下では入れ子にしていると文字サイズが適切に表現できていません。。。。。
ということで、よっぽどのほんとに最新ブラウザだけでおっけー!案件や、スマフォサイトの場合以外ではなかなか実用レベルとはいえないのではないでしょうか。

結論

地道にコーディング、emもしくは%にて指定していくのが良さそうです!
ちなみに・・・・
html {
	font-size: 62.5%;/*ベースを10pxにしています*/
}
.xsmall {
	font-size: 0.9em;/*9px*/
}
.small {
	font-size: 1.2em;/*12px*/
}
.medium {
	font-size: 1.4em;/*14px*/
}
.large {
	font-size: 1.6em;/*16px*/
}
.xlarge {
	font-size: 2.2em;/*22px*/
}
.xxlarge {
	font-size: 2.6em;/*26px*/
}
            
私の場合には、↑のように個別にフォントサイズを作り活用していくこともあります。
こうすることによって、要素毎に適切に割り振っていけば入れ子になることもないですし、あれ、ここ指定したっけ?というのもhtmlをみればすむので便利です。
ただ、htmlのきれいさなどを求めたり、ペライチなどのキャンペーンページだったりと更新の可能性がひくいものに対してのコーディングノ場合には使用するとあまり有効ではないかもしれません。
各文字サイズ比較サイト
PXtoEM.com
何かこの記事に対してのコメントや私の解釈の仕方への指摘などはじゃんじゃんコメントください!