世界のタイポグラフィの動向

CSS機能の比較的限られたセットでさえ、カスケードスタイルシートを使用して実装できる多くのタイポグラフィ機能を提供します。 アンティークかグロテスクか？ 大きいまたは小さいフォントですか？ 先頭、エプロッシュ、フォントサイズ、あらゆる種類のインデント...リストは延々と続きます。



いくつかの一般的な解決策を強調し、テキストのデザインにおける既知の問題に対する答えを見つけるために、タイポグラフィが通常よりも重要である50の人気のあるサイトで広範な調査を実施しました。 人気のある新聞、雑誌、ブログ、およびその他のリソースは、何らかの方法で印刷会社に関連して、研究のために選ばれました。 類似点と相違点を求めて、タイポグラフィとスタイルシートを慎重に分析しました。 また、ウェブサイトのさまざまなパラメータが表示される比較テーブルを作成しました（たとえば、行送りと行の長さの関係）。



最終的に、タイポグラフィプロジェクトに関連する13の一般的な問題と質問を特定し、調査でそれらの答えを見つけようとしました。

1. 見出しと本文のセリフとサンセリフのフォントはどれくらい人気がありますか？
2. 最も頻繁に使用されるフォントは何ですか？
3. フォントの平均サイズは？
4. 見出しと本文のフォントサイズの平均比率はどのくらいですか？
5. 本文の平均主要価値はいくらですか？
6. メインテキストの主要な値とフォントサイズの平均的な関係は何ですか？
7. 行送りと行の長さの関係の平均値は？
8. 段落間の平均間隔はどのくらいですか？
9. 段落と先頭の間のインデント値の平均比はどのくらいですか？
10. リンクはスタイル的にどのように強調表示されますか？
11. 文字列で一般的に使用される文字数は？
12. リンクに下線が引かれる頻度は？
13. フォント置換（sIFRなど）はどのくらいの頻度で使用されますか？

調査の最後に、この記事のために評価して準備した大量のデータを収集しました。 統計に基づいて、セットを操作するためのいくつかの大まかな推奨事項を特定しました。 取得されたルールは、頻繁にではありますが、常にではありませんが、不変の法律として認識できることに注意してください。

するセリフ？

デザイナーは本文にセリフまたはサンセリフのフォントを使用する必要がありますか？ これは最も議論されているものの1つですが、まだ明確な答えの質問がありません。 一部の人々は、見出しにセリフ（おそらく文字の最後にあるような短い装飾的なタッチ）を使用することを好み、それらに大きな魅力を与えます。 見出しにアンティークを選択する主な理由は、フォントサイズが大きい場合、見出しが読みやすく、見栄えがよいことです。 さらに、見出しのアンティークと本文のグロテスクなコントラストが魅力的かもしれません。



また、デザイナーの間では、セリフを使用すると、まるで線に沿って一目でわかるように、本文を読みやすくするという意見もあります。 したがって、テキストの読み取りがより簡単で便利になります。







私たちの調査によれば、見出しでは、グロテスクはアンティクアよりも人気がありますが、前者は近年落ちているようです。

• 60％のサイトでは見出しのグロテスクを使用していますが、そのほとんどはArial、Verdana、Lucida Grande、Helveticaです。 その中には、 CNN 、 ArsTechnica 、 Slate 、 BBC 、 NewScientistがあります。
• メインテキストにantiquaを使用しているサイトはわずか34％です。 その中には、 New York Times 、 Typographica 、 Time 、 AIGA 、 Newsweekなどがあります。
• 見出しで最も人気のあるセリフフォントは、ジョージア（28％）とバスカービル（4％）です。
• 本文テキストで最も人気のあるセリフフォントは、ジョージア（32％）とタイムズニューローマン（4％）です。
• 見出しに最も人気のあるサンセリフフォントは、Arial（28％）、Helvetica（20％）、およびVerdana（8％）です。
• 本文で最も人気のあるサンセリフフォントは、Arial（28％）、Verdana（20％）、Lucida Grande（10％）です。

レビューしたサイトの3分の2は、本文にグロテスクを使用しています。 この主な理由は、明らかに、たとえばCufónなどのフォントを置き換える技術の人気が高まっているにもかかわらず、ほとんどのデザイナーが依然としてメインフォントを支配しているためです。 実際、ここでは、ジョージアとタイムズニューローマンという2つの選択肢しかありません。 さらに、Times New Roman（あなたの現代のウェブサイトのデザインは時代遅れになっているようです）の評判により、ジョージアだけが利用可能な唯一のフォントです。 同時に、グロテスクは、ウェブ上で使用するためのスタイルの比類のない選択を提供します。

どのスタイルが最も人気がありますか？

驚くべきことに、フォントを置き換える方法の人気が高まり、新しいプリインストールフォント（Windows VistaにインストールされているフォントやMacのフォントなど）の適合性が高まっているにもかかわらず、調査したリソースのほとんどは従来のWebベースのフォントを使用していました。 おそらく、Lucida Grande（Macにのみプリインストールされています）、Helvetica、およびBaskervilleを除きます。







