font-size:62.5%;を使うべきなのか。

HTML/CSS

フォントサイズの設定をする際に、以前はfont-size:62.5%;を使用する場面が多かったWEBですが、スマホやタブレットの登場で動きは変わったのでしょうか?

font-size:62.5%;に設定する理由

もともとブラウザのデフォルトフォントサイズが16pxだったため、htmlのフォントサイズが指定なくfont-size:100%;だった場合、20pxのフォントを指定するのに20/16=1.25% つまりfont-size:1.25%;や1.25emを指定していまいた。これが23pxの場合、1.4375%となり指定がとても面倒でした。

html {
font-size:100%; /* 16px */
}

h1 {
font-size:2.25em; /* 36px */
}

h2 {
font-size:1.6875em; /* 27px */
}

そこで、htmlのフォントサイズをデフォルトの16pxから62.5%の10pxにすることで、以下のフォント指定を簡単にしようというのが始まりで62.5%を指定し始めました。

html {
font-size:62.5%; /* 10px */
}

h1 {
font-size:3.6em; /* 36px */
}

h2 {
font-size:2.7em; /* 27px */
}

レスポンシブ対応でスマホなどの指定は変わったのか?

実際大手のサイトを見てみると…現場では直接pxを指定しているところが多いのかな?というのが印象です。うちも現場ではpxを直接指定して対応します。理由は他社で作成した案件を引き継いだ際などに思わぬ誤表示に悩まされることが多々あるからでしょうか。それでも自社のみで作成する案件に62.5%を指定するかと言われると、うちは使わないかな。
ちなみに、スマホでの指定方法も62.5%でよいという記事を見ましたが、実証はしてないのでご確認ください。

ピックアップ記事

関連記事一覧

  • コメント ( 0 )

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。