このブログではこれまで「文字サイズの比率と調和」や「音楽、数学、タイポグラフィ」といった記事で、調和数列をもとにしたスケールから文字サイズを決定する手法を紹介してきました。私たちのチームではこのスケールを「ハーモニック・モジュラー・スケール」と呼び、実際に多くのプロジェクトで採用しています。

このたび私たちは、ハーモニック・モジュラー・スケールにもとづくテキストのスタイリングを簡単にするためのツールとして、Sassライブラリ「Harmonic Modular Scale」とSketchプラグイン「Harmonic Modular Scale for Sketch」を公開しました。これらのツールはスケールにもとづく文字サイズを算出すると同時に、行の高さを一定のユニットの整数倍に揃える機能も持っています。

Harmonic Modular Scale

Harmonic Modular ScaleはSassライブラリです。ハーモニック・モジュラー・スケールにもとづくfont-sizeと、一定のユニットの整数倍からなるline-heightを出力します。なおライブラリはSassの新しいモジュールシステムを使って書かれています。

ライブラリでは以下のオプション変数を設定できます。

  • $scale-factor:スケールのもとになる調和数列の、各項の分母にあたる整数。デフォルトは8
  • $base-font-size:スケールの基準になるfont-sizeの値。デフォルトは1rem
  • $line-height-unitline-heightの最小単位。デフォルトは0.25rem
  • $use-calc:出力結果のfont-sizeline-heightプロパティの値にcalc()関数を使うかどうか。デフォルトはtrue

もしこれらのオプションを変更する場合は、@useで読み込むときにwith節で上書きします。

@use "../node_modules/harmonic-modular-scale" as hms with (
  $base-font-size: 1.25rem,
  $use-calc: false
);

ライブラリのもっとも基本的な使い方は、以下のようにsizes()ミックスインを用いてfont-sizeline-heightを出力するものです。

@use "../node_modules/harmonic-modular-scale" as hms;

body {
  @include hms.sizes(0, 3);
}

h1 {
  @include hms.sizes(3, 1);
}

figcaption {
  @include hms.sizes(-2, 1);
}

これは以下のようなアウトプットが得られます。

body {
  font-size: 1rem;                  /* 16px */
  line-height: calc(1em * 56 / 32); /* 28px */
}

h1 {
  font-size: calc(1rem * 8 / 5);    /* 25.6px */
  line-height: calc(1em * 40 / 32); /* 32px */
}

figcaption {
  font-size: calc(1rem * 8 / 10);   /* 12.8px */
  line-height: calc(1em * 50 / 32); /* 20px */
}

sizes()ミックスインは2つの引数を取ります。1つめの$font-size-degreeは必須の引数で、文字サイズのスケール上の位置を指定します。オプションの$base-font-size0として、それより大きければ正、小さければ負の整数を指定します。例えば$base-font-size1rem(16px)、$scale-factor8のときのfont-sizeの出力結果は以下のようになります。

$font-size-degree出力されるfont-sizepx値
4calc(1rem * 8 / 4)32px
3calc(1rem * 8 / 5)25.6px
2calc(1rem * 8 / 6)21.333px
1calc(1rem * 8 / 7)18.286px
01rem16px
-1calc(1rem * 8 / 9)14.222px
-2calc(1rem * 8 / 10)12.8px
-3calc(1rem * 8 / 11)11.636px
-4calc(1rem * 8 / 12)10.667px

第2引数の$line-height-degreeは行の高さを決定するためのものです。sizes()で得られるline-heightの値はつねにオプション$line-height-unit(デフォルトは0.25rem[4px])の整数倍になります。$line-height-degreeは、font-sizeが最低限収まるline-height0として、そこからどれだけ増減させるかを整数で指定します。

上記の例では、bodyfont-sizeが16pxなので、これが最低限収まる4px単位のline-heightは同じく16pxです。$line-height-degree3なので、16pxに12pxを足した28pxがline-heightとして得られます。h1font-sizeが25.6pxで$line-height-degree0に当たるのが28pxなので、1を指定すると結果は32pxになります。以下の表はfont-sizeが0.8rem(12.8px)の場合のline-heightプロパティの出力です。

$line-height-degree出力されるline-heightpx値
3calc(1em * 70 / 32)28px
2calc(1em * 60 / 32)24px
1calc(1em * 50 / 32)20px
0calc(1em * 40 / 32)16px
-1calc(1em * 30 / 32)12px

またget-line-height()という、line-heightをもとにした長さを返す関数も用意されています。これは例えば「本文2行分のマージンを中見出しの上に持たせたい」というようなときに便利です。引数として$font-size-degree$line-height-degreeに加えて、line-heightを何倍するかを指定する$linesも渡せます。

@use "../node_modules/harmonic-modular-scale" as hms;

$theme-sizes-body: (0, 3);
$theme-sizes-h2: (2, 2);

body {
  @include hms.sizes($theme-sizes-body);
}

h2 {
  @include hms.sizes($theme-sizes-h2);
  margin-top: hms.get-line-height($theme-sizes-body, 2);
  margin-bottom: hms.get-line-height($theme-sizes-body);
}

これは次のように出力されます。

body {
  font-size: 1rem;
  line-height: calc(1em * 56 / 32);     /* 28px */
}

h2 {
  font-size: calc(1rem * 8 / 6);
  line-height: calc(1em * 48 / 32);
  margin-top: calc(1rem * 56 / 32 * 2); /* 56px */
  margin-bottom: calc(1rem * 56 / 32);  /* 28px */
}

Harmonic Modular Scale for Sketch

Harmonic Modular Scale for SketchはSketchでテキストをスタイリングするためのプラグインです。GUIを通じて、ハーモニック・モジュラー・スケールにもとづく文字サイズと、ユニットの整数倍からなる行の高さを指定できます。デザイナーと開発者が共通のロジックでタイポグラフィに触れることで、両者の連携が円滑になることを目指して開発しました。

使い方は簡単です。プラグインのウィンドウを開き(Plugins > Harmonic Modular Scale > Type Scale Settings…)、テキストレイヤーを選択した状態で、Font size degreeとLine height degreeのスライダーを調整してください。チームでSketchファイルを共有するときは、メンバーがそれぞれプラグインをインストールしておくと便利です。レイヤーを選択するだけでパラメーターの値を共有できます。