可変フォントのwght軸を本文で動かすときの注意点

可変フォントは1ファイルで複数の太さを持てるため、読み込み量の削減とデザインの自由度を同時に得られる。見出しでfont-weightをスクロールに合わせて変える演出も見かけるようになった。

一方、本文で太さを動かすと、見出しでは起きなかった問題が出てくる。特集「可変フォントは何を可変にしたのか」の取材で確認した点をまとめる。

太さを変えると行の長さが変わる

多くの可変フォントは、太くなるほど字幅も広がる。本文の太さをホバーやスクロールで変えると、行の折り返し位置が変わり、テキスト全体がずれて見える。読んでいる途中の行が動くのは、読者にとって最も避けたい体験だ。

本文で太さを変えたいなら、字幅が変わらない“等幅ウェイト”設計の書体を選ぶか、変化を段落の外側（引用やキャプション）に限定する。

ダークモードでは細く補正する

黒地に白い文字は、同じ太さでも白地より太く見える。光のにじみによる錯視で、特に高解像度でない画面で目立つ。可変フォントなら、ダークモード時だけ太さを20〜30ほど下げる補正が簡単にできる。

@media (prefers-color-scheme: dark) { .prose { font-variation-settings: "wght" 370; } } サブセット化と軸の範囲

和文の可変フォントは容量が大きい。使う太さが400と700だけなら、軸の範囲を400〜700に絞ったファイルを生成すると、容量を3割ほど減らせる場合がある。Google Fontsの配信では、URLで範囲を指定できる。

確認のための3つのテスト

太さの変化中に、段落の折り返し位置が変わらないか

ダークモードで本文が太って見えないか

フォント読み込み前後で、レイアウトがずれないか

どれも数分で確認できる。演出を足す前に、まず本文が静かに読めることを確かめたい。