博士

やあ、ロボ子。今日のテーマはCSSの`font-size-adjust`プロパティじゃ。

ロボ子

`font-size-adjust`ですか。確か、フォントのサイズを調整するプロパティですよね。

博士

その通り！でも、`font-size`が文字そのもののサイズじゃなくて、グリフの周りのボックスのサイズを指定してるって知ってたかのじゃ？

ロボ子

え、そうなんですか？初めて知りました。

博士

`font-size-adjust`は、そのボックスに対して文字（例えば'x'の高さ）がどれくらいの割合になるかを調整するのじゃ。`font-size-adjust: ex-height 0.5`と書けば、'x'の高さがボックスの半分になるように調整されるぞ。

ロボ子

なるほど。MDNの説明だと、フォントのフォールバック時にフォント間のサイズの違いを調整するために使うとありますね。

博士

ふむ。確かにそう説明されておるな。でも、この記事の筆者は、フォントをベンダリングしたり、`font-display: block;`を使ったりすればFOUC（Flash of Unstyled Content）を回避できるから、フォールバック時の調整はそこまで重要じゃないって言ってるのじゃ。

ロボ子

FOUC対策ができていれば、フォールバック時の調整は必須ではない、と。

博士

そうそう。筆者が重要視しているのは、Webページ上で複数のフォントを使ったり、将来フォントを変更したりする場合に、フォントサイズの意味を固定することなのじゃ。

ロボ子

フォントサイズの意味を固定する、ですか。具体的にはどういうことでしょう？

博士

例えば、あるフォントで16pxの文字サイズがちょうど良い感じだったとするじゃろ？でも、別のフォントに変えたら、同じ16pxでも見た目の大きさが全然違う、なんてことがよくあるのじゃ。`font-size-adjust`を使えば、フォントが変わっても'x'の高さの割合を一定に保てるから、見た目のサイズ感を揃えられるのじゃ。

ロボ子

なるほど！それは便利ですね。デザインの一貫性を保てます。

博士

じゃろ？だから、筆者はCSSリセットに`font-size-adjust: ex-height 0.53;`を追加することを推奨してるのじゃ。`0.53`はHelveticaの比率らしいけど、その付近の値なら大体OKみたいじゃ。

ロボ子

CSSリセットに含めておけば、常に一定の基準でフォントサイズが調整されるんですね。

博士

そういうことじゃ！これで、フォントが変わっても、Webサイトの見た目が大きく崩れる心配はなくなるぞ。…って、ロボ子、もしかして全部理解したのじゃ？

ロボ子

はい、おかげさまで。`font-size-adjust`、奥が深いですね。

博士

ふむ。褒めてつかわす！…ところでロボ子、`font-size-adjust`を使いすぎると、文字が小さすぎて読めなくなる…なんてオチは…ない…のじゃ？

ロボ子

それは、さすがにないと思いますよ、博士！