効果的な活版印刷の階層を構築する方法
公開: 2022-03-11デザイン内のコンテンツを効果的に整理して、理解しやすく消費しやすいようにすることは、デザイナーの最も重要な仕事の1つです。 また、デザイナーが扱うコンテンツの多くはテキストベースであるため、効果的な活版印刷の階層を作成することは、デザイナーが学ぶことができる最も重要なことの1つです。
効果的な階層を作成する練習と実験は、スキルを実際に習得するための最良の方法ですが、設計者が自分で始める前に、最初に学ぶ必要のあるガイドラインがいくつかあります。 結局のところ、最初にルールが何であるかを知らなければ、ルールを効果的に破ることは不可能です。
活版印刷の階層とは何ですか？
初心者の設計者は、タイポグラフィの階層を使用する必要性を過小評価することがあります。 しかし、この例を見てください：
同じ情報が両側で伝えられていますが、左側では、ヘッダー、サブヘッダー、および本文があることを知ることはできません。 右側では、提供されている情報に階層があることがすぐにわかります。
活版印刷の階層は、どの情報に焦点を当てるべきかを読者に示します。これは最も重要であり、単に要点をサポートしているだけです。
Web上の活版印刷の階層を構成するさまざまなものがあります。 これらには以下が含まれます：
サイズ。 サイズは、一般的に、新しいデザイナーが活版印刷の階層を作成しようとするときに最初に目を向けるものです。 そして正当な理由：それは読者によってすぐに、簡単に識別できます。 大きい=重要性が高い、小さい=重要性が低い。 しかし、階層を作成するための他のオプションが非常に多い場合、サイズは松葉杖になる可能性があります。
重さ。 書体を太字または細くすることは、設計者でなくても簡単に識別できる階層を作成するためのもう1つの簡単に認識できる方法です。
色。 階層を作成する方法として色は見過ごされがちですが、それは素晴らしいオプションです。 特定の色の明るい色と暗い色を使用する場合でも、より明確な階層を作成できます。 タイプとその背景のコントラストを高めることで、活版印刷の階層を増やすこともできます。
対比。 対照的な色だけでなく、さまざまなタイプのサイズ、太さ、スタイル間のコントラストも、活版印刷の階層を作成するための鍵となります。 タイプサイズの違いが1つか2つしかない場合、ほとんどのユーザーに階層を表示するのに十分なコントラストは作成されません。 代わりに、デザイナーは簡単に区別できるサイズ、太さ、スタイルを使用して、ヘッダーや本文などのコントラストを簡単に作成する必要があります。
場合。 本文のテキストを大文字にすることは、読みやすさの観点からは一般的に良い考えではありませんが、見出しまたは小見出しに大文字を使用すると、さまざまな見出しや他のタイプを区別するのに役立ちます。
位置と配置。 見出しと小見出しの配置は、設計者が目立たせたい他のタイプとともに、タイプが階層内のどこにあるかに大きな影響を与える可能性があります。 たとえば、センタリングタイプは目立つ傾向があります。 ページの通常の余白の外側にタイプを設定すると、ページの階層内でそのタイプを目立たせることもできます。
活版印刷の階層を作成する方法（およびデザインを視覚的に整理する方法）
活版印刷の階層を作成する場合、設計者には多くのオプションがあります。 ただし、階層の作成に何が含まれるかを知っているだけでは、必ずしも設計者が効果的な階層を作成するのに役立つとは限りません。
最初に考慮すべきことの1つは、設計に必要な階層のレベル数です。 原則として、すべてのデザインには、見出し、小見出し、本文の3つの階層レベルを含める必要があります。 そこから、必要になる可能性のある追加のレベルを検討するのは設計者の責任です。 これらには、キャプション、追加の小見出し、引用符、メタ情報（著者や記事の日付など）が含まれる場合があります。
そこから、階層のさまざまな部分を区別する方法を理解することが重要です。 言うまでもありませんが、見出しは小見出しよりも目立つ必要があり、小見出しは本文のコピーよりも目立つ必要があります。 キャプションは通常、本文のコピーよりも目立たないようにする必要があり、引用符は本文のコピーと小見出しの間のどこかに配置する必要があります。
タイプサイズ
デザイナーが始めるのを助けるために、伝統的な活版印刷のスケールが存在します。 ただし、これらは出発点にすぎません。設計者は、これらの従来のスケールから逸脱しながら、さまざまなウェイトやスタイルを自由に試してみる必要があります。 ほとんどの場合、本文のサイズに基づいてスケールを設定し、そこから拡大します。
The Elements of Typographic Styleの古典的な活版印刷スケールは、ほとんどのワードプロセッシングプログラムがフォントサイズを選択するときに提供するデフォルトである傾向があるため、ほとんどのデザイナーによく知られています。 スケールは次のとおりです。
6、7、8、9、10、11、12、14、16、18、21、24、30、36、48、60、および72。
増加するサイズを計算するためのさまざまな数式に従う追加の活版印刷スケールの例があります。
設計者はデフォルトで12ポイントの本文テキストサイズを使用する傾向がありますが、それを14または16（または24まで）に増やすと、使用する書体によっては読みやすさが向上する可能性があります。 たとえば、Jeffrey Zeldmanの個人Webサイトでは、本文のコピーに24pxのフォントサイズを使用していますが、Vogue.comでは19pxの本文のテキストサイズを使用しています。
ただし、実際の縮尺を確定する前に、設計者は設計で使用されている書体が確定されていることを確認する必要があります。 異なる書体は、技術的には「同じ」サイズであっても、大幅に大きくなったり小さくなったりすることがあります。
調整書体の選択
よりアマチュア的な取り組みとは別に「プロフェッショナル」なデザインを設定することが多いのは、書体の組み合わせです。 書体を効果的に組み合わせるのは、本能と科学の一部ですが、さまざまなファミリの書体を組み合わせるために設計者が従うことができるガイドラインがいくつかあります。
まず、セリフとサンセリフの混合は、2つのセリフまたは2つのサンセリフを組み合わせるよりもはるかに簡単です。 しかし、セリフとサンセリフをつかんで、それらを一緒にデザインに入れるほど簡単ではありません。
書体が使用されるコンテキストを考慮してください。 たとえば、デザインが軽くて楽しいと思われる場合は、書体がそのムードに合っていることを確認してください。 デザインがより深刻な場合は、書体にそれを反映させる必要があります。 言い換えれば、どの書体を組み合わせても、そのムードは一致するはずです。
設計者も、自分たちの利点とは対照的に使用する必要があります。 薄い書体と厚い書体を組み合わせると、重量が非常に似ている2つの書体を組み合わせるよりもうまくいくことがよくあります。
同様のエックスハイト（ベースラインと書体の小文字の平均線の間の距離）を持つ書体を探します。 これは、書体間の競合を防ぐのに役立ちます。 競合を防ぐのに役立つ他のことには、同様のカーニングとキャラクターの形が含まれます。 非常に丸い書体の書体は、より正方形の書体と組み合わせるべきではありません。
ガイドラインは書体の組み合わせを作成するのに役立ちますが、実験と実践に取って代わるものはありません。 デザイナーは、書体の実験に時間を費やし、できるだけ頻繁に書体を組み合わせる練習をする必要があります。 さまざまな状況で機能するフォールバック書体の組み合わせをいくつか見つけることは、利用可能な予算とリソースが大量の試行錯誤を許さないプロジェクトにも役立ちます。
これらのガイドラインが手元にあれば、設計者は、WebタイポグラフィのソースであるBetterWebTypeが効果的な組み合わせを作成するために設定した4つのステップのプロセスに従うことができます。
- 本文のアンカーフォントを探す
- 可能な組み合わせのためにいくつかのセカンダリフォントを見つける
- 組み合わせを評価する
- フォントの組み合わせを削除/選択
追加の考慮事項
最終的な書体を選択した後、さまざまなスタイルと重みを試してみると、超大型の主見出しを作成しなくても、階層のレベルを追加できます。 書体をほぼ同じサイズに保ちながら、重要度の高い見出しを太字にし、重要度の低い見出しを斜体にすると、明確な視覚的階層が作成されます。
同じことが色でもできます。 アクセントカラーの小見出しは、本文と同じ色の小見出しよりも目立ちます。 デザイナーは、タイプサイズだけに依存することなく、より重要なテキストを区別するために、小見出しの色で遊ぶ必要があります。
間隔を使用して、重要な見出しと小見出しを区別することもできます。 見出しの周囲にスペースを作成して、付随する本文から目立つようにすると、見出しがさらに目立つようになります。 対照的に、本文と同じ間隔の小見出しは重要性が低くなります。
文字間の間隔さえも使用して、階層を作成できます。 文字の間隔を空けると、特定の行をより目立たせることができます。 これは、これらの文字を大文字にすることと組み合わせると特に効果的です。 ただし、使いすぎると素人っぽく見える可能性があるため、設計者はこれをやりすぎないように注意する必要があります。
結論
実験と練習は活版印刷の階層を習得するための最良の方法ですが、これらのガイドラインを学ぶことは、設計者が正しい足で始めるのに役立ちます。 サイズ、色、間隔、重量、およびその他の要因が効果的な階層にどのように寄与するかを学ぶことが最初のステップです。
これらの基本がデザイナーの心（および実践）に確立されると、ユーザーにインスピレーションを与えて楽しいユニークなデザインを作成するために、必要に応じて「ルール」に従うまたは破る視覚的な階層をより直感的に作成できます。
•••
Toptal Designブログでさらに読む：
- 読みやすさのための設計– Webタイポグラフィのガイド（インフォグラフィック付き）
- 書体分類のニュアンスを理解する
- デザインの基礎–ビジュアル階層のガイド（インフォグラフィック付き）
- Webおよび印刷デザインの書体スタイル
- 明確な視覚的階層でUXを後押し