チュートリアルでフォントを選択する際の謎の要素を排除します



正しく行われれば、タイポグラフィは非常に強力なツールになります。 ロバート・ブリングハーストの著作に目を向けてみましょう。ロバート・ブリングハーストの著書「The Elements of Typographic Style」は何十年もの間、専門家のための機知に富んだ参考書として役立っています。 クラフトの崇高な言葉遣いがあります。 Bringhurstによれば、タイポグラフィは「コンテンツを尊重するために存在し」、正しいタイポグラフィは「すべての要素、要素間のすべての関係、およびテキストのすべての論理的なニュアンスを示します。」



たぶん、これらの言葉は刺激的または恐ろしいようです。 しかし、明らかな事実は、タイポグラフィの正しい選択が常にプロジェクト自体の特定のニーズを反映していることです。 これらは美的ニーズだけでなく、技術的および機能的でもあります-ドロップダウンリストをAlegreyaからZapf Dingbatsまでスクロールすることで、テキストの断片から非常に異なるメッセージを作成できます。 一部のフォントは見出しでうまく機能し、他のフォントは段落で読みやすくなります。 一部のファミリは、国際的なアルファベットや特殊文字を収容できる十分な大きさです。 また、フォントがさまざまなスタイル（斜体や小さな大文字など）とスタイル（最高級のヘアラインからウルトラブラックまで）で提供されている場合は、プロジェクトのビルド時にデザインを微調整する機会が増えます。



もちろん、考えるべきことがありますが、最も重要な考慮事項のいくつかは、プロジェクトの実用的かつ機能的な機能です。 すでに知られているものから始めて、次のポイントを経て、あなたはあなたのニーズを満たすフォントを見つけるでしょう。

プロジェクトの規模から始めます

雑誌のように、数か月から数年続くプロジェクトを始めていますか？ それとも、一連のスライド、ロゴ、プレゼンテーションのような1回限りのプロジェクトですか？



ほとんどの場合、大規模な長期プロジェクト（たとえば、定期刊行物やニュースレター）では、最終的にはタイポグラフィを幅広いタスクに使用する必要があります。 これを行うには、さまざまなスタイル、スタイル、小さな大文字や合字などのオプションを含む、大きなフォントファミリを使用することをお勧めします。 1つのフォントにリンクすると、無関係なフォントを使用することなく、時間の経過とともに発生するさまざまな問題を解決するのに役立つため、大規模なファミリはブランド化を簡素化します。 これらのサンプルを試してください： Alegreya 、 Alegreya SC 、 Merriweather 、 Merriweather Sans 、 Roboto 、 Roboto Condensed 、 Work Sans 。



ただし、これが短期プロジェクト（ポスター、アルバムカバー、ロゴなど）であり、スタイルが追加されている場合は、フォントの圧縮および拡張バージョンを用意する必要はありません。 この特定のタスクに適している場合は、1つのスタイルのフォントを選択することもできます。 短期プロジェクトでテキストを微調整する際に、大家族の多用途性が依然として役に立つ場合があることに留意してください。 これらのサンプルを試してください： Bubblegum Sans 、 Graduate 、 Scope One 、 Space Mono 。

フォントは何を言うべきですか？

フォントオプションの数は、適切な普遍性のないフォントを除外するか、高度に特殊化されたフォントに焦点を当てることにより、プロジェクトのサイズによって制限できますが、適切な美的品質のフォントを決定するための明確で単純なルールはありません。 それはフォントの個性に依存しますが、ある程度の個性は認識に依存します。



多くのアプリケーションおよびWebサイトでは、依然として最も一般的なフォントの小さなセットが使用されています。これは、この方法がデジタルタイポグラフィで最も実用的だった時代の遺物です。 かつては最も安全なオプションはシステムフォントでした。これは、ほとんどのデバイスで常に使用可能であり、利用可能であるためです。 今日、これらの「主力製品」に妥協して制限する必要はありません。 Webフォントは一般にシステムフォントと同じくらい信頼性がありますが、より幅広い選択肢を提供します。 これらのサンプルを試してください： Proxima Nova、Helvetica、Museo、Futura、Brandon Grotesque （人気）; Arial、Times New Roman、Courier New、Helvetica、Times、Courier、Verdana、ジョージア （全身）; ギブソン 、 ゴッサム 、 クラシックグロテスク 、 モントセラト （ウェブフォント）



