Modular Scaleを使ったフォントサイズの指定

先日、Modular ScaleとVertical Rhythmを使ったタイポグラフィとレイアウトという記事でModular Scaleについて紹介しましたが、今回は実際にBourbonにビルトインされたModular Scale、BourbonやCompassを使わずにVanilla SCSSに導入できるModular Scale Sassの２つを紹介します。

準備

インストール方法ですがBourbonはGemから、Modular Scale SassはCompassを使っていればGem、そうでなければBower、またはZipを解凍して使う方法があります。SassはRuby系ですからGemでインストールしたいところですがCompassに依存してしまっているようなので私はBowerを使ってインストールすることにしました。詳しいインストール手順は省きますのでそれぞれのページを参照してください。

デフォルト設定

Modular Scaleのデフォルト設定はベースとなるフォントサイズと比率の2つを設定します。Bourbonにビルトインされているものとされていないものでは変数名が違うところに注意してください。

Bourbonの場合

$modular-scale-base: 1em;
$modular-scale-ratio: $golden;

Modular Scale Sassの場合

$ms-base: 1em;
$ms-ratio: $golden;

ここで指定している比率（$modular-scale-ratioまたは$ms-ratio）とは代表的なものを上げると黄金比や白銀比などです。値は比率の1:xのxを指定します。黄金比であれば1.618...ですね。この比率は変数が用意されているのでその中から使っても良いですし、独自に指定してもかまいません。Bourbonの場合、以下の変数が利用できます。Modular Scale Sassは変数名が違うのでこちらRatiosを参照してください。

Bourbonで指定できる変数

$golden:           1.618;
$minor-second:     1.067;
$major-second:     1.125;
$minor-third:      1.2;
$major-third:      1.25;
$perfect-fourth:   1.333;
$augmented-fourth: 1.414;
$perfect-fifth:    1.5;
$minor-sixth:      1.6;
$major-sixth:      1.667;
$minor-seventh:    1.778;
$major-seventh:    1.875;
$octave:           2;
$major-tenth:      2.5;
$major-eleventh:   2.667;
$major-twelfth:    3;
$double-octave:    4;

これらの変数はデフォルト設定以外にも関数の引数に直接指定することもできます。

関数の使い方

両者は関数名が違うだけで同じものです。Bourbonの場合はmodular-scale($scale [, $font-size, $ratio])、Modular Scale Sassはms($scale [, $font-size, $ratio])です。引数は最大3つあり、1つめがスケール、2つめ（オプション）がベースとなるフォントサイズ、3つめ（オプション）が比率です。

Bourbonを使った場合、このようになります。

$modular-scale-base: 1em;
$modular-scale-ratio: $golden;

div {
  font-size: modular-scale(1);
}

第一引数に指定したスケール1はx * $ratioとなりフォントサイズ1emの場合、1em * 1.618 = 1.618emとなります。スケール2の場合1.618em * 1.618em = 2.618em、スケール3の場合2.618em * 1.618em = 4.236emです。スケールの変化はModular Scaleで試すとわかり易いです。0を指定するとベースフォントサイズがそのまま、-0.5や-1を指定することもできます。

第2引数と第3引数の使いどころ

画面上のすべての箇所を同じ比率ではデザインできない場合もあります。そんな時に第2,3引数を指定してデフォルト設定とは違うベースフォントサイズ、比率を使うことができます。更に第2,3引数は複数指定することができ、異なるフォントサイズ、比率からスケールを指定することができます。

div {
  font-size: modular-scale(3, 2em, 1.234);
}

div {
  font-size: modular-scale(7, 16px 24px, $golden $augmented-fourth);
}

これでSassを使って手軽にModular Scaleを使うことができますね。Vertical Rhythmも合わせて使うことができるのですが、紹介は次回に回したいと思います。