web-dev-qa-db-ja.com

最適なフォントサイズはありますか?

私が関わってきたほとんどのWebサイトプロジェクトでは、バルクテキストのフォントサイズは通常12px〜13pxですが、これが適切なサイズかどうか疑問に思っています。ウェブサイトのフォントサイズはもっと大きくなければならないという記事を読んだことを覚えています。

最適なフォントサイズはありますか?平均的なユーザーにとって、大きすぎる/小さすぎるものはいつですか?

小/中/大のフォントサイズの賛成/反対はありますか?

更新:
実際のテストでのユーザーの反応などを体験してみたいと思います。これは簡単です。これは大きすぎたり小さすぎたりしますが、ユーザーが専門家の意見

また、フォントサイズを変更する機能についても説明しますが、ここでは求められていません。私がもっと知りたいのは、ユーザーがフォントサイズを変更する方法ではなく、ユーザーがさまざまなフォントサイズにどのように反応するかです。

56
googletorp

これは広く議論されている主題です。これが説明されているのを見てきた最良の方法の1つは、プレゼンテーションからです 開発者向けの設計:フロントエンドの負担を軽減する Idan Gazit著。

これには次のスライドがありました。 alt text これは通常の画面では16pxのテキストであり、本では12ptのテキストです。メッセージは、12ptは本に最適ですが、通常は画面よりも読者の近くに置かれます。距離を考慮に入れると、画面の16ピクセルと本の12ピクセルはほぼ同じサイズに見えます。 12pt on paper = 16px on screen

あらゆる種類の例外があり、テキストは小さい方が望ましいです。ただし、長いテキストを読みやすくするために、16pxに同意します。

emのようなスケーラブルな単位をのような固定サイズの単位よりも変更することをお勧めしますptまたはpx。続きを読む: CSSフォントサイズ:em対px対pt対パーセント

34
user745

最適なフォントサイズなどはありません。 1つを探すことは、重要なことを忘れていることを意味します。テキストの読みやすさは、単にサイズの積ではありません。

私は過去5年間にUIデザイナーとして数十のWebサイトを構築してきましたが、それらはすべて異なるオーディエンスでした。私が見つけたものの1つは、サイズが最大の要因ではないということでした。これは、テキストの表示に関連するさまざまな側面の組み合わせです。

  • コントラスト
  • フォントファミリー
  • 行の高さ
  • ページ上の位置

これらを組み合わせると、全体的な読みやすさの大まかな指標になり、テキストの最も重要なデザインターゲットであることがわかりました。

テストからの逸話として(あなたが尋ねたので):私は、毎月70万回の訪問があり、主な対象者がコンピューターに精通していないユーザーであるコミュニティサイトで作業しました。ボディタイプには12px Verdanaを、タイトルには14px-16px Arialを使用しました。重要性の低いテキストの場合、グレーで11px Verdanaにドロップすることがあります。サイトでユーザビリティテストを実施したところ、テキストのサイズではなく、デザインの周囲の色がランプを見つめているような感じになったというフィードバックを受けました。これをサイトが明るすぎると解釈し、デザイン全体のコントラストを明るくしないように調整しました。これらの変更の一部とナビゲーション構造の変更により、訪問者あたりのページビュー数は月ごとに大幅に増加しました。

小さなフォントサイズについて覚えておくべきことの1つは、フォントサイズに目的があるということです。ただし、UIデザイナーとしての重要な点は、あなたの仕事はインターフェイスに(とりわけ)明快さと使いやすさを生み出すことであり、それによってde-emphasizingUIのいくつかの要素を使用すると、使いやすさが向上します。どの要素を縮小するか、およびテキストのどの側面を変更するかを決定するのはあなたです(上のリストから)。

20
Rahul

12pxはほとんどの人にとって問題なく動作するようです。 17pxにあると読みにくくなり、10px未満になると読みにくくなります。 12-13pxが良いガイドラインだと思います。

しかし、実際には、テキストサイズを1emなどに設定する必要があります。これは、一部のブラウザでは、ピクセル単位で設定されている場合、ユーザーがテキストのサイズを変更できないためです。テキストのサイズに関係なく、目が鋭い人は文字を小さくして読みやすくし、視力の悪い人は文字を大きくします。

ちょうど1emに設定し、人々とそのブラウザに残りの作業をさせてください。

