零弐壱蜂

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

8 min read
hiroweb developer

概要

これまで目測で文字サイズや余白を決めていたが、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(webkit)/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）

参考