こんにちは。ミツルです。
前回は背伸びしてスクリプトについての投稿をしましたが、
今回は勉強中であるcssの、基本中の基本であるフォントの単位についてです。
フォントの単位というと、印刷物ではポイント（pt）を使うのが通常ですが、
webデザインにはピクセル（px）とエム（em）が主に用いられます。
ピクセルは画像のサイズや印刷物の編集などでよく使うため、
なんとなく抵抗はないのですが、
emとは、、、？
なんの略？？？
ということで、ピクセルとエムについて、
勉強したことをまとめていきたいと思います。
■ピクセル（px）
印刷物のデザインでも使われる、馴染みのある単位ですね。
こちらは、PCやタブレット、スマートフォンなどの端末のディスプレイの色情報の最小単位で、絶対的な大きさをもつ単位です。
ただし、厳密には、webデザインに使われるピクセルには
「デバイスピクセル」と「cssピクセル」の２種類のものがあります。
・デバイスピクセル…端末のディスプレイに表示される最小の色の粒の単位（物理的な単位）。
・cssピクセル…ブラウザで表示させる擬似的な単位
cssピクセルに対するデバイスピクセルの大きさは、高精細のディスプレイになるほど小さくなり、
このデバイスピクセルとcssピクセルの比を「デバイスピクセル比」といいます。
例えば、
iPhone3Gのデバイスピクセル比は1、
つまりcssピクセル1×1の大きさ＝デバイスピクセル1×1の大きさ
であったのに対し、
iPhone6のデバイスピクセル比は2、
つまりcssピクセル1×1の領域にデバイスピクセル2×2個があてられるため、
そのぶん解像度が高くなっているのです。
(スマートフォン解像度・cssピクセル一覧http://s-ej.com/glossary/resolution.htmlより）
高精細・高解像度が端末の大きな売りとなっている今、このデバイスピクセル比を鑑みたcssを作成する必要があるということですね。
■エム（em）
cssにおいて、フォントサイズを相対的に設定する値です。
こちらは、基準となる1文字ぶんの大きさ（1em）に対して、1.5倍ならば1.5em、などという使われ方をします。
基準の大きさは、特に指定していない場合は16px=1emとなっています。
この相対値を使用すると、ブラウザの標準のフォントサイズを変更した場合には、
その標準サイズに応じてemで指定した値が変化します。
ちなみに、、、
冒頭で触れた、emの語源について。
cssで使われる単位だから、何かの頭文字あるいは単語の略だろうと思っていたのですが、、、、
違ってました。
この言葉はなんと活版印刷の時代から使われていた単位なのだそうです。
活字の一文字分の正方形の一辺の長さを、組版の長さの相対的な単位とし、
アルファベットの大文字のM（エム）の一辺の長さを1emと言っていたそうです。
詳しくは emとは-凶悪モナド-http://d.hatena.ne.jp/akumakario/20080130/1201712487
つまり、フォントの絶対的な基準を持つ単位がpx、相対的な基準を持つ単位がem
ということになります。
また、フォントのサイズと言いましたが、もちろん画像や領域のサイズの指定にもpxやemは使われます。
場面に応じて、考えて使い分けられるようにしたいと思います。
参考にしたサイトURL(ありがとうございました)
http://www.webword.jp/cssguide/color/index5.html
http://www.atmarkit.co.jp/ait/articles/1308/29/news004_2.html