予想どおり、今日、本文ではArial、Georgia、およびVerdanaが最もよく使用されています。 調査によると、サイトの約80％がこれら3つのフォントのいずれかを使用しています。 残りの20％で、ヘルベチカはお気に入りになりました。実際、ルシダグランデのように、デザイナーの間で人気のある選択肢です。



VerdanaとArialをバックアップとして使用することで、設計者はカスタムフォントを自由に使用して最高の効果を実現できます。 Nathan Fordの高度なカスケードテーブルテクノロジーの詳細については、 Better CSS Font StacksとBuild Style Better CSS Font Stacks by CodeStyleをご覧ください。





ジョン・タンは見出しにバスカービルの古美術品を、本文にはジョージアを使用しています。



Verdanaは、見出しに最も使用されません。 10のサイトのみがメインテキストの先頭として使用し、4つだけが見出しに使用しています。 これは、Verdanaが文字間にあまりにも多くのスペースを残しているため、大きなピンのテキストが空になってしまうためです。 タイトルに使用する場合は、おそらくレタースペースのCSSプロパティを使用してください。 ご覧のとおり、ジョージアとアリアルが最も人気のある見出しフォントです。



最後に、「代替」フォントは、本文よりも見出しに使用されていることに注意してください。 デザイナーは、メインテキストよりも見出しの方を試す準備ができているようです（ エディターから：テキストの見出しはメインブロックよりもはるかに少ないです ）。 したがって、次のプロジェクトに印刷上の変更を加える場合は、見出しが最も適切な場所になる可能性があります。

背景が明るいですか、暗いですか？

デザイナーが暗い背景で実験する準備ができているかどうか疑問に思いました。 驚いたことに、暗い配色を使用した印刷の向きを持つ単一のサイトを見つけることができませんでした。





New Yorkerは、見出しと本文にTimes New Romanを使用した明るいパレットを使用しています。



純白の背景が断然最も人気がありました。 ただし、プロジェクトの多くは、完全な白よりも純粋な黒の高コントラストを避けています。 多くの場合、テキストの色は純粋な黒よりも少し明るくなります（ 修正済み：たとえば、通常はテキストに＃272727を使用し、背景に完全に白を使用します ）。 デザイナーは明確さを明確に重視し、背景色を試すことを避けます。 白黒のコントラストは読みやすく、読みやすいため、最もよく使用されます。

中見出しのフォントサイズ

もちろん、ヘッダーのフォントサイズは、プロジェクトで使用されるフォントによって異なります。 何らかの方法で、私たちの調査では、最も人気のあるフォントサイズは18〜29ピクセルの範囲でしたが、ピークポップは18〜20ピクセルと24〜26ピクセルの範囲でした。







私たちの研究では、明確な勝者は明らかになりませんでした。 見出しの平均フォントサイズは25.6ピクセルです。 ただし、18〜29ピクセルのサイズが効果的です。 結局のところ、それはあなたの見出しがプロジェクト全体のデザインにどのように関係しているかに依存します。



それとは別に、見出しに48ピクセルの巨大なフォントサイズを使用するWilson Miner（Wilson Miner、下のスクリーンショット）を強調する価値があります。 彼のウェブサイトは特別なケースです。なぜなら彼の投稿の見出しは非常に短く、ほんの数語で構成されているからです。

本文テキストの中間フォントサイズ

約7年前、非常に小さく読みにくい要素がWebサイトのデザインに使用され、メインテキストがTahomaの8番目のポイントに入力された時間を覚えていますか？ 小さなフォントは忘れられ、大きなフォントの方向に目を向けているデザイナーが増えています。 私たちの調査に基づいて、フォントのサイズが12〜14ピクセルであるという明確な傾向を区別できます。 最も一般的なフォントサイズ（38％）は13ピクセルで、14番目のサイズは12番目のサイズよりもわずかに人気があります。 合計で、メインテキストの平均フォントサイズは13ピクセルです。







また、小さな活版印刷の詳細にますます注意が払われていることに注目しました。 特に、ダッシュ、引用符、脚注、著者の名前、紹介文などは非常に注意深く表示されます。





Typographicaは、記事の紹介テキストに大きなフォントを使用し、記事のテキストは通常​​のサイズです。

見出しと本文のフォントサイズの相関

見出しフォントのサイズとメインテキストの関係をよりよく理解するために、各サイトについて、メインテキストフォントの見出しフォントの比率を取得し、取得した値を平均しました。 したがって、 ヘッダーのフォントサイズとメインテキストのフォントサイズの比率が1.96であるという一般的なルールがあります 。 したがって、メインテキストのサイズを既に選択している場合は、値を2倍するだけでヘッダーテキストのサイズを取得できます。 もちろん、それはあなたのスタイルに依存します。 このルールでは、より良いピン対ヘッド比が確実に得られるわけではありません。 一方、標準値（6、7、8、9、10、11、12、14、16、18、21、24、36、48、60、72）を使用するか、フィボナッチ比（16- 24-40-64-104）を使用して、最も成功した活版印刷結果を取得します。

