@kotarokに「ex単位とかうまく動く？」と聞かれたので、100倍してわかりやすくするテスト・ページを作成した。想定通りうまく動いてくれている。例えばSource Sans Proはx-heightが480とフォント・ファイルそのもので設定されており(FontForgeなどで確認することができる)、フォント・サイズが16pxとすると100exは16px * 480 / 1000 * 100となり768pxに理論上なることになるが、実際に(ほぼ)そうなっている。
Demo: Test ex Unit
基準はArialとした。赤いバーが左に出ているGeorgiaやCourier New、そしてSource系はArialよりx-heightが低いことになる。逆にVerdanaやImpactは右に出ているのでx-heightが高いことになる。同時にChrome 46やFirefox 42、Internet Explorer 11では既にex単位が正しい形で実装されていることもわかる。
このテスト・ページではli要素にインラインでフォントを指定しつつ青くし、幅を100exとすることでx-heightに応じて長さが変わるようになっている。そしてその下に赤でArialを指定した100exの長さのブロックを擬似要素で作成することでx-heightが低い場合に差がわかるようにしている。また上に赤でArialを指定したcalc(100% - 100ex)の長さのブロックを擬似要素で作ることで、x-heightが高い場合にも差がわかるようになっている。
赤青鉛筆欲しい。
ではなくて「ex単位とか何に使うんだ？」という点だ。
僕はline-height: calc(1.25em + 1ex)(要調整)などはなかなかいい使い道なんじゃないかなと考えている。x-heightにもよって(も)行間の最適値は変わるので、ex単位を使うことでよしなに調節されることが期待できるはずだ。
ウェブ・フォントが問答無用で使われるかどうかわからない時代になった(コンテント・ブロッカーなど)ため、特定のフォントを想定して行間を決定するのは危険になりつつあるとも考えられる。そうなるとこのような利用の仕方はこれから出てくるだろう。