技術的背景
90年代半ば以降、Netscapeがテキストフォントを変更するためのタグを導入したとき（現在は廃止されています）、ウェブマスターはWebサイトでカスタムフォントを使用しようとしてある程度の成功を収めています。
<font size="5" color="black">Black text</font>
インターネットの歴史を通して、新しい技術の出現により、タイポグラフィ開発のいくつかの段階を区別することができます。 最初は、テキストではなく写真などの回避策が使用されていましたが、次第にFlashやCSS、Javascriptのソリューションに置き換わりました。
現在、Googleフォント（無料）やAdobe Typekit（サブスクリプションで利用可能）など、サイトでのカスタムフォントの実装を大幅に簡素化するさまざまなツールとテクノロジーが利用可能です。 さらに、Breezi、Squarespace、Moonfruitなどのオンラインデザイナーやエディターがいて、すべての作業を行い、コードを生成し、ターンキーソリューションを提供します。
何よりもフォントの読みやすさ
最初に注意する必要があるのは、選択したフォントの読みやすさです。 外観に応じてフォントを選択したくなるかもしれませんが、もちろん外観は重要ですが、サイトで素材を公開する主な理由を常に覚えておく必要があります。訪問者は公開した内容を読むことができます。
したがって、フォントが読みにくい場合、使用する意味はありません。 テキストを含む出版物の目的は、読者にメッセージを届けることです。 問題が発生した場合、メッセージは配信されません。 訪問者があなたの言いたいことを理解できないというリスクよりも、スタイリッシュではあるが読めないフォントを放棄する方が良いです。
メインコンテンツのタイポグラフィから始める
おそらく、ユーザーの注意を引くページの部分は、主要な資料のテキストです。 そこで、彼らはあなたの記事や他の何かを読むのに最も時間を費やします。それは単にそれがこのページで最も長いテキストだからです。
したがって、複雑な非標準フォントを使用しないことをお勧めします。 「Webに安全」なサンセリフならどんなものでもかまいません（詳細は以下を参照）。 本文は、まさに前の段落-可読性-が最も重要な場所です。
フォントのサイズも考慮する価値があります。 各フォントには異なる意味とサイズのバリエーションがあるため、各フォントに適したサイズがあるとは言えませんが、約14〜16のサイズで十分に機能します。
見出しフォント
見出しも大量のテキストの出発点になるため、重要です。 これは、人々がインターネット上のページを「スキャン」し、最初から最後まですべての行を読み取らないためです。
後述する内容を示す見出しとテキストの小さなブロックの両方が、タイポグラフィにそれほど多くの要件を課していないため、アクションの自由度が高くなります。 タイトルについては、より精巧で複雑なフォントを購入できます。
また、大きなフォントは読みやすく、大きなフォントを使用する場合はフォントを選択する自由度が高くなります。
また、カスタムフォントを使用する場合は、何らかの方法で見出しに正しいフォントを指定する必要があります。 たとえば、JavaScriptソリューションを使用してサイトにフォントを表示する場合（Google Fonts、Adobe Typekit、Cufonなど）、これによりサイトの読み込み速度が遅くなります。 また、レンダリングに必要なJavascriptフォントが多いほど、ページの速度が低下します。 これは、メインテキストでカスタムフォントを使用すべきではないもう1つの理由です。
既に述べたように、フォントの標準サイズはありませんが、必要に応じて、H1に32〜34サイズを試して、次のレベルの見出しにこのオプションを下げることができます。
また、見出しがプレーンテキストから目立つように、階層を強調する必要があることにも言及する価値があります。 これはさまざまな方法で実行できますが、最も単純で、最も使用され、推奨されるのは、通常のテキストよりも大きくすることです。 また、太字で強調表示したり、別の色で強調表示したり、背景や画像を追加したりすることもできます。
2つのフォントで十分です！
使用するフォントが多すぎると、サイトの一貫性が失われる危険があります。 そのようなサイトは、何かを説明するよりも混乱する可能性があります。 このスタイルには何らかの目的があるかもしれませんが、正しく実装できない場合は、単にこれを回避する方が良いでしょう。
もちろん、「ルールが破られるように考案された」ので、3つ以上のフォントを使用してみると、良い結果が得られます。 ただし、一般的には、ほとんどすべての目的に2つのフォントで十分です。
たとえば、1つのフォントを標準テキストに使用し、別のフォントを見出しまたはその他の選択した要素に使用できます。
フォントカテゴリ
ヘッドセットは、セリフ付き（Serif）とセリフなし（Sans serif）の2つの主要なカテゴリに分類できます。 セリフは、文字のストロークの終わりにある小さな要素です。
「スクリプト」、「ブラックレター」、「モノ」などの他のカテゴリもありますが、以前のカテゴリほど広く使用されていません。
Webセーフフォント
「Webで安全」とは、利用可能なアイテムを説明するために使用される用語、つまり、インターネットで使用するために「安全」です。 フォントだけでなく、この文脈では特に、ほとんどのコンピューター（PCおよびMac）にインストールされているフォントを指します。
ハッキング、置換方法、スクリプトなしでサイトで使用でき、すべてのコンピューター（少なくともインターネットに接続されているコンピューター）で正しく表示されます。
「安全な」フォントの短いリストを次に示します。
サンセリフ：
- ヘルベチカ
- Arial
- タホマ
- インパクト
- ルシダさん
- ヴェルダナ
- ジュネーブ
セリフ：
- タイムズニューロマン
- ジョージア
- ガラモンド
- パラティーノのライノタイプ
- ブックアンティクア
- 宅配便
- モナコ
その他の注意事項
フォントをカスタマイズするときに考慮する必要がある他のテキスト書式設定方法も利用できます。 読みやすく、デザインに最適な非常に優れたフォントを使用している場合でも、文字間隔や行の高さが設定されていないと、サイトの印象が損なわれる可能性があります。
これらの2つの特性により、テキストが読みやすくなります。 また、文字をより簡潔にするなど、特定の効果を実現するために使用することもできます。これにより、デザインを改善できます。 読み取り可能な限り、これは許容されます。
テキストを含むブロックの行の長さに関する注意：各行に45〜75文字を含めることをお勧めします（厳密な規則ではありませんが）。 行が短すぎると、テキストの読み取り速度が遅くなります。 行に含まれる文字が多すぎると、読んでいる行を失い、次の行に移動しやすくなります。
結論
上記のすべてのルールの中で、最も重要なのはテキストの読みやすさです。 記事全体で強調されているように、他の移植片はいずれも破壊不可能と見なされるべきではありません。 試してみるか、デザイナーや一般ユーザーにフィードバックを求めることができます。
ウェブサイトに適したタイポグラフィの選択の翻訳