web-dev-qa-db-ja.com

奇数のフォントサイズを偶数に丸めるのはなぜですか?

今日は、フォントサイズ17pxのコピーテキストを含むデザインの実装を開始しました。私の仲間のWeb開発者は、それを18px以上に丸める必要があると私に言った。彼はこれがテキストが良く見えるかもしれないからだと思った。

だから私の質問は:フォントサイズが偶数のテキストは奇数よりも見栄えが良いですか?または、CSSでさえも、設計で指定された奇数のフォントサイズを丸める理由は何ですか?

26
user131683

あなたの仲間の開発者は何とか正しいと思います。正直なところ、私が知っている限り、これには「決められた」ルールはないので、絶対的なものとして正しい人も間違っている人もいません。ただし、実装によっては、フォントを整数としてレンダリングするブラウザで終了する場合があります。これは最近の画面では大した問題ではありませんが、一部の古い画面では サブピクセルレンダリング が追加されるため、結果に一貫性がないように見える場合があります。下の画像でサブピクセルレンダリングがどのように機能するかをご覧ください

enter image description here

つまり、現時点では エッジケース について話しているのですが、今日ではほとんどの画面でサブピクセルレンダリングの処理に問題がなく、ほとんどの場合表示が一貫しています。

便利なケース

ただし、サイズが本当に役立つシナリオがあります。それは開発です。偶数を定義すると、remまたはemサイズに基づいて開発する方が簡単です。このように、基本サイズを定義してから、2rem, 1rem, .25 rem, .5emなどのサイズを使用できます。たとえば、16pxを基本サイズとして使用する場合、remまたはemを使用すると、16px: 1rem ; 8px: 0.5rem ; 4px: 0.25remなどのようになることを知っているので、簡単にスケーリングできます。

16pxを選択したのは、これがデフォルトであり、すべてのプロジェクトで 8pt vertical rhythm system をデフォルトとして使用しているためですが、もちろん任意のサイズを使用できます。

19
Devin

画面で一般的に使用されるSansフォントは、ほとんどの場合、ステムとバーの太さが同じになるように設計されています。
enter image description here

フォントサイズが非常に小さく、17pxのように奇妙な場合、フォントは、棒が幹の約2倍細いようにレンダリングされます。 enter image description here

このようなレンダリングは、フォントの実際の外観をよく表していません。そのため、推奨されるフォントサイズがあります。

6、8、9、10、11、12、14、16、18、24、30、36、48、60、72ピクセル

10
Pavlo Grubyi

これは、デザインやプログラミングやその他のことよりも、非常に心理的な視点(正確には数心理学)に基づいています。

偶数も、落ち着きと「気まずいことをしていない」という感じで、長い間さまざまなデバイスやプラットフォームで標準のフォントサイズとして採用されてきました(MS Wordでも定義済みのフォントが番号)。

奇数はある意味でこの注目を集め、「混沌とした」感覚を持っています。デザインしていてフォントが奇妙な場合、多くのデザイナーは最も近い偶数に切り上げます。

視差に関するUXデザイナーの研究 here からさらに読むことができます。

7
Wurah

偶数のサイズが奇数のサイズよりも「良く」見える理由はまったくありません。これらの数値がピクセルグリッド上で自然に整列するストロークの幅と位置の程度に対応する方法(醜いヒントまたはサブピクセルの配置が必要)は、完全にfont-dependentであり、最新のWebコンテキストではpxサイズは必ずしも物理的なピクセルではなく、過去のディスプレイ解像度に対応する単なる論理単位であり、デバイス依存でもあります。高解像度/「網膜」デバイスでは、極端に小さいサイズを除いて、通信はほとんど関係ありません。

ただし、incrementsであっても、特定のポイントを超えたさらに大きなものでも作業するのには十分な理由があります。 13pxと14px、またはさらに17pxと18pxは視覚的に区別することが難しくなり、同じコンテキストで両方を使用すると、何かが「オフ」であるという戸惑う感覚が生じます(おそらく、誰かがフォーマットの不一致でテキストをコピーして貼り付けたため、明確なサイズを意図的に使用しているのではなく、書式設定をクリア/修正しませんでした。