タイポグラフィは、あなたが行うあらゆるWebデザイン作業の基本的な要素です。 私たちがクライアントのためにウェブサイトをデザインするために雇われた理由は、彼らが彼らのユーザーに役立つコンテンツを提供する体験を提供できるようにするためです。 しっかりとした活版印刷の基盤を持つことは、ユーザーが効果的に消費できる方法でコンテンツを表示するのに役立ちます。 ウェブサイトには他にも多くのデザイン要素があるかもしれませんが、コンテンツが主な考慮事項であり、デザイナーとして、タイポグラフィの選択と使用によってプロジェクトを強化することが私たちの仕事です。

タイポグラフィの基本

フォントと書体

タイポグラフィの議論に入る前に、「フォント」と「書体」という用語を見ていきましょう。 書体とは、活版印刷の記号と文字のセットを指します。文字、数字、およびWebサイトに単語を配置できる文字です。 それはアルファベットのデザインであり、基本的にそのスタイルを構成する文字の形です。 Helveticaを指すときは、書体を指します。

フォントは、書体内の完全な文字セットとして定義され、特定のサイズとスタイルを指すことがよくあります。 Helvetica Bold 10ポイントは、フォントを参照する方法です。 フォントは、書体内のすべての文字とグリフを含むファイルに固有です。

この素晴らしい議論、「フォントと書体」は、仲間のデザイナーとの素晴らしい会話につながります。 スティックラーを入力するすべての人にとって、私たちは実際に書体について話しているのですが、会話では「Webフォント」が最もよく使用されます。

フォント分類

世界で利用可能な多くの書体に出くわすとき、それらがどのように分類されるかを理解する必要があります。 最も一般的な方法は、技術的なスタイル（セリフ、サンセリフ、スクリプト、表示など）で分類することです。書体は、プロポーショナルや等幅などの他の仕様によっても分類されます。 ソースによっては、非常に具体的になる場合があります。

ウェブセーフなタイポグラフィの歴史

Webの初期の頃は、非常に制限されていたWebセーフオプションに悩まされていました。 ユーザーが設計者が意図したフォントを表示するには、コンピューターで使用可能なフォントを用意する必要がありました。 古いサイトからスタイルシートを開くと、Arial、Georgia、Times New Roman、Trebuchet MS、および/またはVerdanaが見つかる可能性があります。 これらはユーザーのマシンにある可能性が最も高いフォントであり、ユーザーの大多数が意図したとおりにWebサイトを表示できるため、「Webセーフ」であると見なされました。

あなたがしばらくの間ウェブサイトをデザインしている、または長い間ウェブサーファーであるならば、あなたはおそらく限られたタイポグラフィオプションの時代を覚えているでしょう。 Webサーフィンをしているときに、同じ5つの書体を何度も見たのはそれほど昔のことではありません。 他のウェブセーフオプションがないと物事は退屈に見え始め、これらの書体はウェブに最適ではなかったと主張することができます（結局のところ、それらは印刷物に由来していました）。 しかし、Webが進化するにつれて、より多くのタイプオプションが利用可能になりました。

Webフォントとは何ですか？

タイポグラフィは非常に重要であるため、大きな進歩があったことを祝う時が来ました。 非常に多くの書体を自由に使用できるため、かつて制限されていたものと同じ古いWebセーフフォントに依存するのではなく、ユーザーに最適な書体を選択できるようになりました。
Webフォントは、Webセーフフォントのようにユーザーのシステムにプリインストールされていません。 マシン上で目的のフォントを使用しているユーザーに依存する必要はありません。 それらは含まれているソースからのものであるため、すべてのユーザーが定義されたフォントを見ることができます。 これらのフォントは、Webページのレンダリング中にブラウザによってダウンロードされ、テキストに適用されます。

Webフォントの使用方法

@font-faceルール

この広くサポートされているルールにより、サーバーからフォントをダウンロードしたり、フォントをホストしたりできるため、Webページで使用できます。 スタイルシートで@font-faceルールを宣言することにより、書体の名前、場所、およびフォントの太さを指定できます。

この例は、OpenSansRegularを追加する方法を示しています。 ソースは、Webサイトプロジェクトに含まれているフォントフォルダであることがわかります。

@font-face {
font-family: 'Open Sans Regular';
src: url("../fonts/OpenSans-Regular-webfont.eot");
font-weight: normal;
font-style: normal;
}

上記の宣言は、使用できるようにフォントを追加します。 実際にどのように表示させるのですか？

.example{
font-family: "Open Sans Regular", Arial, sans-serif;

}

フォントの名前が「OpenSansRegular」に設定されていることがわかります。 これは、CSSフォントスタックで参照されるフォント名であり、何らかの理由でフォントが読み込まれない場合に備えて、フォールバックフォントとともに使用されます。 ほとんどの場合、フォントは問題なく読み込まれますが、万が一の場合に備えて、フォールバックを含めることをお勧めします。

ほとんどのフォントには他のファミリがあり、一部のフォントには他のファミリよりも多く含まれていることに注意してください。 それらを利用するには、 @font-faceルールにそれぞれを含めるようにしてください。

フォーマットとWebフォント

必要なフォーマットが複数ある場合は、Webフォントについてもう少し詳しく見ていきましょう。 これらのフォントは自己ホスト型であり、サーバーの「フォント」というフォルダーに保存されます。 最後の例からいくつかの新しい行が追加されていることに気付くでしょう。

@font-face {
font-family: 'Open Sans Regular';
src: url("../fonts/OpenSans-Regular-webfont.eot");
src: url("../fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"),
url("../fonts/OpenSans-Regular-webfont.woff") format("woff"),
url("../fonts/OpenSans-Regular-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Regular-webfont.svg#open_sansregular") format("svg");
font-weight: normal;
font-style: normal;
}

