CSS フォント サイズ: em と px、pt、パーセントの比較

CSS スタイル設定で最もわかりにくい点の 1 つは、アプリケーション内でテキストを展開するためのフォント サイズ プロパティです。 CSS では、4 つの異なる単位測定を使用して、Web ブラウザーでテキスト サイズを表示できます。これら 4 つのユニットのうち、Web に最も適しているのはどれですか? この質問は広範囲にわたる議論を引き起こしました。質問自体に答えるのが非常に難しいため、明確な答えを見つけるのは困難です。

これらの単位に問い合わせてください

1.「ems」（em）：「em」は、Webドキュメントのメディア表示に使用されるスケーラブルな単位です。たとえば、ドキュメントのフォント サイズが 12 pt の場合、1 em は 12 pt に相当します。 em は本質的にスケーラブルであるため、2 em は 24 pt に相当し、0.5 em は 6 pt に相当します。 EMS は、その拡張性とモバイル デバイスへの適応性により、Web ドキュメントでますます人気が高まっています。

2. ピクセル（px）：ピクセルは、画面メディア（つまり、コンピューター画面上で読み取られる）に使用される固定サイズの単位です。 1 ピクセルは、コンピュータ画面上の 1 点 (画面解像度の最小単位) に相当します。多くの Web デザイナーは、Web ドキュメントでピクセル単位を使用して、ブラウザーでレンダリングされる Web サイトのピクセル完璧なレンダリングを作成します。 Pixel ユニットの問題の 1 つは、視覚障害のある読者がモバイル デバイスに対応できるように拡張されていないことです。

3. ポイント（pt）：ポイントは通常、印刷媒体（紙などに印刷されたあらゆる媒体）で使用されます。 1 ポイントは 1/72 インチに相当します。ポイントはピクセルに似ており、固定サイズの単位であり、拡大縮小することはできません。

4. パーセント (%): パーセント単位は、いくつかの基本的な違いを除いて、「em」単位に似ています。まず、現在のフォント サイズは 100% です (例: 12 pt = 100%)。パーセント単位を使用すると、テキストは完全にスケーラブルなままであり、モバイル デバイスでもアクセスできます。

それでは、何が違うのでしょうか?

フォントサイズの単位の違いは、動的に観察すると理解しやすいです。一般的に、1 em = 12 pt = 16 px = 100% となります。これらのフォント サイズを使用する場合は、(CSS セレクターを使用して) 基本フォント サイズを 100% から 120% に増やして、何が起こるかを見てみましょう。

ご覧のとおり、基本フォントサイズが大きくなるとemとパーセントの単位は大きくなりますが、pxとptは変わりません。テキストの絶対サイズを設定するのは簡単ですが、訪問者にとっては、どのデバイスやマシンでも表示できるスケーラブルなテキストを使用する方がさらに簡単です。このため、Web ドキュメントのテキストには em 単位とパーセント単位が推奨されます。

Em とパーセントの比較

em とパーセントの単位は残して、必ずしも Web ドキュメントに最適であるとは限らないポイント単位とピクセル単位を定義します。理論的には、em 単位とパーセント単位は同じですが、実際には、考慮する必要がある微妙な違いがいくつかあります。

上記の例では、基本フォントサイズ（本文のマーカー）としてパーセント単位を使用しています。フォント サイズをパーセンテージから em に変更した場合 (つまり、body{font-size:1 em;})、おそらく違いには気付かないでしょう。本文のフォント サイズが「1 em」の場合、およびクライアントがブラウザの「テキスト サイズ」設定を変更した場合に何が起こるかを見てみましょう (これは Internet Explorer などの一部のブラウザで利用可能です)。

クライアントのブラウザの文字サイズが「中」に設定されている場合、emsとパーセントの違いはありません。ただし、設定を変更するとその差は大きくなります。 「最小」に設定すると、ems はパーセンテージよりも大幅に小さくなり、「最大」に設定すると、逆に ems がパーセンテージよりも大きく表示されます。実際のアプリケーションでは em ユニットが拡大していると言う人もいるかもしれませんが、一部のクライアント マシンでは em テキストのスケールが変わりすぎて、最小のテキストがあまり鮮明に表示されません。

結論

理論上は、em 単位がウェブ上の新しく登場するフォント サイズ標準ですが、実際にはパーセンテージ単位の方がユーザーに一貫性がありアクセスしやすい表示を提供するようです。クライアント設定が変更されると、パーセンテージ テキストが適切な比率で拡大されるため、デザイナーは読みやすさ、アクセシビリティ、視覚的なデザインを維持できます。