ウェブデザインの新しいトレンド: ウェブフォントについて私が知っていることすべて

@陈子木 以前、ビジュアルデザイナーと一緒にWebアプリケーションを開発したことがあります。彼が提出してくれたデザインはとてもかっこよかったので、そのデザインに基づいて HTML と CSS を使用して Web アプリケーションを作成しました。全て終わったと思って急いで商品を見せたら、彼は何と言ったか分かりますか？

「あなたは全てを間違っています。」

確かに。私は彼のモデルに従ってフォントを使用しなかったので、彼は特にその点を指摘し、それは大きな間違いだと言いました。これをどう補えばいいでしょうか？

「分かりません。でも、間違いなく、それが今一番の問題です。」

そういえば、私はこれまで長い間、さまざまなウェブデザイナーと協力してさまざまなウェブサイトを開発してきましたが、その中で、フォントなど、ウェブデザインの多くの小さいながらも重要な細部に徐々に注意を払うようになりました。

ここで少し背景情報を簡単に紹介しておきます。現在、ほとんどのウェブサイトは HTML と CSS に基づいて開発されています。ウェブサイト開発の経験がない場合は、1 時間で優れたエクスペリエンスを備えた個人のウェブサイトページを作成する方法に関するチュートリアルなど、HTML と CSS の紹介ビデオを見つけて学習する必要があるかもしれません。

私のビジュアルデザイナーがフォントについて教えてくれたことは次のとおりです。

フォント仕様

特定のフォント スタイルを変更する最も簡単な方法は、CSS の font-family プロパティを変更することです。これにより、ブラウザーはユーザーのコンピューター上のフォントを直接読み取ります。これはすべての Web サイト開発者が理解していると思います。一般的に、ウェブサイトに適した一般的なフォントは 12 種類あります。比較的特殊な Comic Sans に加えて、ほとんどの種類のウェブサイトで自由に使用できるフォントが 11 種類あります。

これら 10 個程度のフォントだけに焦点を当てると、制限が多すぎます。十分に鋭敏であれば、フォントの太さ（細字、標準、太字）と単語間隔を意識的に調整して、より良い結果を得ることができます。たとえば、ナビゲーション バーで極太のフォントを使用し、フォント間隔を狭くすると、Web サイトがよりプロフェッショナルに見えます。逆に、極端に細いフォントを使用すると、Web ページは非常にシャープでクリアな印象を与えます。

フォントを使用するためのもう 1 つのコツは、CSS でフォ​​ントに font-shadow プロパティを追加することです。

次の例では、フォント ファミリは Helvetica に設定され、フォントの太さは Extra Light に設定されています。

このフォント例は、当社の Web アプリケーション Nomster からのものです。

フォントスタック

使用するフォントを指定するときに、重要度に基づいて順序を設定することができ、前のフォントが優先されます。デバイスに上位にランク付けされたフォントがない場合、システムは自動的に下位にランク付けされたフォントを呼び出します。そのため、Windows と Mac の組み込みフォントはまったく同じではありませんが、最終的には適切なフォントを呼び出して Web ページのコンテンツを正常に表示できます。このフォント スタックを設定するには、次のツール/Web サイトが役立ちます。

CSS Tricks – フォント スタック: これは 8 種類のフォントを含むフォント スタックです。このフォント スタックを CSS Tricks から直接取得すると、Web サイトのフォントが 1995 年以前の Web サイトのように不格好に見えなくなります。

CSSFontStack.com: さまざまなフォントスタックの提供に特化したウェブサイト。40 種類以上のフォントスタックから選択できます。

もちろん、Google や Baidu で検索すれば、さらに多くのフォント スタックが見つかるはずです。

以下のユースケースも、当社の Web アプリケーション Nomster からのものです。使用されているフォント スタックも、サイトの読みやすさを大幅に向上させるため、私たちのお気に入りです。

特定のフォントを読み込む

特定のフォントを使用して Web アプリケーションでテキストを表示することは非常に現実的です。 「似たような」フォントで妥協する必要はありません。お気に入りのフォントをそのまま使用するためのヒントをいくつかご紹介します。

フォントホスティングサービス

通常のフォントを Web サイトに読み込むには、多少のスキルが必要です。フォント ホスティング サービスでは、この処理を実行できますが、無料のものもあれば有料のものもあります。

Google Web Fonts: Google のフォント サービスは依然として非常に信頼性が高く、Web サイトに呼び出すことができる高品質の Web フォントを多数統合しています。 Google の公式の指示に従えば、Web アプリケーションでこれらのフォントを簡単に呼び出すことができます。

ウェブサイトで Garamond フォントを使いたい場合、フォントスタックを使って呼び出すと、ブラウザの違いでうまく動作しなかったり、ローカルフォントのせいで正しく表示されないことがあります。しかし、Google フォントの「EB Garamond」を使えば、そのような問題は発生しません。ローカルフォントライブラリを呼び出すことはなく、誰のパソコンでも全く同じ表示になります。

Google Fonts は無料で使いやすく、さまざまなブラウザやシステムで一貫したエクスペリエンスを提供します。では、なぜ他の選択肢を検討するのでしょうか? 理由は簡単です。 Google フォント プラットフォームに含まれるフォントのほとんどは比較的オープンであるか、直接オープンソースですが、キラー フォントの開発者の多くはそうすることを望んでいません。フォントを商品として販売すると、これらの開発者はより大きな利益を得るため、Google Fonts プラットフォームでフォントを見つけるのが難しくなります。もちろん、この問題は解決できます。

