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