remを使ったVertical Rhythm

前回、【Sass/SCSS】Modular Scaleを使ったフォントサイズの指定でModular ScaleをSass/SCSSで使う方法について紹介しました。今回はCSS3のremを使ってVertical Rhythmを実現する方法について紹介します。remは対象ブラウザがIE8以上であることが条件になりますが、IE8自体非対象でも良いでしょう。

Example

Vertical Rhythmは以外と簡単です。実際にFunctionを作成して実装してみたサンプルがこちら。GRIDLOVERを参考に作成しました。

Function

ベースラインを保持ておく変数（$base-line-height: <line-height>;）と行の高さを返すシンプルなfunction（vr([$lines = 1])）を用意します。functionは$base-line-heightと引数の$linesをかけているだけです。remだからこそこれだけシンプルにできますね。この関数をラップしてMixinにするのも良いかもしれません。

$base-line-height: 2rem;

@function vr($lines: 1){
  $line-height: $base-line-height * $lines;
  @return $line-height;
}

使い方

bodyにline-heightを指定します。

body {
  line-height: vr();
}

見出し部分ではこのように使われています。

h1 {
  margin-top:    vr(2); //2行分
  margin-bottom: vr(1); //1行分
  line-height:   vr(3); //3行分のline-height
  font-size: 4.236rem; 
}

line-heightはfont-sizeの影響を受けないので常にline-heightの方が大きくなるよう設定しておけばレイアウトが崩れることはありません。

注意点

remはブラウザ上でpxに変換されます。remをpxに変換した際に少数が発生するとmargin, paddingとline-heightでは扱いが異なるため微妙なズレが起こります。line-heightの場合は小数点以下を切り捨てた値が使われ、例えば1.65remを指定すると26.4pxとなります。この値をline-heightに指定しても小数点以下は切り捨てされ26pxとなり、逆にmarginやpaddingは小数点以下も扱われるため26.4pxのまま計算され差が生まれます。

Modular Scaleと合わせて使う

このFunctionであればフォントサイズを自由に指定できるので行数を微調整してやればModular Scaleと併用できます。

h1 {
  margin-top:    vr(2);
  margin-bottom: vr(1);
  line-height:   vr(3);
  font-size: modular-scale(1); // <<
}

IE8以下に対応したい場合

IE8以下に対応したければCompassのVertical Rhythmが使えます。使い方は少し複雑なので慣れが必要です。Compassの他にVertical-rhythmicというライブラリもあるようです。

まとめ

これでModular ScaleとVertical Rhythmを併用できますね。ベースラインを小さく設定しておけば細かな調整も可能になると思います。