ホームページで文字サイズ指定をする単位について

今回のブログではホームページで文字サイズを指定する方法について書きます。

色の指定同様、文字サイズを指定する方法も様々あり、初めてコーディングに触れる人に「どれを覚えたらいいですか?」と言われます。自分で一から作る場合には、自分のルール内で使いやすい指定方法を利用してもかまわないのですが、修正や更新をするような場合にはすべての特徴を知っておくことが必要です。
ここに書き出す記述も一部ではあります。また、今後新たな単位も増えたり、流行が移り変わる可能性もありますが、主だったものを紹介します。

ピクセル px

サイト制作現場でも長い間使われている単位で、現在でもよくみかけます。指定した単位で必ず表示されるため、レイアウトがしっかりと決められた場所の中で、文字数の変更があまり内容な場所では大変使いやすい単位です。

ポイント pt

DTP(紙面)の文字サイズで使用していた単位です。サイト上では一般的に多く使われる単位ではないのですが、印刷させることを想定したページ(サイト)では使うこともあるようです。

単語による指定

文字色を指定する際に赤は「#ff0000」「rgb(0,255,255)」「red」の3種類指示方法があります。フォントサイズの単語指定は「x-small<small<medium<large<x-large」というような形で指定ができ、mediumを基本に1.2倍のサイズ変更があります。昔はこの指定方法も多くみかけましたが、文字数的にも単語で指定するよりは数値の方が短いことなどもあり、積極的に使われることはなくなってます。

パーセント %

基本サイズに対して、パーセントで文字サイズを決定することができます。基本となるbodyに15pxを指定し、bodyに囲まれた範囲内で文字サイズ200%と指定すると、200%の支持を記述した場所は30pxで表示されることとなります。

エム/イーエム em

一般的には見慣れない、聞きなれない単位かもしれませんが、コーディングでは比較的見ることの多い単位です。使い方はパーセント(%)とほぼ同じで「100%=1em」「150%=1.5em」というような使い方をします。使い方は一緒なら%で統一してほしいところですが、emという単位にはこれと似たような性質を持つ単位remがあります。

レム/アールイーエム rem

emとほぼ使い方は同じ、文字サイズの単位です。15px=100%=1em=1remは基本的に同じサイズになります。emとの違いは、emは相対値、remは絶対値として使用します。コーディングにおける相対値と絶対値の説明は、次回詳しく紹介します。