ブログ

ハーモニック・モジュラー・スケールのためのSassライブラリとSketchプラグイン

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

このたび私たちは、ハーモニック・モジュラー・スケールにもとづくテキストのスタイリングを簡単にするためのツールとして、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-unit：line-heightの最小単位。デフォルトは0.25rem
$use-calc：出力結果のfont-sizeとline-heightプロパティの値にcalc()関数を使うかどうか。デフォルトはtrue

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

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

ライブラリのもっとも基本的な使い方は、以下のようにsizes()ミックスインを用いてfont-sizeとline-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-sizeを0として、それより大きければ正、小さければ負の整数を指定します。例えば$base-font-sizeが1rem（16px）、$scale-factorが8のときのfont-sizeの出力結果は以下のようになります。

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

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

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

`$line-height-degree`	出力される`line-height`	px値
`3`	`calc(1em * 70 / 32)`	28px
`2`	`calc(1em * 60 / 32)`	24px
`1`	`calc(1em * 50 / 32)`	20px
`0`	`calc(1em * 40 / 32)`	16px
`-1`	`calc(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ファイルを共有するときは、メンバーがそれぞれプラグインをインストールしておくと便利です。レイヤーを選択するだけでパラメーターの値を共有できます。