TypeKit: このフォントのウェブサイトもよく知られているウェブサイトです。高品質のフォントがたくさん含まれていますが、読んだ後に後悔すると思います。なぜそう言うのですか？これらの素晴らしいフォントは安くはありません！基本サービスは年間25ドル、プレミアムバージョンは年間100ドルかかります！もちろん、お金を気にする必要がなければ、TypeKitも良い選択です〜

なので、一緒に仕事をしているデザイナーには言わないほうがいいでしょう。そうしないと、フォント一式を買わされることになります！（突然、この記事の読者はデザイナーだろうと気づきました…）

では、上記の 3 つの解決策がすべての解決策なのでしょうか? 馬鹿げた話ではありません。もちろん、他にも解決策はあります。 Google Fonts は最も有名な無料フォントサービスプロバイダーですが、TypeKit は有料フォントサービスプロバイダーの中で最も人気があります。よく見ると、フォントホスティングサービスプロバイダーも選択肢がたくさんあります。

自己ホストフォント

これは比較的難しい解決策です。この方法の鍵となるのは技術的なことではなく、フォントのライセンスと関連する法的詳細について深く理解していることです。

ユーザーのマシンから直接フォントを呼び出す場合や、ホストされているフォントを使用する場合は、あまり考える必要はなく、数行の CSS コードですべての問題が解決されます。ただし、フォントを自分でホストする場合は、フォントを使用するための権限と対応する承認の詳細を理解する必要があります。

より高度な方法としては、コードを記述するときに、ブラウザにフォントをダウンロードするように指示し、フォント ファイル (またはフォント ファイルの複数のバージョン) が見つかる場所をブラウザに指示し、次にこれらのフォントの名前をブラウザに指示します。また、これらのフォントの種類にも注意する必要があります。一般的なフォント形式は、EOT、OTF、WOFF、TTF、SVG などです。ブラウザによって扱い方が異なるフォント形式が使用されている可能性があるため、ブラウザごとにダウンロードできる複数の異なるフォントを用意しておくのが最適です。

そのため、まずは用意したフォント ファイルをさまざまな形式のフォントに変換する必要があります。たとえば、.ttf 形式のフォントを用意した場合は、それを .woff、.otf、.svg などの形式のフォントに変換する必要があります。次に、ダウンロードしたファイルの場所を設定し、フォントの関連情報を呼び出すことができます。

ここがややこしいところです。世界中のすべての人にウェブサイトからフォントをダウンロードする機会を与えることを考えると、フォントをサーバーにアップロードした瞬間から、人々はそれを自分のコンピューターにダウンロードしたり、友人と共有したり、さらには自分のウェブサイトで使用したりできるようになります。このため、多くのフォント開発者は、自分のフォントがウェブサイトで簡単に使用されることを望んでいません。

したがって、Web サイトで使用するフォントをダウンロードする必要がある場合は、Web での使用がライセンスされていて無料のフォント (もちろんデスクトップでの使用は不可) を探す必要があります。

FontSquirrel: これは私のお気に入りの無料フォント サイトの 1 つです。ホームページには非常に高品質の無料フォントがいくつか掲載されており、各フォントのフォント ライセンスが明確に表示されています。

FountSquirrel のもう一つの素晴らしいツールは、WebFont ジェネレーターです。ジェネレーターに 1 つのフォント ファイルをアップロードすると、ジェネレーターはそれを必要な他のフォントに自動的に変換し、同時に対応する CSS コードを生成するので、Web サイトのコードに直接挿入できます。フォーマットが許す限り、WebFont は変換可能であり、フォントソースは指定されません。

FontSquirrel では、無料フォントの他に、有料フォントも多数販売しています。

以下は、Nomster で使用されている FontSquirrel のフォント「Pacifico」の例です。

MyFont.com も、いくつかのフォントを無料で提供するフォント サイトです (ただし、他のフォントは有料です)。このウェブサイトで欲しいフォントを検索すると、ほとんどが有料であることがわかりますが、一部のフォントファミリーや特定の太さのフォントは無料で提供されているので、慎重に選別してください。運が良ければ、本当に良いフォントを見つけることができます。

最後に、フォントについて知っておくべき 3 つのことがあります。

1. フォントによってウェブサイトの印象は大きく変わります。フォントの詳細を把握すれば、ウェブサイトの印象をコントロールすることができます。

2. Web アプリケーションにフォントを読み込む方法は多数あります。自分に合った方法を慎重に選択してください。

3. プロフェッショナルでクールなプレゼンテーション効果を生み出すことは確かに重要ですが、Web サイトの最終的な目的は、情報を伝達し、人々に読んでもらうことです。したがって、効果を調整した後は、一歩下がって、ユーザーが書いたテキストをすべて読めるかどうかを慎重に検討したほうがよいでしょう。

元のアドレス: thefirehoseproject

Ushe.com翻訳: @陈子木

この記事は元々 Youshe.com によって翻訳されたものです。著作権と翻訳者の著作物を尊重してください。転載の際は Youshe のリンクを添付してください。違反者は責任を問われます。ご協力いただいた編集者の皆様、ありがとうございました。

元のタイトル: Web デザインの新しいトレンド: Web フォントについて私が知っていることすべて

キーワード: