[CSS] rem でフォントサイズを相対指定する

以前 「YUI Fonts CSS でフォントサイズを相対指定する」 という記事を2008年に書いたんだけど、
6年後(!!)の現在はremで指定しているのでそれについてメモっておく。

rem(root + em = rem)というのは単位のことで、ルート(=html)を基準に相対指定ができる。
YUI Fonts CSSなどのemや%を用いる相対指定との最大の違いは、指定が入れ子になっても親のサイズに影響を受けないという所で、それが最大のメリットでもある。
対応状況は、モダンブラウザならほぼおkという感じだけど一部注意が必要。

  • IE9&10はfontショートハンドおよび疑似要素で未対応
  • IE9&10&11は疑似要素のline-heightで未対応
  • Chromeはborder-sizeでremを使用すると拡大したときに線が消える

プリプロセッサを常用してるので、remの設定部分もほぼ使い回してます。
以下はその設定部分の抜粋です。

Sass

$default-root-font-size : 62.5% !default; // rootの文字サイズ
$default-font-size-base : 1.4rem !default; // ベースの文字サイズ(13px相当)
$default-font-size-xxl  : ($default-font-size-base + 0.4) !default; // xx-large
$default-font-size-xl   : ($default-font-size-base + 0.2) !default; // x-large
$default-font-size-l    : ($default-font-size-base + 0.1) !default; // large
$default-font-size-s    : ($default-font-size-base - 0.1) !default; // small
$default-font-size-xs   : ($default-font-size-base - 0.2) !default; // x-small
$default-font-size-xxs  : ($default-font-size-base - 0.4) !default; // xx-small

html {
font-size: $default-root-font-size;
}

body {
font-size: $default-font-size-base;
}

p {
  font-size: $default-font-size-s;
}

.fs--xxl {
  font-size: $default-font-size-xxl;
}

.fs--xl {
  font-size: $default-font-size-xl;
}

.fs--l {
  font-size: $default-font-size-l;
}

.fs--m {
  font-size: $default-font-size-base;
}

.fs--s {
  font-size: $default-font-size-s;
}

.fs--xs {
  font-size: $default-font-size-xs;
}

.fs--xxs {
  font-size: $default-font-size-xxs;
}

See the Pen [sass] rem font setting by Tenderfeel (@Tenderfeel) on CodePen.

Styls

StylusでSassのような計算式を書くとJavaScriptの小数点計算の悪癖がそのまま出ることがあるんで、ceilやroundで丸めといた方が良い。

$default-root-font-size = 62.5% // rootの文字サイズ
$default-font-size-base = 1.4rem // ベースの文字サイズ(13px相当)
$default-font-size-xxl  = ceil($default-font-size-base + 0.4, 1) // xx-large
$default-font-size-xl   = ceil($default-font-size-base + 0.2, 1) // x-large
$default-font-size-l    = round($default-font-size-base + 0.1, 1) // large
$default-font-size-s    = ceil($default-font-size-base - 0.1, 1) // small
$default-font-size-xs   = ceil($default-font-size-base - 0.2, 1) // x-
$default-font-size-xxs  = ceil($default-font-size-base - 0.4, 1) // xx-small

html
  font-size $osl-default-root-font-size

body
  font-size $osl-default-font-size-base

p
  font-size $default-font-size-s

.fs--xxl
  font-size $default-font-size-xxl

.fs--xl
  font-size $default-font-size-xl
    
.fs--l
  font-size $default-font-size-l

.fs--m
  font-size $default-font-size-base

.fs--s
  font-size $default-font-size-s

.fs--xs
  font-size $default-font-size-xs

.fs--xxs
  font-size $default-font-size-xxs

See the Pen [stylus] rem font setting by Tenderfeel (@Tenderfeel) on CodePen.

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください