読書体験を改善するための最高のフォント


13

私は、主な目的がコンテンツ(議会)の提供を目的とするWebサイトを構築しています。ユーザーに最高の読書体験を提供したいと考えています。以下のサンプルページをご覧ください。

http://iura.cl/cc/44

ご覧のとおり、私はすべてTelex Webfontを使用しています。まぶしさを軽減する夜間読書のオプションもあります。

http://iura.cl/cc/44?estilo=nocturno

遵守するガイドがあれば、読みやすくするために選択したフォントについて何を考慮する必要があるのでしょうか?


2
「どのフォントをお勧めしますか」という質問は広すぎて答えられません。また、フォントは確かに「読める」何かがあるかの主要な部分である一方で、他の変数(列幅、行間隔、色、ヒンティング、レイアウトなど)の過多もあることに注意してください
DA01

@ DA01おそらくお勧めのガイドがありますか?
ダン14年


1
質問は私にはいいようです-それは「どのフォントをお勧めしますか」ではなく、「ウェブサイトに読みやすいフォントを選択する方法」-基準の山です。
user56reinstatemonica8 14年

回答:


10

実際、もしあなたの一番の基準がウェブサイトの読みやすいフォントであるなら、いくつかの非常に単純な原則があります。

  1. 主流だと思う。おかげで、何千ものフォントから選択する@font-faceことができました -しかし、あまり人気のないフォントや新しいフォントは、ブラウザとオペレーティングシステムの間でレンダリングの問題が発生することがあります。場合は可読性があなたの優先事項である、とあなたはクロスブラウザ、クロスOSのテストを大量に行うにはしたくない、あなたはそれが安全で再生すると、信頼できる実証済みのフォントを使用することができます。以下のような古いWebセーフフォントVerdanaGeorgia安全な賭けている彼らはとても広く使用しているので、彼らはさらに稀ブラウザ/ OSのセットアップ中にテストされています。さらに、親しみやすさは読みやすさを向上させます。
  2. Xの高さが高く、幅が広い。読者の画面の品質やピクセル密度がわからないので、読みやすさを優先する場合は、文字の重要な際立った特徴を明確にしてください。VerdanaおよびなどのWeb可読性用に設計されたフォントGeorgiaは、文字の重要な詳細があるxの高さに可能な限り多くのピクセルを使用し、1つまたは2つのピクセルバンプで簡単に十分なアセンダーまたはディセンダーに最小限のピクセルを使用しますbからoまたはを伝えますp
  3. 明るすぎません。ライトタイプは、印刷または高ピクセル密度の画面で見栄えがよくなりますが、ios7まで画面でめったに使用されず、それでも物議を醸す理由があります:視聴者が安定した高品質の画面のように最適な状態で表示していない場合屋内照明、それは読みやすさのリスクがあります。しっかりした通常の重量を持つフォントを探しVerdanaGeorgiaください-私は言及しましたか?

そここれら以外の基準満たすフォントがたくさんあるVerdanaGeorgia、当然のは、これら二つのは時々ウェブの多くを理由アップまで2009かそこら@fontfaceが広く、彼らがしてた使用になったときのフォントゴーへのビット退屈と考えられています。

しかし、あなたは本当にそれらを間違えることはできません-それらはウェブ可読性のために設計されており、すべてのブラウザとオペレーティングシステムの組み合わせはそれらをうまく表示するためにテストされています。


編集:ウェブタイプの売り手とファウンダリー読みやすさをテストするのに苦労するとき、彼らは彼らのマーケティングでそれについて大声で叫ぶでしょう。たとえば、ウェブタイプの「Reading Edge」シリーズここでこれについて言及したChris Burtonへのヒント)。それでも、広くテストしてください。


1
私はデザイナーではないので、目にはいくつかの問題があります。私はいくつかの議会のテキストを読むのが好きですが、ブラジルのサイトは時々傷つくと思うので、あなたの提案(Verdana)を取り、1.5行の高さ、フォントサイズ16px、カラーブラックのStylishというプラグインを入れました。今ではとても快適です。
ファビオMontefuscolo

5

[OK]を私は先に行き、これについて私の考えを与えるつもりです。フォントの選択はさまざまな側面に依存するため、究極の「最適なフォント」は存在しません。可能性があるのは、「フォントを選択するための最良の方法」です。

したがって、プロジェクトに最適なフォントを選択するために考慮すべき事項。

メディア:フォントの表示方法、紙、キャンバス、オンライン、ポータブルデバイスなど。TimesNew Romanのブロックなど、表示されるメディアに適したフォントを選択していることを確認する必要があります。印刷されたドキュメントでは問題ないかもしれませんが、画面(特に小さな画面)では、Times New Romanのブロックは非常に読みにくい場合があります。また、Webフォントに制限されている場合に利用できるものを確認したい場合は、Googleフォントなどのリソースが役立ちます。 (Wikipediaから:「WebセーフフォントWebセーフフォントは、幅広いコンピューターシステムに存在する可能性が高いフォントであり、Webコンテンツの作成者がコンテンツを選択したフォントで表示する可能性を高めるために使用します。サイトに指定されたフォントがない場合、ブラウザは作成者が指定した代替フォントと汎用ファミリに基づいて同様の代替を選択しようとするか、訪問者のオペレーティングシステムで定義されたフォント置換を使用します。

対象者:誰がそれを読むかを考えてください。若い子供は、セリフベースのフォント、またはダブルストーリー「a」とは対照的に、シングルストーリー「a」がなくてもうまくいくかもしれません。しかし、結婚式の招待状と言われている場合、エドワード朝のスクリプトなどのフォントは、その文脈で非常に人気があります。セリフに直面するほど、装飾的であるほど良いです-一部の花嫁によれば;)コンテンツ全体ではなく、主にタイトルに使用されます。賢いO​​Lとして

