何百ものディスプレイが存在するこの時代では、Web デザイナーはさまざまなクライアントのブラウジング エクスペリエンスを考慮する必要があることがよくあります。
テキストのサイズはユーザー エクスペリエンスの重要な部分です。異なる解像度、異なるモニター サイズ、異なる DPI、さらには異なるブラウザー設定も、最終的に表示されるテキスト サイズに影響を与えます。現在、多くのブラウザーでページを簡単にズームできるようになりましたが、ユーザーにとって、ページをズームする方法を知らないユーザーが多いことは言うまでもなく、アクセスするたびにズームし直すのは常に面倒です。ユーザーの解像度に基づいて、より配慮したデフォルトのフォント サイズを提供することが最善です。では、このフォント サイズの適切なサイズはどれくらいでしょうか。
12px?15px?16px?
問題の根本は、画面上のすべてのフォント サイズ単位 (px、pt、em) が相対単位であり、それだけではテキストの実際のサイズを決定できないことです。さらに、人々のテキスト サイズに対する基本的な認識は、目の視点に依存します。これは、テキストの物理的なサイズだけでなく、人間の目からの距離にも依存します。
物理的なサイズ
まず、達成したい物理的なテキスト サイズを、たとえば 17 インチ 1280 * 1024 モニターで 16 ピクセルに設定すると、その高さは約 4.32 mm になると考えられます。ほとんどのモニターで Web テキストをこれに近づける予定です。サイズを選択した場合、さまざまな解像度で表示されるフォント サイズはどれくらいでしょうか?
ステップ 1: ユーザーのメイン解像度と対応する画面サイズを数えます。
物理サイズと解像度の間で変換するには、まず解像度と対応する画面サイズを数えます。ユーザー解像度の分布は、Web サイトの統計ログから取得できます。各解像度設定は異なるサイズの複数の画面に対応する可能性があり、画面サイズは Web ページから取得できないため、現在のモニター市場の統計分析を行う必要があります。特定の解像度について、可能な画面サイズの範囲を数え、最小から最大まで、比較的主流のサイズは何ですか (または、範囲の中間を主流のサイズとして使用します)。下の写真に示すように——
パソコンモニター市場（製品の種類が多く、見逃すことは避けられません。データは参考値です）
ステップ 2: 解像度ごとに主流の画面サイズの物理幅を計算する
現在のモニターのアスペクト比には、4:3 の標準画面や 16:10 のワイドスクリーンだけでなく、より不規則な比率も含まれており、異なるアスペクト比のモニターを比較するために、水平解像度が統計に使用されます。主流のサイズとアスペクト比（ピクセルの長さと幅が同じであると仮定）を使用して画面の幅（インチ）を計算し、それをメートル法（ミリメートル）に変換すると、それらを 1 対 1 に一致させることで確認できます。画面サイズの傾向。各解像度のユーザー分布と組み合わせると、結果は次の図のようになります（画像内の各点は解像度に対応し、横軸は画面の水平方向のピクセル数、縦軸は解像度に対応します）画面の物理的な幅、バブルのサイズは、この解像度の使用を示します。ユーザーの数は、青色のバブルは標準画面を示し、紫色はワイド スクリーンを示します。3 つの最大のバブルは、1024*768、1280*1024、および1280*800。
ステップ 3: さまざまなモニターでのフォント サイズを計算する
画面の物理的な幅をピクセル幅で割って、各ピクセルの幅を取得します。次に、この数値をテキストの指定された物理サイズで割って、さまざまな解像度で必要なフォント サイズを取得します。たとえば、4.32mm 四方のテキストを表示するには、各解像度で次のフォント サイズが必要です (ノートブックとデスクトップで個別に計算されます)。
さまざまな解像度で必要なフォント サイズ
ノートブックとデスクトップのサイズは大きく異なることがわかります。便宜上、各解像度での指定されたフォント サイズに必要なフォント サイズを計算するために、各解像度の主流サイズまたは平均サイズが使用されます。 (次の図は、基本的にノートブックでのみ使用される解像度を削除しています)、例として 4.32mm、3.77mm、および 3.25mm を取り上げています (17 インチ 1280*1024 解像度で 16、14、および 12 サイズのフォント)。
固定の物理サイズを維持するために、各主流ディスプレイで必要なフォント サイズと解像度の関係
一部の中国語フォントは、cleartype がオンになっていない場合、偶数以外の数値では適切に表示されないため、通常は 12、14、16、18、22px などの偶数を使用することをお勧めします。つまり、特定の解像度に最も近い偶数を選択します。たとえば、14px は 1100 未満の画面の水平解像度に使用され、16px は 1100 ～ 1500 の画面に使用され、18px は 1500 を超える画面に使用されます。
人間の目までの距離
ノートパソコンのフォントサイズはデスクトップパソコンに比べてかなり小さいですが、実際にはそれほど不便はありません。これは、一般にノートパソコンを使用する場合、デスクトップパソコンを使用する場合よりも人間の目と画面との距離が近いためです。ネットブックがますます小型化すると (極端な例は携帯電話)、視野角が大きくなるように、ネットブックを近づけて使用する場合があります。逆に、ディスプレイがますます大型化すると（24 インチ以上）、全体の視野角などを考慮して、人が画面から遠ざかり、視野角が狭くなる可能性があります。
定量的に言えば、人間の目と文字との距離d(30～60cm)に比べて文字サイズh(4～5mm)は非常に小さいため、視野角θはhに比例し、反比例すると近似的に考えることができます。 d に比例します (θ≈tgθ=h/d)。言い換えれば、同じサイズのテキストは、テキストから 2 フィート離れた場合には半分のサイズしか表示されません。
言い換えれば、モニターはおおよそのサイズしか伝えることができず、各ユーザーは特定の操作中に無意識に画面までの距離を調整することで、実際に見える効果を調整することになります。ラップトップ ユーザーの増加に直面して (前回の記事: ラップトップの市場シェアを参照してください)、フロントエンド デザイナーはラップトップとデスクトップの平均サイズに基づいてページ効果を提供することしかできず、それはユーザーが自分で調整することにかかっています。
JS を使用して、さまざまな解像度でフォント サイズを自動的に調整する
たとえば、Web ページの本文が配置されている div の ID は content—
注: 各ブラウザでテキストを確実に拡大縮小できるように、フォント サイズの単位には px ではなく em が使用されます。一般に、ブラウザのデフォルトは 1em=16px で、0.875em1em1.125em は 1416 です。 18ピクセル。
フォント サイズのスケーリングを使用する場合の注意点: div 内のタイトルなどのフォント サイズの単位には、テキストと同期してスケーリングできるように、固定フォント サイズではなくパーセンテージを使用することをお勧めします。
添付資料：本記事のグラフで引用した主なデータ
このサイトで最初に公開されました: http://www.mhzx1.com