ZEROのメモ

システム手帳とブログのコラボ

【9999】フォントサイズ(font-size)の単位は「rem」と「px」で設定

本ブログで適用している「Frontier」において、フォントサイズ(font-size)を指定するために、「px」と「rem」を標準で利用しています。私個人は、他のブログでは「px」を利用していましたが、「rem」って単位を知りませんでしたが、ちょっとネットを調べれば・・・とっても参考になる公開記事を見つけたので、以下に引用しておきます。

3つ目に紹介するテクニックは、CSS3 の「rem」です。(中略)「rem」では常にルート(またはhtml要素)に相対的となります。これは、html 要素にフォントのサイズを一つ定義し、すべての子要素を「rem」で定義することができます。

「rem」のブラウザサポートは、Firefox3.6+, Chrome, Safari5, IE9+ です。注目すべき点は、IE9 が文字のサイズを変更することをサポートするということです。
※Opera(11.10現在)では、「rem」をサポートしていません。

では、「rem」をサポートしていないブラウザにはどのように対応すればよいでしょうか?
IE7/8 ではページのズームがあり、「px」を使用してもサイズを変えることができます。これを活用し、最初に「px」で定義し、次に「rem」で再び定義します。出典:「[CSS]フォントのサイズ指定はpx? em? 既存の再検討とこれからのテクニック | コリス」より

なるほど!「CSS3」で「rem」という単位が提唱されたんですね!また、上記から「px」と「rem」を定義しておけば、全てのブラウザーでカバーされるようです。

本ブログでは「16px」をベースにします。よって、以下のように定義することにします。

body {
	font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
	font-size:16px; font-size:1.000rem; }

最近は、老眼が進んで大きめのフォントが好みです。標準で「16px」であれば、読めるし(見えるし)なかなか良い感じ(あくまでも、自己満足ですが・・・)。「px」と「rem」を定義するために、とっても素晴らしいサイトを見つけたので、リンクを貼っておきます。
「px rem を相互変換|調べるネット」

上記のサイトを利用すれば、「px」を定義して、更に「rem」w計算してくれるので、とっても便利です。ちょっと参考までに、利用しそうな「px」と「rem」をリストしておきます。

px rem
24 1.500
22 1.375
20 1.250
18 1.125
16 1.000
14 0.875
12 0.750
更新日: 2017年04月23日 — 04:16

気楽にコメントして頂けますように!コメントは承認後の公開です。

Zeroのメモ © 2017 by Zero Cool. All Rights Reserved. Frontier Theme