しかし、プロジェクトを類似の多数のフォントと区別するために、通常とは異なるフォントを見つけることにまだ興味がある場合は、固定料金または月額料金でプロプライエタリフォントを開発および販売する多数の企業があります。 完全にユニークなカスタムメイドのフォントが必要な場合、そしてそれを望まない人は誰でも、その開発は高価で時間のかかるプロセスになる可能性があるため、まずはメーカーの価格を調べてください。 一方、あなたが雇うアーティストは、ほぼ確実にこのガイドに記載されている多くの問題に対処します。 無料のオプションの中では、あまり一般的でないWebフォントをいつでも探すことができます。 原則として、最近登場したフォントはあまり一般的ではありません-少なくとも今のところは。 もちろん、 Google Fontsに無関心ではありません。 カタログを参照するだけで、無料のWebフォントの数がわかります。各ファミリーページには、インターネット上でどの程度使用されているか、どの国で人気があるかが表示されます。

テキストの大きさは？

「デザイナーは言葉の流れの入り口と出口を提供します」と批評家のエレン・ラプトンは書いています。「テキストを断片に分割し、データセットの最短経路と回避策を示します。」 選択されたフォントの個々の特性に加えて、適切に設計されたレイアウトは、視覚信号、規則性、および可変性を使用して、読者を自然に誘導します。 また、テキストのサイズに応じてフォントを選択すると、多くのシグナルとクイックアクセスオプションが提供され、読者がナビゲートしやすくなります。



見出しと小見出しについては、 表示、装飾、手書きのスタイルなど 、表現力豊かでユニークな、さらには独特のフォントを選択できます。 このような従来とは異なる、高コントラストのデザインは、このコンテキストではうまく機能します。詳細と視覚的な複雑さが注目を集めるのに役立つからです。 短いフラグメント、特に大きなサイズに（sans）セリフなしのフォントを使用する場合、この役割では通常のスタイルは少し不適切に見えます。 代わりに、太字および圧縮スタイルを使用することをお勧めします。 セリフフォント、非常に細いヘアラインセリフを好む場合、通常、 Playfair DisplayフォントとRufinaフォントは短い線でうまく機能します。これは、その高いコントラストが通常、読者の注意を引き付けるからです。



約3〜4段落の中程度の長さのテキストは、実際には非常に柔軟に設計されているため、多くのオプションがあります。 セリフフォントを好む場合は、 Quattrocentoなどの古いスタイル、 Libre Baskervilleのような過渡的なスタイル、またはArvoのような正方形のセリフフォントを選択できます。 サンセリフを好む？ その場合、最良の選択は、 キャビンやRalewayのような人文主義的またはグロテスクなスタイルの何かである可能性があり、 モントセラトのようないくつかの幾何学的スタイルでさえ非常にうまく機能します。 それらのいくつかをレイアウトで試してみて、レイアウトで最適なものを確認してください。



大量のテキストフラグメント（5段落以上）のフォントを選択する場合は、セリフフォントを使用することをお勧めします。 これは本のタイポグラフィの伝統的な選択ですが、画面上でもうまく機能します。 通常、 EB GaramondやLibre Baskervilleなどの古いスタイルのフォントや移行フォントは、ニュースや雑誌の記事などの大きなテキストを読む際に目に優しいです。 テキストの長いセクションにはサンセリフのヒューマニスティックフォントを使用できますが、読者がすぐに読むことができる使い慣れたセリフテキストに賭けた方が安全です。

サイズは何に影響しますか？

Webフォントを選択するとき、多くの場合、いくつかの考慮事項から始める必要があります。 テキストの長さはフォントの選択を決定するのに役立ちますが、そのサイズも重要です。 16ポイントまでの比較的小さいサイズの場合は、 Roboto 、 Montserrat 、 Ralewayなどのサンセリフオプションを試してください。 セリフのデザインと比較して、これらは通常、より大きな「x-height」を持ちます。これは、ベースレベルとミドルレベル間の距離として定義されます。 Sans serifフォントは通常、線のコントラストが比較的低く、線のデザインがより均一であるため、小さなスペースにパッケージ化する場合、縮小したスケールでより均一な「色」を提供します。





「読みやすい段落には、あいまいな形のフォントを使用しないでください」と、フォントデザイナーのOctavio Pardo氏は言います。 Comfortaa （上記）のような装飾フォントは長いテキストで読むのが難しいので、読みやすいフォントを選択します-AlegreyaやBellefairのような「 働き馬」



フォントの全体的な品質は、デザインに通常より多くの時間を必要とする文字、または単に優先順位のリストで低い文字によっても理解できます。 「文字「a」、「g」、数字の形を見てください」と、フォントデザイナーのOctavio Pardoが推奨します。 「これらのグリフは危険な設計オプションを示しています。」 彼らは大胆だが、うるさいはずです。 「v」、「w」、「x」、「y」、「z」、イタリックなどの低周波グリフで贅沢なデザインを購入する余裕があります。