ただし、レイアウトを管理しやすいかどうかを確認するには、さまざまなフォントサイズでページをテストすることをお勧めします。

9
Vincent McNabb

最近の科学的証拠によると:

  • 18点と22点は、客観的な読みやすさの大幅な向上につながります(アイトラッカーで測定)
  • 10点と12点は、理解力の大幅な低下につながります(理解力の質問で測定)
  • フォントサイズを大きくすると客観的な読みやすさが継続的に向上するため、大きいほど良いです。

私の言葉をそれに取ってはいけません。 科学論文 で詳細を読んでください。

7
Martin

最適なフォントサイズは個別であり、ユーザーのOS /ブラウザによって設定されます。つまり変更しないでくださいです。

フォント(見出しなど)を拡大する必要がある場合は、相対的に拡大します(たとえば、200%または2em)。

フォントサイズを縮小しないでください。また、読みやすさを維持するために、常に良いコントラストを維持してください。

5
George Pavelka

番号。
...pxではありません。

最適なサイズがある場合、適切なサイズを表すための適切な単位は、網膜上にあるangleです

Pxを表示している場合は、読みやすさを判断するために必要な3つの要素のうち1つだけを表示しています。1

ドットピッチ、または「解像度」(ピクセル/距離)の適切な定義は、pxから実際の距離に変換する方法です。

もちろん、同じ寸法の文字はどこでも同じように読むことができないため、必要な読み取り距離。

...そしてもちろん、読みやすさは次のようになります:

  • 高解像度
  • 高いドットピッチ(または低い解像度)
  • 読み取り距離が短い

1テキストの色、背景色、フォントなどもあります(白に黒の太字のテキストは、オレンジに黄色のイタリック体のテキストよりも小さいサイズが必要です)が、px、ドットピッチ、読み取り距離は、 dimensionのみに基づいた決定が必要です。

3
A.M.

フォントサイズを設定しないでください。 + Nを使用して「これをベースラインより大きくする」(または-Nを小さくする)ことを示すことができます。指定したサイズは、状況によっては正しくありません。ユーザーがサイトで修正アクションを実行する必要がない唯一の実行可能なオプションは、ブラウザーに決定させることです。

2
Monica Cellio

neverフォントサイズにピクセルを使用する必要があります。フルHD解像度をサポートする1​​2インチ画面で14pxフォントを読み取ろうとすると、1〜2 mmの高さの文字でテキストが表示されます(1時間もかかりません)。

2
JanC

12pxは問題ありませんが、重要なことは、ユーザーが自分でフォントサイズを大きくできることと、これが発生してもサイトが壊れないことです。

2
Ryan Shripat

このスレッドにはいくつかの奇妙な投稿と誤解があります。多くの人々は、科学と、私たちがテキストをどのように読んで理解するかについて十分に研究された側面を無視したいと考えているようです。たまたま、私はこのテーマについて新しい標準を研究している最中なので、ここに最新の技術を少し紹介します。

芸術の科学

既存の研究では、通常の視力を持つ人の最適な読み取り速度は、最大コントラストのフォントで、0.2°から2°の視角のx高さであると定義されています。 X-heightは、フォントの小文字のxの実際の垂直サイズです。もちろん、実際のフォントサイズは表示距離によって異なりますが、CSS参照ピクセルpx)は視覚的な角度に基づいています。 0.2°の視角は、最大の読み取り速度が得られるポイントであるため、クリティカルプリントサイズと呼ばれます。 (2°より上では、下に下がります。)

1ピクセルは0.0213度または1.278分の弧です。これは、距離28インチで96dpiのピクセル密度のデバイスに基づいています。したがって、デバイスメーカーは、参照pxを使用して、意図された/予想される視覚距離に基づいてサイズを設定できます。これはW3C CSS標準で議論されています。デバイスメーカーは、参照pxを使用して、目的の表示距離に基づいて実際のラスタライズサイズを設定します。 16pxは、必ずしも16デバイスピクセルとは限りません。ピクセル比が2:1のiPhoneでは、たとえば32デバイスピクセルになります。

したがって、Webの重要な印刷サイズは9.4pxのx高さです。特定のフォントデザインに応じて、これは17px〜20pxのフォントに関連します。これにより、18pxが必要な最小フォントサイズであることを示すアクセシビリティ標準が生まれました。

