CSSフォントサイズ：em vs. px vs. pt vs. パーセント

クレジット: https://techtalk.virendrachandak.com/php-isset-vs-empty-vs-is_null/

CSSのスタイリングの中で最も混乱しがちな点の1つは、テキストスケーリングのためにfont-size属性を適用することです。CSSでは、Webブラウザに表示されるテキストのサイズを測定するための4つの異なる単位が提供されています。これらの4つの単位のうち、どれがウェブに最適なのか？ これは議論や批判が多く、答えを見つけるのが難しい質問です。

単位の紹介

「Ems」（em）： 「em」は、Webドキュメントメディアで使用されるスケーラブルな単位です。1emは現在のfont-sizeと等しくなります。例えば、ドキュメントのfont-sizeが12ptの場合、1emは12ptです。emはスケーラブルな性質を持っており、2emは24pt、.5emは6ptなどとなります。emはスケーラビリティとモバイルデバイスに適した性質から、Webドキュメントでの使用が増えています。

ピクセル（px）： ピクセルは画面メディアで使用される固定サイズの単位です（つまり、コンピュータ画面で表示されるもの）。1ピクセルはコンピュータ画面の1ドット（画面解像度の最小単位）に相当します。多くのWebデザイナーは、ブラウザにレンダリングされたサイトのピクセル完璧な表示を作成するためにピクセル単位を使用します。ピクセル単位の問題は、視覚障害のある読者やモバイルデバイスに合わせてスケーリングできないことです。

ポイント（pt）： ポイントは印刷メディア（紙に印刷するなど）で伝統的に使用されます。1ポイントは1インチの1/72です。ポイントはピクセルと同様に、固定サイズの単位であり、サイズ変更できません。

パーセント（%）： パーセント単位は、「em」単位と似ていますが、いくつかの基本的な違いがあります。まず、現在のfont-sizeは100%に等しいです（つまり、12pt = 100%）。パーセント単位を使用すると、テキストはモバイルデバイスやアクセシビリティに適してスケーラブルなまま維持されます。

それで、違いは何ですか？

これらのフォントサイズ単位の違いは、実際に動かしてみると簡単に理解できます。一般的に、1em = 12pt = 16px = 100%です。これらのフォントサイズを使用して、baseフォントサイズを（body CSSセレクターを使用して）100%から120%に増やすとどうなるか見てみましょう。

100%から120%に増加したときのフォントサイズ。

ご覧の通り、emとpercent単位はbaseフォントサイズが増えると大きくなりますが、ピクセルとポイントは変わりません。テキストの絶対的なサイズを設定するのは簡単ですが、どんなデバイスや機械でも表示できるスケーラブルなテキストを使う方が訪問者にはやさしいです。このため、emとpercent単位はWebドキュメントのテキストに好まれます。

Em vs. Percent

ポイント単位とピクセル単位がWebドキュメントに最適でないことがわかったので、em単位とpercent単位が残ります。理論的には、em単位とpercent単位は同じですが、実際にはいくつかの重要な違いがあります。

上記の例では、baseフォントサイズとしてpercent単位（bodyタグに設定）を使用しました。もし、baseフォントサイズをpercentからemに変更（例：body { font-size: 1em; }）した場合、違いはほとんど感じられないでしょう。では、bodyフォントサイズが「1em」で、クライアントがブラウザの「テキストサイズ」設定を変更した場合（これは一部のブラウザ、例えばInternet Explorerで利用可能です）どうなるか見てみましょう。

クライアントがブラウザでテキストサイズを変更したときのフォントサイズ。

クライアントのブラウザのテキストサイズが「中」設定の場合、emとpercentに違いはありません。しかし、設定を変更すると、違いはかなり大きくなります。「最小」の設定では、emはpercentよりもかなり小さく、逆に「最大」の設定では、emはpercentよりもかなり大きくなります。em単位が本来のスケーリングのように機能していると言う人もいるかもしれませんが、実際にはemテキストは急激にスケーリングし、最小のテキストは一部のクライアントマシンでほとんど読めなくなります。

結論
理論的には、em単位はWeb上でのフォントサイズの新しい標準ですが、実際にはpercent単位の方がより一貫したアクセス可能な表示を提供するようです。クライアントの設定が変更された場合、percentテキストは合理的なスケーリングで、デザイナーが可読性、アクセシビリティ、視覚的デザインを保つことができます。

勝者：パーセント（%）。

付録（2011年1月）
この投稿を書いてから数年が経ち、この間に行われた議論と討論をまとめたいと思います。一般的に、新しいデザインを作成する際には、body要素にパーセントを使用し（body { font-size: 62.5%; }）、その後、em単位を使用してサイズを決定します。bodyがパーセント単位で設定されていれば、その後、どのCSSルールやセレクターでもemまたはpercent単位を使用しても、パーセントを基準にしたフォントサイズの利点を維持できます。過去数年で、これはデザインの標準になっています。

ピクセルは現在、許容されるフォントサイズ単位と見なされており（ユーザーはブラウザの「ズーム」機能を使って小さなテキストを読むことができます）、ただし、非常に高密度のスクリーンを持つモバイルデバイスの影響でいくつかの問題が発生し始めています（AndroidやiPhoneの一部のデバイスでは1インチあたり200〜300ピクセルの解像度があり、11ピクセルや12ピクセルのフォントが非常に見づらくなっています！）。そのため、私は今後もWebドキュメントでの基準フォントサイズとしてパーセントを使用し続けます。常に議論と討論は奨励され、歓迎されます。過去2年間の素晴らしいコメントに感謝します！

クレジット: https://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/