中サイズのテキスト（字幕、引用、16〜24ポイントの小さな見出し）では、サンセリフフォントを幾何学的、グロテスク、または人文主義的なスタイルで使用することをお勧めします。 良い選択肢は、 モントセラト 、 ラト 、 クアトロチェントサンです。 テキストが一目で読みやすくなるには、太すぎたり細すぎたりする極端なスタイルは避けてください。 あまりにもブックのように見えない、よりモダンなフォントが必要な場合は、スラブフォントファミリArvo 、 Sanchez、 Slaboなど、コントラストの強い線のないものを探してください 。



24ポイントを超える大きなサイズで使用するフォントは、ディスプレイと呼ばれます。 「原則として、それらの注目すべき機能は大きなサイズで際立っており、小さなサイズではこれらの同じ機能は通常読みやすさを妨げます。 それにもかかわらず、タイポグラフィのほぼすべてのジャンルで、フォントが呼び起こす感情が適切であれば、大きなテキストが使用されます。 これは、 ロブスターやバークシャースワッシュなどのコントラストの高い線を持つ装飾フォントまたは手書きフォントに最適です。 適切なトーンが設定されている場合は、非常に幾何学的、レトロ、または汚れたフォントを試してください。 これらの機能は小さなテキストを読みやすくするために埋め込まれているため、大きな文字間ギャップ（Bやqのような文字のアウトライン内の白い領域）と大きなベースの高さを持つフォントは避けてください。 原則として、スケーリングするとき、それらは場違いに見えます。

あなたの聴衆は誰で、どの言語を話しますか？

アプリケーションまたはWebサイトは、世界中のユーザーがアクセスできることに注意してください。 1つの言語でコンテンツを表示する場合でも、多くの場合、ブラウザーの翻訳機能を使用して母国語で表示します。





「自動翻訳サービスにより、誰かがあなたのコンテンツを別の言語で見る可能性がほぼ100％増加します」と、近年より多くのヨーロッパ言語とキリル文字をサポートするためにMerriweatherフォント（上記を参照）を拡張したデザイナーEben Sorkin氏。 「言語ごとに特定のグリフを用意しておくと、ユーザーが喜ぶことができます」とSorkin氏は言います。 「オーディエンスがグローバルになればなるほど、それについて考えやすくなります。」



つまり、選択したフォントにラテンアルファベットの文字のみが含まれている場合、自動翻訳では、これらの文字のレイアウトを他のフォントに切り替えることで、タイポグラフィツールを使用できなくなります。 いわゆる身代金メモ効果は、個々の文字が他の文字よりも目立つときに表示されます。 他の言語の文字を含むフォントを選択すると、サイトのデザインがより多くのユーザーに対して同じままになります。 これは敗北主義者に聞こえるかもしれませんが、実際には、多くのフォントファミリが異なるスクリプトをサポートしています。





最大のスタイル数でフォントが変更されないようにすることが主な目的である場合は、 Notoフォントファミリ（上記参照）の使用を検討してください。



基本的なラテンフォントでも、特定のヨーロッパ言語で使用されている「拡張ラテン」のサポートがあるかどうかを確認するのは理にかなっています。 曲折アクセント記号（â）、鋭角記号（á）、ウムラウト記号（ä）、円記号（å）、光記号（ą）などの発音区別記号を確認してください。 他にも多数ありますが、拡張ラテンフォントを選択することにより、アクセント付き文字が誤ってアクセントなしの文字と交換されることはありません。



フォントファミリは、一貫性があり、さまざまなスタイルで調和しているように見えるはずです-これを実現するのは簡単ではありません。 2つ以上のスクリプトを調整するとき、デザイナーは異なるストーリーと書かれた伝統の間のバランスを見つける必要があります。 2つの異なるスクリプトを並べて使用する場合は、プレーンテキストのいくつかのオプション（これら2つのスクリプトがどのように適合するか）を確認してください。



Alegreya 、 Merriweather 、 Nunito 、 RobotoおよびQuattrocentoのようなWebフォントには、文字、スタイル、およびスタイルの大きなセットが含まれており、「スーパーファミリー」のカテゴリに変換されます。 これらの5つの「スーパーファミリー」は、キリル文字アルファベットもサポートするようになりました 。 注意点：ラテン語のように、一部のキリル文字はセルビア語やブルガリア語などの少数の言語でのみ使用されます。 これらの言語をサポートするには、フォントがキリル文字のサポートを拡張していることを確認してください。



他のWebフォントは、より多くの書記体系をサポートしています。 プロジェクトによっては、 アラビア語 、 ギリシャ語、またはユダヤ文字のサポートが重要になる場合があります。 ベンガル語 、 デバンガリ 語 、 グジャラート語 、 タミル 語などの多くのインドのスクリプトをサポートするWebフォント、およびタイ語のアルファベットのような東南アジアのスクリプトを見つけることができます。 Googleフォントでは、ドロップダウンメニューでオプションをフィルターできます。

表現力豊かな機能と比較して、フォントの機能をどのように評価しますか？