しかし、まだあります

重要なコントラストレベルもあります。上記のフォントサイズは最大コントラストに関連しています。しかし、コントラストが低い場合はどうでしょうか?多くのデザイナーは、コントラストの低い色を使用することで、サイトの読みやすさに深刻な影響を与えています。これの一部は、WCAG 2.0が空間周波数に対して正しいコントラストを指定できないことによるものです。太い太い見出しには4.5:1で十分ですが、4.5:1は小さい細い本文には不十分です

通常の視力では、重要なコントラストは、コントラスト感度関数のピークにある大きな脂肪のヘッドラインで10%まで低くなる可能性があります。しかし、小さな細いフォントの非常に高い空間周波数では、コントラストを20倍以上高くする必要があります。次の図を参照してください。すべてのテキストが同じCSS色で表示されています(これは、アンチエイリアスがすべての認識を超えてテキストのコントラストを変更する方法についても説明していません)。

contrast sensitivity curve sowing relation to text size

したがって、フォントサイズとコントラスト、およびその他の多くのデザイン機能が連動して、「最も読みやすい」テキストが提供されます。とにかく、このスレッドの多くのポスターが推奨している12pxのフォントサイズは驚くほど小さすぎます。その数字を思いついたのはだれかです。 12pxのようなものをおそらく著作権の通知に使用したり、だれにも読まれたくないものを使用したりできますが、12pxは決してコンテンツテキストの適切なサイズではありません。

グリフはそれを持っています

公式の推奨事項は、18pxの最小サイズですが、Verdana(Web使用のために設計されたフォント)などの一部のフォントは、16pxまで十分に機能する可能性があります。ただし、Times New Romanは、xの高さが非常に小さく、一般的に読みにくくなっているため、決して18px未満に設定しないでください(Microsoftに感謝、うーん)。 Microsoftがマングルした別のフォントについては、「Courier New」を使用しないようにしましょう。Microsoftは、一般的に読み取り可能な等幅フォントを採用し、薄すぎて軽量にしました。何を考えていたの?

アクセシビリティと読みやすさのためのフォントの選択に関するいくつかの一般的な考慮事項のために、私はこの予備のPDFを無料でダウンロードできる私の研究ゲートアカウントに持っています: https://www.researchgate。 net/publication/336679010_Evaluating_Fonts_Font_Family_Selection_for_Accessibility_Display_Readability

最も重要な閉会コメント

フォントサイズとして設定するよりも重要なのは、ユーザーがコンテンツを壊すことなく、テキストを希望のサイズに拡大できることです。現在の標準では、200%ズームを中断せずに指定していますが、それでは不十分です。 500%は、ユーザーの観点からははるかに妥当です。

検討:

20/20は平均的なビジョンです。上記のフォントサイズ(18px)は、この平均的な20/20ユーザーに基づいています。 20/40は同じ認識のためにそのサイズの2倍必要です。 20/200ユーザーは、そのサイズの10倍の時間が必要です(つまり、1000%ズームしたい場合があります)。ページのフォントが大きいこと、およびデバイスの物理的なサイズの影響を考慮しているため、最低でも500%とします。

不足しているテクノロジーで現在調査中のテクノロジーは、最小のフォントを拡大しますが、大きなフォントは縮小します。これにより、大きな見出しが大きくなりすぎて読みにくくなることはありません。

その間、あなたのサイトを読んでいる人々の大部分があなたと同じくらい良いモニターを持っていないし、あなたと同じくらい良い視力を持っていないと考えてください。サイトが幸運度の低いサイトでどのように表示されるかを知りたい場合は、安価でジャンキーな小型の低解像度モニター(ストレージに1つある可能性があります)を入手し、3〜4フィート離して(つまり、メートル離れて)。あなたのサイトを読むことができますか?今度はテキストをズームします—小さなモニターの制限のためにサイトが壊れますか?

これは、多くのユーザーが多くのサイトで抱えている問題です。 20/15のビジョンと美しい32インチの網膜ディスプレイがあるからといって、ユーザーがそのレベルの視覚的調節に近いとは限りません。

-アンディ

0
Myndex

私はエリックに同意します、読みやすさに関しては16ptが最高の標準のようです。詳細はこちら: http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/

0
Matt Rockwell