px(ピクセル)とem(エム)の違いをゆる~く解説。どちらを使うべきか迷った時に。

フォントサイズの指定をする時「px(ピクセル)」「em(エム)」のどちらを使っていますか?
私は今まで適当に使っていました。

そもそも「px」「em」の違いがよく分かっていませんでした。
「em」に至っては、読み方も知りませんでした。「エム」って読むんですね。

ちなみにまったく同じスペルの、HTMLの強調タグ「em」は「イーエム」と読むそうです。
それでは「px」と「em」の違いをゆる~く解説します。

px(ピクセル)指定とは

px指定は使用している環境によって大きさが変化しない「絶対値」です。
絶対値なので、どんな環境でもサイズが均一にみえるという特徴があります。
要するに
「16pxって指定したら、ブラウザがなんであろうと16px!」なのです。

px指定は、デザインを絶対変化させたくない場合に使うことが多いようです。

px(ピクセル)指定を擬人化すると、たぶんこんな感じ

頑固あげポテトちりめん山椒味 53g

頑固一徹!サイズ職人「ピク太郎」
「ブラウザがスマホ・タブレットだぁ?そんなの俺には関係ねぇ!!俺が16pxっていったら16pxなんだよ!」的な。

em(エム)指定とは「相対値」

em指定はピクセルとは逆に「相対値」になります。
使用している環境によって大きさが変化します。
また相対値なので、元となるサイズが存在します。
親要素にサイズを指定しておくと、親要素にしたがって大きさが変化します。
親要素にサイズを指定していない場合は、ブラウザーの初期設定のサイズが基本となります。
要するに
「親分に合わせてサイズを変える・融通がきく」のです。

em(エム)指定を擬人化すると、たぶんこんな感じ

em指定の擬人化イメージ

サイズ株式会社の融通がきくサラリーマン「エム男くん」
「はいかしこまりました!社長(親要素・ブラウザ)の方針に従います!」的な。
または「女王様の言う通りです!!」的な。

結局どっちを使ったらいいの?

どちらを使えばいいのかというと、「em」指定を使うのがいまどきの主流らしいです。
ここ数年で、スマホやタブレットなどPC以外のアクセスが爆発的に増えたからではないかと思います。
相対値の「em」指定は、どの環境からも読みやすいですからね。

「px」指定は文章を読んでもらうページではなく、デザイン優先のページに向いているといえるでしょう。「px」指定はデザイン上、絶対変化させたくない部分に使うといいかもしれません。

まとめ

私は読んでもらいやすいページにしたいので、今後はなるべく「em」指定を使おうと思います。