px.em.pt、webで使用するフォントサイズ指定について

【font-sizeの指定をしていない、初期設定の文字サイズ】

16px = 1em = 100% = 12pt(win 1/96px) = 16pt(mac 1/72px)

px(ピクセル)
ピクセル単位の指定。
環境によって変化しない絶対単位。

em（エム）
文字の高さを基準にした単位。1emは1文字分。
環境によって大きさが変化する相対単位。

pt(ポイント）
インチ当たりの印刷技術で使用する単位。
winやmacでは1インチ当たりのピクセル数が違うため、webでは使い辛い単位。

web用フォント仕様の現在までの流れ

font-sizeで指定する場合、pxでもemでもどちらが正解という決まりはありません。
デザイナー側の意向で、全体のデザインのバランスから文字サイズを決定したい場合は、
pxが使いやすいです。改行までの文字数などを計算しやすいためです。
ただし、IEの古いバージョンではpxで指定したフォントのサイズを変更できないという制限があります。
ここがネックになり、emを使用しましょうか、という流れが主流だったのです。
現在のIEの最新バージョンでは変更ができるので、気にすることもないかもしれないですね。（まだ古いバージョンのIEを使っている人もいることは事実。頼む！頼むからバージョンアップしてください！古くて良いのはアンティーク品だけですよ）

webフォントに対する個人的見解

個人的な見解として、IE問題が徐々に解決に向かっていることを踏まえると、「px」指定で問題ないと考えます。
ただし、モニタのインチサイズのバリエーションが増え、高解像度のものも増えてきたので、「高解像度の小さいモニタ」でも見やすいようなフォントサイズを設定するべきなのは間違いないですね。
また、スマホやタブレットなどでも表示テストをしてみて、読みやすいかどうか確認することも大切だと思います。

[amazonjs asin=”4844333712″ locale=”JP” title=”デザインがグッと良くなる 定番フリーフォント1600セレクション (デジタルBOOK)”]