最も基本的な説明を使用するために、タイポグラフィは、書体を通信手段として設計して使用するものです。多くの人々は、グーテンベルグと可動型の開発に始まったタイポグラフィーを考えていますが、タイポグラフィーはこれ以上のものです。デザインのこのブランチは、実際には手書きの文字の形をしています。
タイポグラフィーは今日のあらゆる種類のウェブページで書道からデジタル形式までのすべてを網羅しています。タイポグラフィの芸術には、新しい文字の形を作成するタイプのデザイナーも含まれています。これらのデザイナーは、他のデザインが印刷物から前述のウェブサイトに使用できるフォントファイルに変換されます。それらの作品とは異なり、タイポグラフィの基礎はそれらをすべて支えています。
タイポグラフィーの要素
仕事でタイポグラフィを使用するWebデザイナーと話したことがある人は、「書体」や「フォント」という言葉を聞いたことがあります。多くの人がこれらの2つの用語を同じ意味で使用していますが、実際にはこれら2つの項目にはいくつかの違いがあります。
書体は、フォントファミリに与えられた用語です（例えば、Helvetica Regular、Helvetica Italic、Helvetica Black、Helvetica Boldなど）。様々なバージョンのHelveticaがすべて完全な書体を構成しています。
フォントは、その家族内で1つのウェイトまたはスタイルのみを参照している場合に使用される用語です（Helvetica Boldなど）。多くの書体は多くの個々のフォントで構成されています。これらのフォントはすべて似ていて関連していますが、何らかの点で異なります。いくつかの書体は単一のフォントのみを含むことができ、他の書体はフォントを構成する文字書式の多数の変形を含むことができる。
これが混乱するようであれば、誰かがタイポグラフィの専門家ではない場合、それらが本当に意味する用語にかかわらず「フォント」という用語を使用する可能性があります。あなたがクラフトのメカニックについて純粋なタイプのデザイナーと話している場合を除き、あなたが好むこれら2つの用語のどちらを使用しても、おそらくかなり安全です。あなたがその区別を理解し、正しい言葉を適切に使うことができれば、決して悪いことではありません！
書体の分類
「汎用フォントファミリ」と呼ばれることもあります。これらは、さまざまなフォントが属する多数の一般的な分類に基づいた書体の大きなグループです。 Webページには、次の6種類のフォント分類があります。
- セリフ
- サンセリフ
- スクリプト
- モノスペース
- 筆記体
- ファンタジー
また、他にもいくつかのフォント分類があります。例えば、「スラブセリフ」フォントはセリフに似ていますが、それらはすべて文字の上に厚く、塊状のセリフを持つ認識可能なデザインを特徴としています。セリフとサンセリフは、ほとんどのウェブサイトで使用されている最も一般的なフォント分類の2つです。
書体解剖学
それぞれの書体は、他の書体と区別するための異なる要素で構成されています。これは、書体の解剖学的構造と呼ばれます。具体的にタイプデザインに入り、ブランドの新しいフォントを作成しようとしていない限り、Webデザイナーは一般的にタイプフェイスの用語の基礎を知るだけでよいのです。
基本的なレベルで、あなたが知っておくべき書体解剖学の要素は、「キャップ」と「x高さ」と「ディセンダ」と「アセンダ」です。
Capとx-heightは書体の大文字の高さと文字xの高さです。これは、最大の文字がどのくらいの高さになるか、そして小文字がどのくらい大きくなるかを示します。すべてのフォントは、これら2つの特性に基づいてサイズが決められています。
降順および昇順は、x高さの線の上および下にある文字の部分です。これは通常、小文字を指しています。例えば、文字「b」は、文字「p」がディケンダー（文字から「下に」ディップする部分）を有する間に、上昇体（文字から「上に」張り出した部分）を有する。
文字の間隔
タイポグラフィに影響を及ぼす文字間には、いくつかの調整があります。デジタルフォントは、これらの特徴の多くが整えられて作成されており、ウェブサイト上ではフォントのこれらの側面を変更する能力に限界があります。これは通常、フォントが表示されるデフォルトの方法が通常好ましいため、良いことです。
- カーニング：個々の文字間の水平スペース
- 追跡：文字のグループ間のスペース
- 先導：タイプのラインの間の垂直スペース（これはウェブサイトの用語でラインハイトとして知られています）
- 測定：テキスト行の長さ
- アラインメント：視覚的に左、右、中央、または正当な位置にテキストを配置する
- 合字：手紙がとても近くに動いて、解剖学的構造が組み合わされ、本質的にある手紙を別の手紙に流した
より多くのタイポグラフィ要素
タイポグラフィは、使用されている書体だけでなく、その周りの空白を超えています。デザインに適した印刷システムを作成する際に留意すべき点もいくつかあります。
「ハイフネーション」とは、行末にハイフン（ - ）を付け加えて、読みやすさの問題を防ぎ、正当性をよりよく見せるためのものです。一般的に印刷されたドキュメントでは、ほとんどのWebデザイナーはハイフネーションを無視し、Webブラウザーで自動的に処理されるものではないため、作業に使用しません。
"ラグ" テキストブロックの不均一な垂直エッジです。タイポグラフィに注意を払うときは、文字ブロック全体を見て、そのぼかしがデザインに影響していないことを確認する必要があります。ぼかしがあまりにもギザギザであるか不揃いであると、テキストブロックの可読性に影響を与え、それを気にさせることになります。これは、タイプがラインからラインにどのようにラップされるかという点で、ブラウザによって自動的に処理されるものです。
列の最後にある1つの単語は未亡人であり、新しい列の先頭にある場合は孤児です。 「寡婦」と「孤児」は悪く見え、読むのは難しいかもしれません。
Webブラウザに完全に表示されるようにテキスト行を表示することは、敏感な提案です。特に、レスポンシブウェブサイトを持ち、さまざまな画面サイズで異なるディスプレイを使用する場合は特にそうです。あなたの目標は、さまざまなサイズのサイトを見直して、可能な限り最良の外観を作成しようとすることです。特定のケースでは、コンテンツに窓、孤児、またはその他の理想的でない表示があることを承諾します。あなたの目標は、タイプのデザインのこれらの側面を最小限に抑えることであり、実際にはすべての画面サイズと表示に完璧さを達成することはできません。
タイポグラフィをチェックする手順
- タイプフェイスを慎重に選択して、タイプの解剖学的構造とそれがどのタイプのファミリーであるかを調べます。
- プレースホルダテキストを使用してデザインを作成する場合は、デザイン内に実際のテキストが表示されるまで、最終デザインを承認しないでください。
- ハイフンやダッシュなど、タイポグラフィの細部に注意してください。
- テキストの各ブロックを、それに単語がないかのように見てください。テキストはそのページ上でどのような形をしていますか？それらの形がページ全体のデザインを前方に運んでいることを確認してください。
