Other

emとexについて

スタイルシートで使用する「em」や「ex」といった単位には、あまり馴染みがないかもしれません。もともと「em」はフォントの「M」（大文字のエム）の幅、「ex」はフォントの「x」（小文字のエックス）の高さでした。「em」と「ex」は、同じサイズでもフォントの「M」と「x」のデザインによって異なり、「em」は水平方向の長さ、「ex」は垂直方向の長さに使用されることが多く、通常はフォントに合わせた行間や余白などを指定するときに使う単位です。おそらく「M」は最も大きな幅の文字、「x」は小文字の標準的な高さを持つ文字と考えられて、採用されることになったのでしょう。

スタイルシートでは、「em」はフォントの高さ、すなわちフォントのサイズです。フォントサイズに10ptを指定すれば、1emは10ptになります。「M」のことは忘れました。

font-size: 10pt;
text-indent: 1em; /* 10pt */

ただし、行間（line-height）を1emにしても、上下の行はくっつくかないので、実際のフォントは指定したサイズよりも少し小さ目になっていると思います。

font-family: "Bookman Old Style";
font-size: 72pt;
line-height: 1em; /* 72pt; 100%と同じ */

スタイルシートでも「ex」は一応「xの高さ」ということになっていますが、どうも真面目に「x」の高さを測っているわけではないようです。おそらくフォントを制作するときに「xの高さ」みたいなプロパティがあって設定されているか、もしくは何か他の値から1exが計算されていると思います。

実際にブラウザに表示させて1exの長さと「x」の高さを測ってみると、ほとんどのフォントではだいたい合っていますが、中には1exが実際の「x」の高さとかけ離れているフォントもあります。

1exの長さがフォントによって変わるという点は、本来のかたちに似ているのかもしれませんが、スタイルシートの場合、「em」は信用できるけど、「ex」はあまりあてにならない。そんな気がします。

(2018/10/13 初稿)