[ CSS ] 10px を基準にしてフォントサイズを指定する

さっき書いたエントリー の応用で、デフォルトフォントサイズを 10 ピクセルにし、

font-size:10px → font-size:100% or font-size:1.0em
font-size:12px → font-size:120% or font-size:1.2em
font-size:14px → font-size:140% or font-size:1.4em
font-size:16px → font-size:160% or font-size:1.6em
font-size:18px → font-size:180% or font-size:1.8em

と指定できると簡単かなぁと思い、サンプルを作ってみました。

ベースとなるフォントサイズが 10px なので、パーセント指定にする時、余計な端数が出なくて気持ちいいかなと…。

こう言う手法って、どうなんだろ?

6 COMMENTS

rea

こんばんわ。

自分の場合は、ユニバーサルセレクタですべての要素のfont-sizeを100%にし、それを基準に指定しています。
こんな感じですね↓

* {
font-size: 100%;
}
h1 {
font-size: 150%;
}
p {
font-size: 80%;
}

いろいろ試しましたが、これが一番シンプルでいいかなと思います。
フォントサイズは制作者側が細かく指定しても、ユーザーが簡単に変えられるので、アバウトにしておくほうがいいかもしれませんね。

Bowz

こんばんわ。コメントありがとうございます。
確かに、フォントサイズはアバウトにしておく方が良いかも知れませんね。
何となく神経質になってるのかな?←俺

qeb

こんにちは
1emを10pxにしてしまうと、スタイルされてないタグが登場した時に、マメ字になってでちゃいませんか?
p=1em=14pxあたりがいいんじゃないかと勝手に思ってます。
body {font-size: 84%;}にすると、タグをつけてない文字も読める大きさでいいですよ。

Bowz

コメントありがとうございます。
確かに、デフォルトを 10px にしてしまうと、スタイルの適用漏れがあった時、マメ文字になっちゃいますね。
やっぱり、記事に書いてあるような手法は使わない方が良いみたい。

チバのブログ

IEのバグを回避しつつ基準のフォントサイズを決めるスタイルシート

文字コードがUTF-8の時、IEでだけ10px前後のフォントサイズが12px相当の大きさに表示されてしまうと言うバグ(?)に長年頭を悩ませてきました。 Movable TypeとかWordpressと…

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です