タイプスケールとは？必要性とプロジェクトに合った選び方を徹底解説

タイプスケールとは、製品やサイト内のさまざまなテキスト要素を表現するために、慎重に選び抜かれたフォントサイズの集合のことです。バランスの取れた調和のとれた構成を実現するために使われます。

自前のタイプスケールから同じフォントサイズを一貫して使用することで、デザインに自然と統一感が生まれ、階層構造や優先順位がバラバラに見える製品を防ぐことができます。

なお、タイプスケールは「タイポグラフィックスケール」と呼ばれることもあります。

制約がもたらす一貫性

原則として、タイプスケールは余白のスケール（スペーシングスケール）やカラーパレットと同じように機能します。デザインの選択肢が限られているほど、製品の見た目や操作感の一貫性を保ちやすくなります。そして一貫性こそが、ユーザーの信頼を築く上で欠かせない要素なのです。

つまりタイプスケールとは、タイポグラファーやデザイナーとしての自分の自由をあえて制限することで、引き換えにユーザーへ一貫した体験を提供する仕組みだと言えます。

ユーザーが製品に触れたときに処理すべき新しい情報（視覚情報はすべて処理を要する情報です）が少ないほど、混乱や疲労は軽減されます。ウェブサイトを訪れた人や製品を見た人を混乱させたり疲れさせたりすることほど、避けたいことはありません。

プロジェクトに合ったタイプスケールの選び方

ブログ記事の執筆でもワインラベルのデザインでも、フォントサイズだけでなく、場合によっては複数の書体（フォントファミリー）も含め、いくつかの異なるテキスト要素を扱うことになります。

ここでは話を簡単にするため、1つの書体で作業していると仮定しましょう。このとき答えるべき核心的な問いは、「プロジェクトの各テキスト要素を最適に表現するには、何種類のフォントサイズが必要か？」という点です。

代表的なテキスト要素には、次のようなものがあります。

• タイトル・見出し
• 段落とリスト（本文）
• キャプション
• サブタイトル
• ブロック引用／プルクォート

ライターであれば、これらすべてを日常的に使っていることでしょう。

通常は、上記の各テキスト要素に1つのフォントサイズを割り当てます。ただし見出しは例外で、プロのデザイナーはプロジェクトの性質に応じて1〜6段階の見出しを使い分けるのが一般的です。

ほとんどのウェブサイト系プロジェクトでは、スケールに最低5種類のフォントサイズが必要になると考えてよいでしょう。

スケールの構築方法

では、どうやってスケールを組み立てればよいのでしょうか？ 各テキスト要素にふさわしいフォントサイズを見つけ、互いに調和することを確認するには、主に次の3つの方法があります。

1. 既存のタイプスケールテンプレートを使う
2. 目分量＋試行錯誤で作る
3. 1と2を組み合わせる

2番目の方法（目分量＋試行錯誤）を活かすには、経験を積んだタイポグラファーである必要があります。

既存のテンプレートを活用する

自分でフォントサイズを決めるのに自信がない場合は、Material Designなど、すでに用意されているタイプスケールを利用するのがおすすめです。

これは堅実なタイプスケールであり、初心者にとっては、勘だけに頼って結果を出そうとするよりも、プロのデザイナーが提供するテンプレートを適用する方が常に良い選択です。ただし、他のデザイナーのタイプスケールを使う際は注意が必要です。書体が変われば、求められるタイプスケールも変わるという点を忘れないようにしましょう。

タイポグラフィに万能な解決策は存在しません。Material Designが提供するような既存のスケールを使うと決めた場合でも、盲目的に適用してはいけません。Material DesignはRobotoという書体を前提としており、Robotoに対しては彼らのタイプスケールは絶大な効果を発揮します。

プロジェクトでRoboto以外のフォントファミリーを使う場合でも、Material Designのテンプレートを出発点にすることは可能です。ただし書体の構造によっては、完璧に馴染ませるために細部を調整する必要が出てくるかもしれません。

タイプスケールジェネレーターを使う

type-scale.comのようなタイプスケールジェネレーターを利用するのも有効な手段です。この優れたサイトでは、実際の音楽音階に基づいたさまざまな数学的スケールから選択でき、CSSスタイルシートを自動生成してくれます。

Google Fonts経由で数百種類のフォントファミリーと、8種類のタイプスケールテンプレートを試せます。さらに、独自のカスタムスケールを作成することも可能です（こちらは初心者向けではありません）。

ジェネレーターの詳しい使い方は、サイトを下にスクロールすると確認できます。

保証はありませんが、type-scale.comの実績あるタイプスケールを適用すれば、手探りで進めるよりもほぼ確実に、調和のとれた結果にたどり着けるでしょう。

だからこそ、冒頭のリストにある1と2を組み合わせることをおすすめします。まずMaterial Designやtype-scale.comのスケールといった既存テンプレートを出発点に選び、その後、試行錯試行錯誤しながら自分のニーズに合わせて微調整していくのです。

より優れたタイポグラファーになる唯一の道は実験を重ねることですが、蓄積された知識を道しるべとして活用することに、デメリットは一切ありません。