web-dev-qa-db-ja.com

13px ArialフォントがWeb標準なのはなぜですか?

Googleのアプリケーションのいずれかを使用している場合、検索からGmailまで、ほとんどの場合に使用される基本フォントは13px Arialです。

font-family: arial, sans-serif;
font-size: 13px;                       

16ピクセルのフォントの方が「質量」が読みやすいといつも思っていました。ただし、Googleはこれに同意しないようです。 Twitterのブートストラップ プロジェクトと 他の多くの人 も13pxフォントを使用しています。 this this siteのテキストも1pxだけ大きくなります。

Webブラウザーに問題はありますか?実証された標準フォントサイズは実際には16pxではなく13pxですか?モバイルデバイスについてはどうですか?

注:Serifフォント(ジョージア)は、Sans-Serif(Arial)よりも大きなサイズが必要です。しかし、ほとんどの人は、Sans-Serifの方がデジタル形式で目に優しく、Serifは印刷されたメディアで読みやすいことに同意しています。


編集:13pxを裏付ける調査またはユーザビリティテストはありますか?この傾向を裏付ける証拠は何ですか?このサイズの長所/短所または該当する状態の詳細はどこで確認できますか?

12
Xeoncross

まず、13px Arialは標準ではありません。 Arialが一般的に使用される理由は2つあります。

  1. 読みやすさに関してはそれはまともです(人々は反対する傾向があります このTypophileの議論のように
  2. これは、以下の同等のより広いスプレッドとして扱われることが多いプレーンなサンセリフフォントです。
    ヘルベチカ
  3. かなり古い(80年代前半)
  4. 90年代初頭からWindowsにパッケージ化されており、Mac OS X以降ではMacでも利用可能です(ただし、いつものように、レンダリングには違いがあります)。

13pxが異なるサイズよりも使用されているように見えるのはなぜですか?わからないただし、フォントのサイズが大きくても、読みやすさが向上するとは限りません。場合によっては、テキストの読みやすさを低下させることさえあります。

私たちが読んでいる間、眼球は衝動性の動きのおかげで動いており、固定のために25〜30ミリ秒ごとに停止します。固定は約200ミリ秒続きます。 1つの凝視で、私たちは無意識に知覚し、中心窩に見える兆候を処理することができます。中心窩は幅約1.5 cmです。中心窩にフィットし、非常に読みやすい標識の数の完璧な組み合わせを見つける必要があります。したがって、16pxが13pxよりも常に優れているとは限りません。

成人の場合、リーディングはトップダウンプロセスであるため、意味の意味は、2、3の文字、前の単語、および文の文法構成から導き出されます。

ええと...ハードなもの。

もちろん、誰もそのような分析を進めません。それはタイポグラフィを愛する認知心理学のオタクのみです;)。

それが何とかお役に立てば幸いです。

15
marcintreder

数年前、1998年や1999年のように、モニターを購入するときにピクセルサイズ(と呼ばれるドットピッチ)を確認していました。今日の標準(およびRetinaディスプレイは言うまでもありません)の時点では、ピクセルは非常に大きかったです。たとえば、モニターはVGAの種類で、水平方向に640ピクセルを備えていました。通常のサイズは14インチでした。現在、ノートブックの画面も約14インチですが、VGAの640の代わりに1280または1600ピクセルがほぼ同じサイズで表示されます。

これは、今日のピクセルがはるかに小さいことを意味します。 1280pxが640pxを見たのとほぼ同じ位置に表示されている場合、サイズは元のサイズの半分になります(辺の長さの半分、表面の半分)。 640×480のセリフフォントは見苦しいように見えました。モニターが小さなヒントを十分に詳細にレンダリングできなかったためです。アンチエイリアスは後で登場し、多くの助けとなりましたが、テキストはまだ見えませんsharp。したがって、私たちはすべてsans serifフォントを優先しました。

マイクロソフトは画面のフォントとしてVerdanaをリリースしました。他のフォントよりわずかに大きくレンダリングされ、幅に合わせてxサイズが大きくなり、非常に読みやすくなります。したがって、誰もがsans serifフォントに切り替え、IE default Times New Romanに設定されているページは古くなっているように見えました。一方、多くの@media print(DPIでの)プリンタの解像度がはるかに高いため、スタイルシートは依然としてTimesを指定し、現在もそうです。

IEは、ページレイアウトを壊さないように、Netscapeと同じデフォルトフォントを指定しました。 Mozillaは後で同じことをしました。そして、他のすべてのブラウザ。誰もが変更を加えるリスクを負うことはありません。今日ではほとんどすべての人がサイトのフォントファミリとサイズを設定しているため、問題ではありません。

IMOでは、歴史的な理由により、デフォルトで13pxを取得しています。

Arialを選択するのは賢い方法です。これをチェックしてください web fonts statistics :Arialはほとんどすべてのコンピューターにあります。 Windowsに付属していますが、Macにも付属していると思います。 Linuxには同等のフォントがあります。 Arialは、ユーザーへのトラブルを最小限に抑えてサービスを提供したい企業にとって確実なものです。

Webのフォントとフォントサイズのテストの時点で、私は The Human Factors Internationalニュースレター を読んで多くのことを学びました。彼らは、さまざまなフォントサイズと行の長さで可読性テストを実行しました。しかし、ミッコが正しく指摘したように、それは読書距離にも依存します。

7
Juan Lanus

証明された標準はありません。少なくとも現時点では、Web上のフォントサイズは、ほとんどの場合、実際の静的測定値とは相関していません。

たとえば、font-size:16pxは、以下に応じて実際の物理サイズが異なります。

  • エンドユーザーのコンピューターにインストールされている特定のフォントスタイル
  • ブラウザの解釈
  • ディスプレイのdpi

うまくいけば、実際の物理的な測定を使用して、デバイスとプラットフォーム全体である程度の一貫性を想定できるようになると、最終的にそれが変わることを願っています。

Googleが埋め込みフォントに13pxを採用した理由については、理論には以下が含まれる可能性がありますが、わかりません。

  • 彼らは、多くのデザイナーのように、16pxは単に大きすぎると感じています
  • 埋め込みフォントは、私が十分に理解していない理由により、同じ設定に比べて小さいサイズでレンダリングされる傾向がありますが、埋め込みフォントではありません。
2
DA01

これについての私の見方は、人々はfirst 12pxあたりで「標準化」され、それからある時点で「うーん、これは少しだけ大きくなるはずだ」と考えました。または、少なくともそれは私がやったことです。 :)

1
Rob Flaherty