コントラスト/色:繰り返しますが、これはあなたのプロジェクトの観点から考慮すべきことです。もちろん、ひどく高いコントラストの結果として人々を盲目にしたり、ひどく低いコントラストを持つものに目を細めてからしわを与えたりしたくない-その部分は明らかです。ただし、配色によっては、明るさとコントラストの設定をいじりたい場合があります。たとえば、GD.SEは完全に黒と完全に白ではないことに気づくでしょう(質問と回答はこちら)-それよりもコントラストが低いため、このウェブサイトを長期間比較するのは非常に簡単ですはるかに高いコントラストで何かを見るために-あなたの目が疲れるだろう!

重量:一般に、いくつかのより重いフォントよりも少し読みやすいように、より軽量なフォント10で、これはあなたが役に立つかもしれない読みやすさの他の側面とともにここでさらに議論されます。

数:メディア、対象者、コンテンツに応じて、複数のフォントを選択できます。このうち、用心することをお勧めします。コンテンツを混乱させたくないでしょう。フォントの重要なポイントは何かを伝えることです。あなたが探しているのは、それを最も効果的に行う方法です。フォントが多すぎると混乱する可能性がありますが、1つのフォントが退屈な場合もあります。一般に、太字/斜体とサイズの点で2つのフォントと混同することが起こりがちです。フォントのペアリングについては、ここでもう少し説明します

これらは、白紙の状態から進む場合に絞り込む必要がある側面の一部ですが、実際にそれがいつ来るかを考慮することはたくさんありますが、それほど悪くはありません。プロジェクトの初期段階で適切なフォントを選択することの価値は比較になりません!ここでフォントを選択する際に考慮すべき要素について詳しく説明します。

良い例えは、服を着るようなものだということです。ここで説明する簡単な概念です

私の答えのフォーマットが自然に落ちたので、あなたは最初にそれが誰であり、何を言っているのかを理解したい-そしてあなたはコミュニケーションの手段、どのフォント:)を理解したい、これはそうではないので豊富なリンクのないJenna-Answerについては、ここで詳しく説明します

私が提供したリンクを読むことを強くお勧めします。これらは非常に役立ち、プロジェクトに適切なフォントを選択するのに役立ちます。これは、読者のエクスペリエンスを向上させるものです。読みやすさだけでなく、フォントが貢献しているコンテキスト全体も、適切に読みやすいフォントがデザインから完全に奪われる可能性のある美学は言うまでもなく、より読みやすいがより適切なものが気付かないため、デザインと情報の最も顕著なもの。私の意見では、これを行うのに時間がかかることは非常に重要です。

私が助けて、とりあえず取り合っていないことを願っています、私は正しいフォントに少し情熱を持っています:)あなたのプロジェクトで幸運を。


2

Serifフォントは、読む時間が長いほど目にやさしい傾向があると思います。より良い読書体験のために、Adobe Garamondのようなセリフフォントがうまく機能すると思います。タイムズほど「ブラー」ではありません。セリフには興味深い曲線がいくつかあり、セリフフォントに関する限り、それをもう少し「純粋」にしています。

ここに画像の説明を入力してください

ここに私が同意する傾向がある主題の記事があります:

セリフ対サンズ:最後の戦い


1
サンセリフの顔がセリフの顔に多少なりとも読めるという決定的な証拠はありません。1つの例外は画面上にあり、低解像度のディスプレイではセリフの顔の詳細をレンダリングするのが難しくなる場合があります。
DA01 14年

1
Garamondはきれいかもしれませんが、ex-to-em比が低いため、ボディフォントとして使用すると読みやすさが損なわれます。元の高さがより寛大なSerifフォントには、Georgia、Bitstream Charter、Charis SILが含まれます。
ギャビンR.プットランド

@ GavinR.Putland ex / em比について詳しく教えてください。行間隔が小さすぎる=間違っている場合にのみ、読みやすさが損なわれる可能性があります。少なくとも140%の行間隔が推奨されます。
ミハイルV

@ DA01人々が「証拠」の議論に言及する傾向があることに気付きました。専門家として、私はGaramondに似たフォントが最も読みやすいと言うことができます。また、他のタイポグラフィの専門家にも同じことが言えます。これはあなたにとって「証拠」ではありませんか?
ミハイルV

@MikhailVそれは証拠ではありません。それは意見です。どのような証拠(最小となる)そこに出ている方に傾く傾向があり、「最も読みやすい顔の人が、最も身近な読書である直面している」
DA01

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.