以前 「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.