フォントサイズ「rem」

フォント 制作基本

rem

今までフォントサイズには「px」「em」「%」などを使うのが一般的でしたが、「rem」という新しい単位が、CSS3から利用できるようになり、非常に便利になりました。
「rem」とは「root」+「em」の意味で、「ルート要素(htmlに指定)の値」を基準にした相対的なフォントサイズを指定します。
従来の「em」や「%」などの相対指定と違って、親要素の値を継承しないので、子要素が全ての親要素を複利的に継承して、どんどん拡大・縮小されてしまうこともなく、細かい計算が不要になります。
常にルート要素に対してのみ相対的なサイズを指定できるので、非常にわかりやすく便利です。

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

とhtml指定すると

1.6rem = 16px
2.6rem = 26px

のように表示できるようになります。
ただしCSS3のみですので、未対応ブラウザに対しては、「px」で最初に指定し、その次に「rem」で指定しておくとよいです。

body {
font-size: 15px;
font-size: 1.5rem;
}

こんな感じ。

【参考】他の値

pt(ポイント):1pt=1/72in
in(インチ):1in=2.54cm
pc(パイカ):1pc=12pt
px(ピクセル):画素に対する倍率
em:フォントサイズを1とする単位。bodyなどでfont-sizeの指定がないとき、または100%なら1em=16px。
ex:アルファベット小文字「x」を1とする単位
%(パーセント):標準フォントサイズの相対割合

コメント

タイトルとURLをコピーしました