フォントファミリのスタイルの範囲は、機能性と芸術的表現（デザイン機能）の2つの部分に分かれています。 機能性とは、フォントの全体的な外観を変更するために利用できるスタイルの範囲を指します。 機能的なフォントは、斜体で太いスタイルまで薄くする必要があります。 これらのサンプルを試してください： Barlow 、 Poppins 、 Libre Franklin 。



芸術的表現（デザイン機能）のフォントは、カスタムメイドの特定のキャラクターです。 これらには、小さな大文字、文脈上の代替、およびさまざまな番号付けスタイルが含まれます。 特定のコンテキストでヘッダーとフッターを使用する場合は、小さなキャップが便利です。 テキストに洗練度を追加し、多様性を追加し、視覚的な階層感を作成できます。 これらのサンプルを試してください： Carrois Gothic SC 、 Cormorant SC 、 Patrick Hand SC



コンテキストスタイルオプションが「必要な」フォント要素と見なされることはめったにありませんが、いくつかの点で、プロジェクトに非常に望ましい可能性のある多様性を追加します（ Montserrat Alternatesを参照）。 イタリックまたは手書きフォントを使用する場合、フォントスタイルは、実際の手書き（ Caveat 、 Sriracha ）のように、多様性を追加することでテキストをより「自然」にします。 一方、セリフまたはサンセリフフォントの代替文字は、プレーンテキストから際立った違いの色合いを追加できます。





プロジェクトのニーズに応じて、選択したフォントの数字のスタイルを比較することを忘れないでください。 OldstyleとTabular（上記参照）の違いは、レイアウトとフォーマットの選択に影響します。 固定幅の数字（表）はテーブルでよく使用されますが、オールドスタイルの数字は段落で読みやすくなります。



多数の数字を使用する予定がある場合は、コンテキストに応じていくつかの異なるスタイルがあることに注意してください。 段落などのテキストブロックには、オールドスタイルの数字が優先されます。 よく見ると、いくつかの数値がベースラインの下に並んでおり、残りのテキストの向きがわかります。 これにより、長いテキスト行の数字の読みやすさが向上します。 等幅数字は垂直方向に中央揃えされ、幅は同じです。 これにより、テーブルでより正確で一貫性のある外観になります。 また、一部のフォントのみが正しい分数文字を含むことに注意してください。 同じことが、世界中の百を超える国の通貨記号にも当てはまります。 これらのサンプルを試してください： OpenType形式の Alegreya 、 Exo 、 Montserrat 、 Roboto 、 Spectral 、 Google Fonts 。

複数のフォントが使用されている場合はどうなりますか？

基本を学習したら、フォントのペアリングなど、より複雑なソリューションに安全に移行できます。 タイポグラフィの専門家でさえ、交配は非常に繊細で複雑になる可能性がありますが、それは避けなければならないという意味ではありません。 「無限の数の組み合わせがあり、適切なペアリングを見つけるのに時間がかかることがあります」と、昨年Google Fontsアップデートを率いたデザイナーYuen Chien氏は述べています。 さまざまな組み合わせをテストすることには喜びがあります。可能な限り多くのオプションを確認してください。最もうまく機能する組み合わせは驚くかもしれません。



一部のカップルは対照的にうまく機能し、他のカップルは似ています。 鋭い違いによりレイアウトがより動的になり、 スーパーファミリーの異なるスタイルを使用すると視覚的な整合性が追加されます。 見出しにユニークで活気のあるフォントを選択した場合は、本文テキストに柔らかくて馴染みのあるものを試してください。 クラシックバージョンは、見出し用のsans-serifフォントと本文テキスト用のserifフォントです。 これらのオプションを試してください： AlegreyaとAlegreya Sans （類似）、 Libre FranklinおよびLibre Baskerville （コントラスト）。



プロフェッショナル向けのヒント： Google Fontsディレクトリでファミリーページを表示する場合、人気のあるペアを試してカスタマイズできます。

まだ決まっていない？

短いリストを作成し、好きなフォントに慣れてください。 各オプションの文字とスタイルの完全なセットを参照します。 キリル文字またはタイ語での外観を確認してください。 デザイナーの伝記を見つけて、このフォントが過去にどのように使用されたかを確認してください。 まず、活版印刷のニーズや読者の要求を過小評価しないでください。 フォントがサポートするスタイル、文字、およびスクリプトが多いほど、準備が整います。



タイポグラフィは微妙な芸術ですが、彼らが言うほどわかりにくいものではありません。 プロジェクト、その範囲、対象者を整理することを考えているのであれば、タイポグラフィの観点から合理的な選択をする準備ができています。



数人のデザイナーがこのガイドを書いた経験を共有しました：ユアン・チェン、ジョアン・コレイア、デイブ・クロスランド、ナサナエル・ガマ、オクタビオ・パルド、エベン・ソーキン、エドゥアルド・タニー。