Webページのフォントサイズと行の高さ

Question

可読性に関係するフォントサイズと行の高さにはどのような価値がありますか？

私自身は、Dive into Python 3で使用されているような巨大なフォントサイズとより大きな行の高さを好みます。他のすべてと同様に

Answer 1

世界で質問「最高何」、これに対する答えは「NO 『最高』をありません」され:-)

フォントサイズについては、間違いなく「最高」は何でもありますユーザーはデフォルトまたは最小のいずれかとして自分自身を選択しました。言い換えれば、本体のコピーのためだけにフォントサイズを残し、見出しのためにそれを増やしてください。あなたはかもしれません非常に小さい重要でないコンテンツの量によってそれを減らすことを検討してください。 16pxは一般的にブラウザのデフォルトです。

ラインハイトの場合、通常、フォントの縦と横の長さによって異なりますが、読みやすさの観点から、1.3と1.5の間の値を使用することをお勧めします。

Answer 2

"最高の"フォントサイズと行の高さはありません。

すべてはサイトの種類によって異なります。

メインのコンテンツとして記事を含む主にWEBサイトの場合は、フォントや行の高さを高くする方が良いかもしれません。

WEBアプリケーションの場合、フォントサイズが大きいと、コンパクトで機能的なインターフェイスを構築できなくなります。したがって、典型的なOSのフォントサイズに頼らざるを得なくなります。

すべてが異なります。

Answer 3

W3Cの推奨するところによれば、常に相対的なフォントサイズ（em）を使用します。

使用

h1 { 
    font-size: 2em; 
    line-height: 2.5em; 
} 

代わりの

h1 { font-size: 24px; line-height: 30px; } 

ユーザーは常にデフォルトのフォントサイズを上書きできるようにするため。

Answer 4

実際には、ウェブページの「段落可読性」に関する限り、最大のフォントサイズと行の高さがあります。上記の質問の目的は明確です。彼らは最高の音楽やドレッシングスタイルなど、さまざまな好みを許容するものは求めていませんでした。彼らはあなたの味や味のための最高のフォント色やフォントサイズ、あるいは老人のためのものではなく、具体的には最高のフォントサイズと行の高さを要求していました。目的。これは味の問題ではなく、光学の問題と機械的な読み方の問題です。タイポグラフィの知識も必要です。これを「あなたと私の好きなもの」に単純化すると、味と効率、色と健康の間に大きな混乱が生じます。

タイトルのフォントサイズは質問していませんが、画面上の段落については質問していないと思います。

既存のガイドラインに「推奨事項」と丁寧にラベルを付けるとしても、「ベスト」の検索の答えはまだほとんどありません。私が知っていることを分かち合う前に、あなたが貿易によるタイポグラフィデザイナーではない、あるいは少なくともフィールドで研究されていれば、上記の質問に答える資格はほとんどありません。そして、時には人々は、実現できなかった、実現可能な、存在しなかったことを彼らに示すために優れた専門家が必要です。時々人々はあなたが実際にそれを見せて、それを試して、彼らがそれを好きかどうか、あるいはそれが速く成長するかどうかを見てみるまで、何が感じられるか、「最高」に見えるかを確かにしません。間違った練習が実際に心地よく感じられるまで、小さなTimes New Romanでウェブページを読んだり読んだりするような、間違った、不健全な、または反生産的なプラクティスに慣れてしまうことがあります。彼らの快適ゾーンになります！それは、彼らにとって「最高」は、彼らが習慣的に選んだものであるということですか？明らかにそうではありません。必ずしもそうではない。そして時々問題はフォントサイズでさえありません！つまり、フォントサイズを増やすことを選択したユーザは、フォントサイズのためにそうしませんが、行の長さ（段落または列の幅）が長すぎるか、行の高さがきつすぎるか、またはパラグラフは全くありません（！）、それはテキストの壁だけです。段落と背景の色があまりにも似ているので、デザインの問題を補うためにフォントサイズを大きくします。適切に設計されたウェブページ上で同じフォントサイズ。

ここでは、段落のフォントサイズ、特にウェブでの読みやすさについて、最適または推奨範囲は12pxから16pxです。非従来のフォントを選択している場合、これは少し変わるかもしれませんが、ウェブサイトではお勧めできません。また、サイズをpx（ピクセル）で指定するとブラウザ間の表示の一貫性が高まるため、pxでのサイズの指定はpt（Microsoft Wordなどで使用される単位）よりも適しています。画面の場合はpx、印刷の場合はptです。

一般的なユーザーがブラウザの設定でデフォルトのフォントサイズを変更することを想定しているため、「ユーザーが選択したもの」の引数は無効です。そのような前提は非常に誤解を招くものであり、デフォルトのブラウザのフォント設定を変更することを決してしない典型的なインターネットユーザーや過半数の割合に関する実際のデータは間違いありません。

私はW3Cの推奨事項を尊重していますが、今日では、Ctrl +（+）を使用すると、サイズがpxで指定されていてもほとんどのブラウザが画面上のフォントのサイズを完全に増やすことができます元のサイズに戻ります。ほとんどの場合、情報を与えられたデザイナーは実際に段落、行の高さ、幅の列のフォントサイズを指定して、互いに補完して読みやすさを向上させます。したがって、認識されていないユーザーによって変更された、うまく設計されたページのフォントサイズを持つことは、特に長い段落の場合には、それを強化するのではなく、読みやすさを損なう可能性があります。アクセシビリティは重要であり、時には政府のウェブサイトによっては必要とされることもありますが、デザイナーがこれを考慮することができるので、ユーザーがフォントサイズを大きくすると列の幅が大きくなります。そのような場合は、pxの代わりにem単位を使用し、その範囲は0.75 em〜1 emです（ただし、基本フォントサイズが "body {font-size：62.5％;}"のCSS文でハックされていない限り範囲は1 em〜1.6 emです）。

段落の行の高さについては、推奨される絶対最小値は150％です。ほとんどの場合、175％を超える必要はありません。

また、ウェブの読みやすさのために、サンセリフフォント（Verdanaなど）はセリフフォント（「Times New Roman」など）より段落に強くお勧めします。印刷の場合、それは逆です。

Webで使用する2つの最も推奨されるフォントは、VerdanaとGeorgiaです。最良の結果を得るには、それらを対比させてください：段落の場合はVerdana、タイトルの場合はジョージアが最適です。

コンテンツの列幅も考慮する必要があります.195行から85行までの段落文字（13〜18語）を平均して1行に収める必要があります。行がそれよりも長い場合、ウェブの可読性は損なわれるか遅くなります。それよりも狭く、あなたの段落はぎこちなく見えます。

？いいえ、それを渡してください。それは少し読書を遅くします、従って速い読者のための可読性を妥協します（あなたは速い読者があなたのサイトを好きにしたい！）。英語のために左に揃えてください。

これらの推奨事項のすべての理由は、一般的なWebタイポグラフィブックで見つけることができ、ほとんどのタイポグラフィデザイナーが説明することができます。これらの推奨事項（または "ベストプラクティスガイドライン）には非常に良い理由があります。フォントが大きすぎる（または巨大な）場合、読みやすさは実際には向上しませんが、ほとんどの通常の読者にとっては損なわれます。あまりにも小さなフォント、同上。どうして？繰り返しますが、私が共有したキーワードでそれを調べることができます。

段落のウェブの可読性を要約すると、行の高さが150％-175％のVerdana（サンセリフ）、12-16px（ptではなく、アクセシビリティが非常に重要な場合は0.75em〜1em） 1行あたり75〜85文字（制御列の幅）。