フォントの種類でレイアウトを崩さないために：font-size-adjustプロパティ

最新特集【一覧】

EPUB生成ツール「ReVIEW」について達人出版会の高橋氏に聞いてみた

1つのソースでEPUBとPDFを生成できる「ReVIEW」を試す

Snow Leopard探索記 最終回：線路は続くよどこまでも

　表示に使用するフォントの種類が変わると、同じフォントサイズで表示していても文字の見た目の大きさが変わってしまう。デザインによっては全体のバランスや文字の可読性が変わり、ユーザビリティやアクセシビリティにも影響してくる。

　そこで、font-size-adjustプロパティを利用して、表示に使用するフォントが変わっても、文字の見た目の大きさが変わらないように設定してみよう。font-size-adjustプロパティには、これまでWindows版のFirefoxが対応していたが、Firefox 3ですべての環境のFirefoxで利用できるようになった。

フォントの見た目の大きさの違い

　次のサンプルは、同じ文章をウェブページで利用される主要なフォントで表示したものだ。フォントサイズはfont-sizeプロパティで16ピクセルに設定しているが、見た目の大きさはフォントの種類によってかなり異なることがわかる。

フォントの見た目の大きさの違い

※ブラウザで表示を確認する

　こうした事情から、制作者が想定したフォントと異なるフォントで表示されると、デザインのバランスが崩れてしまう。

　たとえば次のサンプルでは、font-familyプロパティを利用して表示に使用するフォントの第1候補を「Verdana」、第2候補を「Times New Roman」と指定している。すると、「Verdana」がインストールされてない環境では「Times New Roman」で表示され、文字が小さく、1行の横幅も短くなってしまう。

サンプル1

Verdanaで表示された場合（上）と、Times New Romanの場合（下）

div{
font-size: 16px;
font-family: Verdana, 'Times New Roman';
}

It is fine today. Never change your plans because of the weather.

※ブラウザで表示を確認する