タイプスケールとは何ですか？なぜそれが必要なのですか？

タイプスケールは、製品のバランスの取れた調和のとれた構成を確立するために、さまざまなテキスト要素を表すために使用する慎重に選択されたフォントサイズのコレクションです。独自のタイプスケールと同じフォントサイズを一貫して使用することで、デザインに自動的に統一性を植え付け、階層の観点から至る所で見られ、優先順位が付けられる製品を回避できます。

タイプスケールは「活版印刷スケール」とも呼ばれます。

制限は一貫性を強制します

原則として、タイプスケールは、スペーシングスケールやカラーパレットと同じように機能します。デザインオプションが制限されているほど、製品の外観と感触の点で一貫性を保つことが容易になります。一貫性は、信頼を構築する上で重要な部分です。 聴衆と一緒に。

タイプスケールは、あなたのを制限する方法です。 一貫したユーザーエクスペリエンスを視聴者に提供する見返りとして、タイポグラファーまたはデザイナーとしての自由。

視聴者が製品に触れたときに消化しなければならない新しい情報（すべてのビジュアルは処理が必要な情報）が少ないほど、混乱や疲労が少なくなります。人々があなたのウェブサイトにアクセスしたり、あなたの製品を見たりするときにあなたが望む最後のことは、彼らを混乱させたり、疲れさせたりすることです。

プロジェクトのタイプスケールを選択する方法

ブログの投稿を書いている場合でも、ワインラベルをデザインしている場合でも、フォントサイズと、場合によっては異なる書体（フォントファミリ）の両方の観点から、いくつかの異なるテキスト要素を使用します。

簡単にするために、1つで作業していると仮定しましょう。 書体。答える必要のある主な質問は、プロジェクトがさまざまなテキスト要素を最適に表現するために必要なフォントサイズの数です。

以下は、最も一般的なタイプのテキスト要素の一部です。

• タイトルと見出し
• 段落とリスト（本文）
• キャプション
• 字幕
• ブロッククォート/プルクォート

あなたが作家なら、おそらくそれらすべてを定期的に使用しているでしょう。

通常は1つを選択します 上記の各テキスト要素タイプのフォントサイズ—見出しは例外です。プロのデザイナーは通常、プロジェクトの性質に応じて1〜6の見出しを使用します。

ほとんどのウェブサイトタイプのプロジェクトでは、最低5を使用していることに気付くでしょう。 スケールに応じて異なるフォントサイズ。

スケールを選択する

では、どのようにスケールを構築するのでしょうか？各テキスト要素を表す適切なフォントサイズを見つけるにはどうすればよいですか。また、各テキスト要素が対応する要素とうまく機能するようにするにはどうすればよいですか。タイプスケールを作成するには2つの方法があります。

1. 既存のタイプスケールテンプレートを使用する
2. 目玉+試行錯誤
3. 1と2の組み合わせ

2番目のオプション（目玉+試行錯誤）を使用するには、経験豊富なタイポグラファーである必要があります。

自分でフォントサイズを考え出すことに抵抗がある場合は、すでに作成されている既存のタイプスケールの1つを利用できます。マテリアルデザインから：

これは堅実なタイプのスケールであり、初心者にとっては、結果への道を推測するよりも、プロのデザイナーが提供するテンプレートを適用する方が常に優れています。他のデザイナーのタイプスケールを使用する場合は注意が必要です。また、書体が異なれば、必要なタイプスケールも異なることを認識してください。

タイポグラフィに1つのサイズで対応できるわけではないため、マテリアルデザインが提供するタイプスケールのように既存のスケールを使用する場合は、盲目的に使用しないでください。マテリアルデザインでは、Roboto書体を使用しているため、タイプスケールは非常に効果的です。 。

プロジェクトでRobotoとは異なるフォントファミリを使用している場合でも、マテリアルデザインのテンプレートを開始点として使用できますが、書体の構造によっては、正しく機能するようにいくつかの調整が必要になる場合があります。

タイプスケールジェネレーターを使用する

タイプスケールジェネレーターを使用することもできます。 type-scale.comから。この素晴らしいウェブサイトでは、（実際の音階に基づいて）さまざまな数学的音階から選択し、CSSスタイルシートを自動的に生成できます。

何百ものフォントファミリ（Google Fonts経由）と8つの異なるタイプスケールテンプレートをテストできます。独自のカスタムスケールを作成することもできます（初心者向けではありません）。

Webサイトを下にスクロールして、ジェネレーターの使用方法の説明を読んでください。

保証はありませんが、type-scale.comで実績のあるタイプスケールのいずれかを適用することで、単に羽ばたく場合よりも、ほとんどの場合、より調和のとれた結果が得られます。

そのため、前述のリストの提案1と2を組み合わせることをお勧めします。マテリアルデザインやtype-scale.comのスケールの1つなど、既存のテンプレートを開始点として選択し、試行錯誤しながらニーズに合わせて調整します。エラー。

より優れたタイポグラファーになるための唯一の方法は実験によるものですが、正しい道を案内するためにいくつかの集合的な知識を使用することは害にはなりません。