CSSのfont-size-adjustプロパティは、font-sizeを小文字の高さで指定するプロパティです。font-siza-adjustプロパティを活用することで、Webサイトの文字を読みやすく改善できます。
本記事ではfont-size-adjustプロパティの重要性と、プロジェクトで利用する方法を解説します。
font-size-adjustの重要性
Webサイトは主に文字で構成されます。ユーザーに情報を伝えるために、タイポグラフィにこだわるのは当然のことです。適切な書体で快適に読めるWebサイトを作りましょう。使いたい書体を決めたら、次は適切なサイズを選びます。
Webサイトで使うすべてのfont-familyオプションのサイズは、font-sizeプロパティで設定します。このとき、フォントサイズはfont-familyの最初のオプションに指定したフォントを基準にして決めます。
ところが、最初のオプションがなんらかの理由で利用できない場合、ブラウザーはフォールバックとして指定されているフォントを用いて文字を描画します。ここで問題が発生します。
例として、以下のCSSルールを考えます。
body {
font-family: 'Lato', Verdana, sans-serif;
}「Lato」はブラウザーがGoogle Fontsからダウンロードするフォントです。このフォントが利用できない場合、ブラウザーは次のフォールバックフォントの「Verdana」を代用しますが、font-sizeはVerdanaではなくLato向けに設定した値になってしまうのです。
Webフォントのアスペクト値とは？
フォントの見た目の大きさと読みやすさはfont-sizeの値で大きく変わります。特にラテン文字などの大文字と小文字を区別する文字で顕著で、小文字と大文字の高さの比率がフォントの読みやすさを決める重要な要素です。この比率を一般的にフォントのアスペクト値（aspect value）と呼びます。
一度font-sizeの値を設定するとすべてのフォントファミリーに反映されます。しかし、フォールバックフォントのアスペクト値が最優先のフォントと大きく異なる場合、フォールバックフォントが読みにくくなる可能性があります。
font-size-adjustプロパティはすべてのフォントのx-heightに同じ値を設定できるため、結果として読みやすさが向上します。
font-size-adjustの値を適切に選ぶ
font-size-adjustプロパティの重要性が分かったので、次はこのプロパティをWebサイトで使う方法を説明します。font-size-adjustプロパティは以下の構文を持っています。
font-size-adjust: none | <number>font-size-adjustの初期値はnoneです。noneは各font-familyオプションのfont-size値を調整しないことを意味します。
font-size-adjustプロパティの値には数値も設定できます。設定した数値はWebページ上の全フォントのx-heightを同じ値にするために用いられます。x-heightは、設定した数値をfont-sizeでかけたもので、フォントを小さなサイズで表示したときの読みやすさが改善します。font-size-adjustプロパティの使用例です。
font-size: 20px;
font-size-adjust: 0.6;全フォントのx-heightが20px * 0.6 = 12pxになります。フォントサイズが変化しx-heightが12pxに保たれるのです。調整後のfont-sizeは以下の式で求められます。
c = ( a / a' ) s.cは調整後のfont-size、sは指定したfont-size値、aはfont-size-adjustプロパティによって指定したアスペクト値、a'は調整が必要なフォントのアスペクト値です。
font-size-adjustには負の値を設定できません。0を設定すると文字の高さが無くなり、事実上見えなくなります。Firefox 40などの古いブラウザーでは、font-size-adjustに0を設定しても、noneを設定しても同じです。
開発者はfont-size値を何通りか試して最適な値を求めます。つまり、全フォントのx-heightを最優先フォントのx-heightと合わせれば良いのです。最優先フォントのアスペクト値がfont-size-adjustプロパティの最適値です。
フォントのアスペクト値を知る方法
フォントの適切なアスペクト値を決めるには、最優先フォントの調整後のfont-sizeが指定したオリジナルのfont-sizeと同じで点を利用します。前述の式のaとa'を合わせます。
アスペクト値の計算は、2つの<span>要素を作り、1文字ずつ格納して、文字を枠線で囲みます（比較のため、両方の<span>要素で同じ文字を使います）。両方の要素は同じ値のfont-sizeプロパティを持ちますが、片方はfont-size-adjustプロパティも使用します。font-size-adjustの値がフォントのアスペクト値と同じなら、<span>要素の文字サイズも同じになります。
以下のデモでは、「t」と「b」の周囲を枠線で囲み、異なるfont-size-adjust値を適用しました。
以下がそのスニペットです。
.adjusted-a {
font-size-adjust: 0.4;
}
.adjusted-b {
font-size-adjust: 0.495;
}
.adjusted-c {
font-size-adjust: 0.6;
}以下のライブデモを見ると、font-size-adjust値が大きくなれば文字も大きくなり、値が小さくなれば文字も小さくなるとわかります。font-size-adjustがアスペクト値と同じなら、ペアは同じサイズになります（デモは対応ブラウザーで確認してください。対応ブラウザーは後述します）。
Webサイトでfont-size-adjustを使う
以下のデモでは、前のCodePenデモで求めた「Lato」フォント用のfont-size-adjust値を使い、フォールバックフォント「Verdana」のfont-sizeを調整しています。ボタンを押すことで調整をON、OFFできるので、違いを確認してください。
文字数がより多いほど効果は顕著になりますが、上の例でもプロパティの有用性を十分に示しています。
ブラウザーサポート
現在、font-size-adjustを標準サポートしているのはFirefoxだけです。Chromeはバージョン43、Operaはバージョン30以降で「Experimental Web Platform Features」フラグを有効にすることでサポートしています。フラグはchrome://flagsで有効にできます。EdgeとSafariはfont-size-adjustプロパティをサポートしていません。
font-size-adjustプロパティは、後方互換性を念頭に設計されているため、古いバージョンのブラウザーサポートを気にする必要はありません。プロパティをサポートしていないブラウザーは通常どおりに文字を表示し、サポートしているブラウザーはfont-size-adjustプロパティの値に基づいてfont-sizeを調整します。
最後に
font-size-adjustの働き、重要性、フォントのアスペクト値を求める方法を説明しました。
font-size-adjustには古いブラウザー用のグレイスフル・デグラデーションが備わっています。稼働中のWebサイトにも、font-size-adjustを使って文字の読みやすさを改善できます。
本記事はPanayotis Matsinopoulosが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。
（原文：Improve Web Typography with CSS Font Size Adjust）
［翻訳：薮田佳佑／編集：Livit］
