私たちは毎日フォントをデザインし、使用しています。しかし、私たちは彼らの存在に真剣に注目したことはありませんでした。私たちはそれらをうまく使用したことがなく、さらには乱用したこともありません。これはすべて、私たちがそれらを理解していないからです。フォントはタイポグラフィーの重要な要素の 1 つであり、デザインにおいて最も奥深い主題の 1 つでもあります。この記事では、この深い知識について話し合いましょう。
フォントの種類
英語フォント（書体）は大きく分けていくつかあります。 英語フォントを使用する際に知っておくべき基礎知識です。
1. セリフ
Serif はストロークの端の装飾部分です。下の図で赤く囲った部分がセリフです。
セリフ デザインの本来の目的は、ストロークの端をより明確にマークし、認識率を向上させ、読み取り速度を向上させることです。また、セリフ体を使用するとよりオーソドックスな印象を与えます。したがって、一般的な英語の本の多く、特にエッセイや小説では、テキストを完成させるためにセリフ フォントが使用されます。
Web デザインで一般的に使用されるセリフには、Times New Roman や Georgia などがあります。下の図の左側は 12 ピクセルの Times New Roman フォント、右側は 12 ピクセルの Georgia フォントです。
中国語では、使用する Song フォントは対応するセリフ フォントです。
2. サンセリフ
フォントにセリフがない場合、そのフォントはノンセリフまたはサンセリフと呼ばれます。下の写真はサンセリフです。
Web デザインで一般的に使用されるサンセリフは比較的多くあります。 Arial、Verdana、Tahoma、Helivetica、Calibriなどがあります。下の写真は、左から右に Arial、Verdana、Tahoma を示しています。
セリフ フォントは書籍では広く使用されていますが、インターネットではほとんど使用されていないことに注意してください。パソコンの画面解像度は書籍と比べものにならないため、本文中の10～12pxのセリフフォントはパソコン画面では読みにくくなります。下の写真は、Cleartype を使用しない 10px Verdana と 10px Times New Roman の比較です。ご覧のとおり、左側の Verdana は簡単に識別できます。右側のタイムズ・ニュー・ローマンはかなり読みにくいです。
3. 等幅フォント
等幅フォントは、実際には欧文フォント専用です。英語の文字は幅が違うからです。たとえば、i は m よりもはるかに狭いです。プログラミング時にコードを表示します。文字の幅が均等でないと、レイアウトが見苦しくなります。 DOS コマンド ラインでは、固定幅フォントが使用されていることがわかります。
プログラミングに必要な固定幅フォントには、次の要件があります。
1.
すべての文字が同じ幅であること。
2. シンプルで明確な標準化された文字形状であること。
3. 128 を超える ASCII コードの拡張文字セットをサポートしていること。
(ASCII: 0×20) 他の文字と同じ幅。
5. 「1」、「l」、「i」などの 3 文字が識別しやすい。
6. 「0」、「o」、「」などの 3 文字。 O" は区別しやすいです。
7. 二重引用符と一重引用符の前後の部分は区別しやすく、鏡面対称であることが最適です。
8. 句読点、特に中括弧、丸括弧、角括弧は明確にします。
一般的な等幅フォントには、Courier と Courier New があります。
4. カリグラフィー
名前が示すように、カリグラフィーは手書き風のフォントです。カリグラフィーフォントと呼ばれることもあります。ほとんどの中国のカリグラフィー フォントは硬いです。個人的には毛筆フォントを使うのがオススメです。日本のカリグラフィーフォントは、より柔らかく、より人間味のあるものです。ただし、日本の毛筆フォントを使用する場合の欠点は、そのほとんどが繁体字中国語であり、多くの漢字が欠けていることです。
5. シンボル
Windows で最も有名なシンボル本体は Webdings です (Windows 95 の頃、よく使っていた記憶があります...)。 Webdings フォントのいくつかを次に示します。
フォント スタイル:
一般的なフォント スタイルは、標準、太字、斜体です。
簡単に言うと、太字はフォントがより暗く、より「太くなる」ことを意味します。斜体はテキストの軸をわずかに傾けることを意味します。これらは、スペース内のテキストの特定の段落を強調するために使用されます。
ボールドについて話すとき、CSS の font-weight プロパティを簡単に思い浮かべることができます。 font-weight 属性値には、通常使用する標準と太字に加えて、より太字、より軽い、100 ～ 900 などの属性があることがわかります。では、100 ～ 900 の値は何でしょうか? 実際、100 ～ 900 には単位がありません。優れたフォントは、異なるウェイトに対して異なるデザインを提供します。フォントにさまざまなレベルの太さのあらかじめ組み込まれたデザインがある場合、これらの値はそれぞれ各レベルに対応します。たとえば、Zurich フォントには、Zurich Light、Zurich Regular、Zurich Medium、Zurich Bold、Zurich Black、および Zurich UltraBlack の 6 つのフォントが含まれています。このように、チューリッヒ ライトは100、200、300の3つの値に対応し、チューリッヒ レギュラーは「普通」の400に対応し、チューリッヒ ミディアムは500に対応し、チューリッヒ ボールドは「太字」に対応し、は 600、700 に対応し、チューリッヒ ブラックは 800 に対応し、最後にチューリッヒ ウルトラブラックは 900 に対応します。
中国語の斜体は通常、インターネットでは使用されません。中国語は画数が多いため、斜体にすると読みにくくなります。
単位
Web デザインではいくつかの単位を使用します。
1. ポイント (pt、ポイント)
72 ポイント = 1 インチ、1 インチは 72 ポイントです。また、1 pica = 12 ポイント
2. ピクセル (pixel、px)
ピクセルとは、コンピューター画面上の最小の画像単位であり、平たく言えば、画面上の最小の点です。
3. DPI、PPI
DPI の正式名は Dots Per Inch、ドット/インチ、PPI の正式名は Pixel Per Inch です。これらは解像度の単位です。つまり、1インチの長さに何個の点（ピクセル）を並べることができるかということです。たとえば、一般的にモニターの解像度は約 72ppi で、これは 1 インチの長さに 72 個のドット (ピクセル) があることを意味します。 dpi/ppi が高いほど、解像度が高くなります。つまり、粒子が小さいほど、画像はより繊細になります。一般的に、写真の解像度は 240dpi ～ 300dpi ですが、なぜ写真は画面上で見るよりもはるかに精細に見えるのでしょうか。雑誌は 133 または 150 dpi で印刷され、高品質の書籍は 350 ～ 400 dpi で印刷されます。これは、美しく印刷された本のほとんどが 175 ～ 200 dpi で印刷されるためです。同じ物理サイズのテキストでも、画面で見るよりも本で見た方がはるかに鮮明なのはそのためです。サンセリフ フォントが英語の書籍印刷に大胆に使用できると前述したのはこのためです。
dpi と ppi には基本的に違いはありません。本当に違いを見つけたい場合は、唯一の違いは、dpi がスキャナーやプリンターを表すのによく使われるのに対し、ppi は画面の解像度を表すのによく使われるということかもしれません。
4. ex と x-height は
CSS でよく使用されます。 1ex = 小文字の高さ x。
5. em は
CSS でよく使用されます。もちろん、em は小文字 m の高さを表しません (実際、小文字 m の高さは一般に小文字 x の高さと同じです)。 1em = フォント サイズの 100%。複数のユニットです。
行間
1. 行間 (行の高さ、行間)
行間 (行の高さ、行間) については、まずベースラインという用語を学ぶ必要があります。私たちが初めて英語を学んだときに手紙を書くために使った方眼本を覚えていますか? 最も太い水平線がベースラインと呼ばれるものです。ベースラインは、ほとんどの文字が「配置される」フォントのディセンダーの上の線です。ほとんどのフォントでは、大文字は常にベースラインの近くまたはベースラインの上に配置されます。中国語のフォントは英語の大文字と同じです。下の図の赤い線がベースラインです。
次に、行間隔とは、2 つの隣接する行間のベースライン間の距離を指します。行間隔の単位は多くの場合 em であり、フォント サイズに従って定義されます。ブラウザには、デフォルトの行間隔に関するガイドラインはありません。 W3C の推奨事項によれば、デフォルトの行間隔は 1.0em から 1.2em の間である必要があります。実際、行間を設定するときは、行間の間隔を単語間の間隔より大きくする必要があるという原則があります。そうしないと、読者が読みにくくなります。十分な行間があればテキストの各行が区切られ、目で前の行と次の行を区別しやすくなります。近年、Web、特に中国語の Web サイト上のテキスト レイアウトでは、ほとんどの人が 1.5em の行間を好みます。つまり、12 ピクセルのフォント サイズが使用される場合、デザイナーは多くの場合 18 ピクセルの行間隔を好みます。 1.5emは確かに良い経験値です。実際、中国の論文の標準では行間隔は 1.5em です。
2. 文字間隔 (文字間隔、トラッキング)
文字間隔とは、文字のグループ間の距離を指します。単語の間隔は、行または段落内のテキストの密度に影響します。
3. カーニング
カーニングは、視覚的なニーズのために行われる技術プロセスです。簡単に言うと、特定の 2 つの文字が並んでいる場合、それらの文字に一意の単語間隔を個別に指定できます。たとえば、大文字の A の後に小文字の v が続く場合、2 つの文字間の間隔が視覚的に広くなります (実際には単語の間隔は同じです)。これは通常の文字間隔では解決できません。文字間の間隔を狭くすると、他の文字も一緒に流れます。このときはカーニング調整で対応する必要があります。以下の図は、カーニングを適用する例です。
段落
1. 行の長さ (測定)
行の長さは、テキストの段落の幅を指します。以下に示すように:
行の長さに関連して 2 つの読みやすさの問題があります。
行の長さが長くなるほど、必要な行間隔も大きくなります。行間が狭すぎると、読み手が途中で途切れやすくなります。行間が広すぎると、読み手は行を読んだときにテキストが途切れているように感じます。
本文は1行40～70字程度が適当です。
2. 配置 段落の
配置には基本的に 4 つのタイプがあります: 左揃え、右揃え、中央揃え、および両端揃えです。
左揃えとは、テキストの内容を設定し、テキストの水平方向の間隔を調整し、段落または記事内のテキストを水平方向に沿って左に揃える配置方法を指します。左揃えでは、記事の左側のテキストに端がきれいに表示されます。同時に、テキストの右側が不均一になります。したがって、英語での左揃えは、右側がボロボロになっているという意味で、ragged rightとも呼ばれます。右揃えの場合も同様です。
中央揃えとは、段落または記事内のテキストが水平方向に中央に向かって配置されるように、テキストの内容を設定し、テキストの水平方向の間隔を調整する配置方法を指します。中央揃えとは、記事の両側のテキストが中央にきれいに集まるようにするため、段落または記事全体がきれいになります。
配置とは、テキスト内容の両端を設定し、テキスト/単語の水平方向の間隔を調整することを意味します。ページの左端と右端に均等に配置されます。両端揃えを使用すると、両側のテキストの端がきれいになります。
両端揃えを使用すると、両端の整列線が非常に明確になり、テキストブロックの「速い」感覚も明らかになります。ただし、英語の組版では行の長さが非常に短い場合、整列を使用すると、一部の行間の間隔が長すぎたり、一部の行間の間隔が短すぎたりすることがあります。この不均等な単語の間隔は、ドレスのように非常に乱雑に感じられます。あちこちにパッチが付いています。
3. 可読性
可読性は、印刷されたテキストの読みやすさと快適さを表します。実は、これが通常のデザインの最も基本的な目的です。上記の原則に加えて、いくつかの小さな読みやすさの原則も集めましたので、皆さんと共有します。
デザイン内で使用するフォント サイズは最大 3 つまでです。
1 つのデザインで最大 3 つのフォントを使用します。
一定のコントラストを確保する必要がありますが、過剰なコントラストは避けてください。陽文字（白地に黒文字）は、陰文字（黒地に白文字）よりも読みやすいです。 #fff の背景では、#000 のテキストよりも #333 を使用したテキストの方が快適に見えます。
文字の背景に注目してください。背景はシンプルなものがよいでしょう。周囲の騒音を避けてください。
「少ないほど豊か」 最小限の要素を使用して、最大限の情報を伝えます。
リンクをリンクのように見せます。
スペースを有効活用しましょう。