本文の最適なリーディング

行送り（または行の高さ）は、選択したフォントサイズとセットの形式に常に依存します。 したがって、ラインが長いほど、リーディングは大きくなります。 したがって、ここでは、主要な値の最も一般的なサイズをピクセル単位で指定しても意味がありません。 文字列の長さとフォントサイズに関連するemやパーセンテージなどの相対的な値を使用する方がはるかに便利です。



私たちの経験に基づいて、次の結論を導き出すことができます。

• 本文テキストのフォントサイズの比率は1.48です。
  
  値1.5は、典型的なタイポグラフィの本で通常推奨される値であることに注意してください。 1.5未満の値を使用するサイトはほとんどありません。 したがって、1.5からの距離に応じて、より高い値を使用するサイトの数が減少します。
• 行の長さと行送りの比率は27.8です
  
  ほとんどのサイトではメインテキストに12番目または13番目のピンが使用されているため、平均して、行の長さは538.64ピクセル（外側および内側のマージンはカウントしません）です。
• 段落間の距離とリーディングの比率は0.754です。
  
  この結果には驚きました。 段落間の距離（つまり、最初の段落の最後の行と2番目の段落の最初の行の間の距離）が行の高さに等しいことはめったにありません（理想的な垂直リズムの観点からは最適です）。 多くの場合、段落間の距離はリードの75％にすぎません。 これは、リードに線間要素の距離が含まれており、ほとんどのキャラクターに線間要素がないため、線の下に余分な距離が作成されるためです。

AIGAは最適なリードの優れた例です。 ここで、フォントサイズは13.21ピクセル（emからの変換）、先頭は19.833（emからの変換）です。 計算：19.8333÷13.2167 = 1.5011。



したがって、メインテキストのフォントサイズを決定するとすぐに、この数値に1.5を掛けると、最適なリード値が得られます。 さらに、新しく取得した値に別の27.8を掛けることにより、最適な文字列長が得られます。 あなたのテキストも呼吸させるためにパディングが必要になることを忘れないでください。





New Scientistは、段落間の距離を20ピクセルにしています。

1行に使用する文字数は？

従来のWebタイポグラフィルールに基づいて、1行あたり55〜75文字が理想的です。 驚くべきことに、私たちの調査は、ほとんどのサイトがより多くの価値を使用していることを示しています。 デザイナーが設定した標準フォントを使用して、文字列に何文字が収まるかを計算しました。 1つのサイトの最大平均結果は1行あたり88.74文字で、これは驚くべき量です。 もちろん、最高値は平均とは異なり、一般に75から85に変化します。しかし、この値でさえも最適値をはるかに超えています。







デザイナーの間で最も人気があるのは1行あたり73〜90文字ですが、 Monocle （1行あたり47文字）とBoxes and Arrows （1行あたり125文字）という異常な例も見つかりました。 各サイトで最も鮮明な画像を取得するには、多くの行の文字数の平均値を取得する必要があります。

追加

• 46％のサイトはメインテキスト内のリンクに下線を引いていますが、他のサイトでは優れたフォント色または太字でのみ強調表示されています。
• 何らかの方法でサイトの6％が見出しや本文に画像を使用しました（たとえば、 Monocle 、 New Yorker 、 Newsweek ）。
• サイトの96％は、テキストの幅を揃えていません。
• テキストサイトでは、左マージンは、領域の左境界から数えて平均11.7ピクセルに設定されます。

結論

得られたデータにより、ウェブデザインの募集ルールに関するいくつかの原則を強調することができます。 また、これらのデータは科学的に適切ではなく、ガイドとしてのみ使用できることにも注意してください。

1. メインテキストと見出しについては、セリフ付きフォントとセリフなしフォントを使用できますが、グロテスクは依然として、見出しとプレーンテキストの両方で人気があります。
2. 通常、見出しにはジョージア、Arial、またはHelveticaフォントが選択されます。
3. 本文では、通常、ジョージア、アリアル、ヴェルダナ、およびルシダグランデが選択されます。
4. 見出しの最も一般的なフォントサイズは18〜29ピクセルの範囲です。
5. ほとんどの場合、12番目から14番目のピンが本文に使用されます。
6. 先頭は、本文テキストのフォントサイズを1.48と呼びます。
7. 行の長さと行送りの比率は27.8です。
8. 段落間のインデントは、0.754として先頭を指します。
9. 1行あたり55〜75文字が最適ですが、実際には75〜85文字が最も一般的です。
10. 通常、メインテキストは左揃えで、画像で置き換えられることはほとんどありません。 リンクは通常、下線、色、または太字で強調表示されます。

もちろん、これらの規則は法律ではありません。 ただし、それらは、設計の基礎として置く基礎として役立つ可能性があります。 各サイトは一意であり、最大の結果を得るために任意の段階で何かを変更できます。 また、 比較データテーブルに精通し、独自のデータを使用してさらに調査することもできます。



（ 赤から。私のデビューの翻訳、見つかった不正確さを教えてください、私はできるだけ早くそれらを修正しようとします ）