零弐壱蜂

[Sass] Vertical Rhythm と Modular Scale を使ってタイポグラフィを考え直した

8 min read

概要

これまで目測で文字サイズや余白を決めていたが、Vertical Rhythm と Modular Scale を使って、それなりによい感じでタイポグラフィを調整する。
いろいろと試してみた結果だが、完璧なもの・それに近いものを今の環境で作るのは不可能だった。フォントの問題もあるが、特に日本語のデザインだとデザインの調和が難しい。今回は、それなりのタイポグラフィを目指す。

Vertical Rhythm とは

なぜタイポグラフィにおいて Vertical Rhythm（バーティカルリズム）は重要な手法なのか？ | デザイン | POSTDに記載があった。（以下、引用）

Vertical Rhythm は印刷のタイポグラフィに起源を持つ概念です（多分）。Vertical Rhythm とは、ページの要素間の縦のスペースを揃えるようにすることを言います。

ベースラインは本文のプロパティ line-height によって決定されます。例えば本文の line-height の値が 24px だとすると、ベースラインは 24px となります。

  1. 要素間の縦の空白を 24px の倍数にセットする。
  2. 全てのテキスト要素の line-height を 24px の倍数にセットする。
h1 {
  line-height: 48px;
  margin: 24px 0;
}

p {
  line-height: 24px;
  margin: 24px 0;
}

要は

  • line-height と margin のサイズを統一した値で設定していくことでスタイルのバランスを整える
    • それに合わせて font-size も変えていく

（だと解釈している）

Vertical Rhythm を決めるためには…

ブラウザのベースフォントサイズは、 16px なのでline-heightは 32px になるように設定した。（実際にはfont-sizeが 1rem であるため、line-heightには 2rem を設定）

ちなみに、Gridloverというアプリでだいたいのイメージを付けられる。ただ、ビルドシステムが構築された環境でこれをそのまま使うのは格好良くないので、Modular Scale を使ってよい感じにしたい。

Modular Scale とは

私は Sass を含んだプロジェクトには Bourbon を使用している為、 Bourbon の Modular Scale をそのまま使用した。
GitHub - modularscale/modularscale-sass: Modular scale calculator built into your Sass を見ると、Compass や Bower などインストール方法がいろいろとあるみたい。

設定値

Bourbon の Modular Scale は、デフォルト値は以下のようになっている。

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

また、スケール率には、以下の定数が定義されているので、その中から変数を使用すると良い。 bourbon/helpers/_scales.scss

$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;
$golden: 1.618;
$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;

私は、各設定値を以下のように変更した。

$modular-scale-base: 1rem;
$modular-scale-ratio: $augmented-fourth;

scale-ratio には、"黄金比"が設定されていた物を"白銀比"に変更した。白銀比に変更したのは、黄金比よりも白銀比が日本で古くから美しい比として馴染みのある比率という理由が主だ（Wikipedia より）。

modular-scale 関数

基本的には、modular-scale(1)、modular-scale(2)のように第 1 引数に数値を入れて使用する。
デフォルト以外の比率を使用したい場合は、第 2・3 引数を modular-scale(1, 2rem, $major-third) のように指定して使用する。

スケールの値をmodular-scale(0)、modular-scale(1)、modular-scale(2)…という単純な指定だけできれいに指定ができれば良いのだが、サイズが大きすぎる場合もある。

scale(2): The quick brown fox jumps over the lazy dog

scale(3): The quick brown fox jumps over the lazy dog

scale(4): The quick brown fox jumps over the lazy dog

modular-scale(0) -> 1rem
modular-scale(1) -> 1.4375rem
modular-scale(2) -> 2rem
modular-scale(3) -> 2.8125rem
modular-scale(4) -> 4rem
modular-scale(5) -> 5.625rem

そういう場合は以下のように、第 2 引数のベースサイズを変えて調整することも可能。

modular-scale(2);
modular-scale(1, 1.2rem);
modular-scale(1, 1.1rem);
modular-scale(1);
modular-scale(0);
modular-scale(-1);

<h1>、<h2>、<h3>と順番に指定していくと、バランスが悪くなる場合もあるため、そういう場合は上記のようなステップで指定する。

まとめ

modular-scale を使ってサイズや余白などを指定したとしてもブログのような記事によって内容が異なる場合、Vertical Rhythm がズレることは必至。そのため、ある程度の体裁を整える基準とするのが良い（ボーダーや画像のサイズは諦める）。

日本語の文字やフォントの問題もあり、完璧なものを作るのは難しい。ただ、何の根拠もない値でサイズを決めてしまうよりは、こういう理屈にのっとった形で実装していくことで全体的な調和や保守性も高めることができるだろう。

その他

タイポグラフィとは関係ないが、今回の見直しで合わせて見直しをしてみたものについて記載する。

font-smoothing プロパティ

font-smoothingは、フォントのアンチエイリアスを調整する CSS のプロパティである。独自実装であり、macOS の Chrome/Firefox のみで使用できる。

  • -webkit-font-smoothing
  • -moz-osx-font-smoothing

使う場合は以下のような感じ。

subpixel-antialiased/auto: (default)

The quick brown fox jumps over the lazy dog

すばしっこい茶色の狐はのろまな犬を飛び越える

antialiased/grayscale:

The quick brown fox jumps over the lazy dog

すばしっこい茶色の狐はのろまな犬を飛び越える

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

-webkitと-moz-osxは、それぞれプロパティの設定値（名）が違うのだが、上記の設定で同じような設定になる。antialiased / grayscale適応後の見た目としては、フォントが細くなるイメージのため、全体的なスタイルを見て適応すべきである（ちなみにデフォルトは、それぞれsubpixel-antialiased / auto）。

参考