.eot、.woff、.ttf、.truetype、SVGなどのさまざまな形式を含める必要があるのには理由があります。 さまざまなブラウザがさまざまなフォント形式をサポートしているため、ベースをカバーし、さまざまなブラウザが必要とする可能性のあるすべてのものを提供する必要があります。

ブラウザのリストと、ブラウザがサポートするフォントファイルの種類は次のとおりです。

• Internet Explorer – .eot
• Mozilla Firefox –.otfおよび.ttf
• SafariとOpera– .otf、.ttf、.svg
• Chrome –.ttfおよび.svg
• モバイルサファリ– .svg

フォントホスティング

Webフォントを使用する場合、デザインでレンダリングできるように、スタイルシートにはフォント自体が必要です。 このため、フォントファイルをどこかでホストする必要があります。 フォントを格納する場所には2つのオプションがあります。 フォントをホストするサービスを使用することも、実際のフォントファイルを使用してセルフホストすることもできます。 それは本当にプロジェクトに依存し、それぞれに独自の利点があります。

セルフホストであるか、Typekitなどのフォントサービスでホストしている場合でも、どちらのアプローチを採用するかによって、CSSの外観は異なります。 名前のように、キットはTypekitで作成されます。 これらには、使用するすべてのフォントが含まれています。 これらのファイルを参照するには、HTMLドキュメントの先頭にJavascriptスニペットを追加します。 これにより、正しい@font-faceルールをロードできます。

ホスティングサービスプロバイダー

言及するにはホスティングサービスプロバイダーが多すぎますが、TypeKit、Fonts.com、H＆Co（Hoefler and Company）はいくつかのオプションです。 基本的に、彼らは彼らのサーバー上にフォントを持っており、あなたはあなたが持っているアカウントの種類に基づいてそれらを自由に使うことができます。

このアプローチのいくつかの利点は次のとおりです。

• 一般的に、これらのプロバイダーはタイポグラフィビジネスを行っているため、高品質のフォントを幅広く選択できます。
• フォントは使いやすく、インストールも簡単です。
• デザインプロセス中に書体を変更したり、グローバルに変更したりするのは簡単です。
• これらはサードパーティのファイルであるため、ユーザーは簡単にキャッシュできます。
• HTTPリクエストが少ないほど、パフォーマンスが向上します

FontAwesomeを使い始めるべき理由

Font Awesomeは、スケーラブルなベクターアイコンを含む堅牢なアイコンセットです。 そして驚くべきことに、それは無料です（アイコンセットはかなり高価になる可能性があり、これはかなり甘い取引になります）。 多くの重要なものがあります...

新しいフォントをサイトに追加するのは非常に簡単です。 たとえば、Fonts.comは、プレミアムプランのメンバーシップで3つの異なる公開オプションを提供しています。 提供されるスタイルシートにリンクするjavascript（Typekitも含む）オプションと非javascriptオプションの両方、およびセルフホストオプションがあります。 選択した内容に応じて、CSSの外観は異なります。

使用上の考慮事項

ホストされているフォントを使用すると、少ないほうが多い場合があります。 使用しすぎないことが重要です。使用しすぎると、パフォーマンスの問題が発生する可能性があります。 同じフォントの複数のウェイトは追加のセットと見なされるため、基本的に別のフォントをロードしています。 必要なものだけを含めることをお勧めします。

セルフホスティング

Webフォントをセルフホストするのは非常に簡単です。 あなたがしなければならないのはあなたのウェブサーバーにフォントファイルを含めることだけです、そしてそれはユーザーがあなたのサイトに到着したときに自動的にダウンロードされます。

セルフホスティングの利点は次のとおりです。

• フォント配信にJavaScriptに依存することはなく、必要なのはCSS参照だけです。
• 高速フォントレンダリング。
• フォントホスティングプロバイダーの稼働時間に依存しません。
• 無料で購入したフォントを使用すると、サブスクリプション料金やページ表示の制限はありません。

使用上の考慮事項

必要なフォーマットがすべて揃っていることを確認することが重要です。 フォーマットが含まれていない場合は、次のフォールバックフォントに移動します。 ソースのフォントへの正しいパスがあることを確認することが重要です。 前の例で見たように、ソースは次のようになります。

src: url("../fonts/OpenSans-Regular-webfont.eot");

良いウェブフォントを見つける場所

選択できるWebフォントは非常にたくさんあります。 これらすべてのオプションがあることは非常に幸運です。 完璧なフォントを見つけるのはこれまで以上に簡単です。

Webフォントの優れたソースは次のとおりです。

• タイプキット
• Google Web Fonts
• Hoefler and Company
• Fonts.com
• FontSquirrel

独自のWebフォントを作成する

万が一、完璧なフォントが見つからない場合は、いつでも独自のフォントを作成できます。 Font Squirrelは、任意のフォントを埋め込み用のWebファイルのキットに変換するWebフォントジェネレーターを提供します。 これらをホストする必要があることを覚えておいてください。 詳細については、FontSquirrelWebフォントジェネレーターをご覧ください。 念のために言っておきますが、独自のフォントを作成するときは、そのフォントを使用する権利を持っていることが重要です。
Webフォントは、次のWebプロジェクトに最適なフォントを追加するための優れた方法です。 さまざまな書体オプションと豊富な優れたソースにより、従来のWebセーフオプションにとらわれることはなくなりました。 使いやすく、実験するのが楽しいWebフォントは、Webサイトプロジェクトに個性を加えるための優れた方法です。