可変フォントは何を可変にしたのか

9ファイルが1ファイルになった

以前のWebフォントは、太さごとに別のファイルだった。細字から極太まで9段階を使えば9ファイル。和文なら1ファイル数メガバイトになることもあり、実際のサイトでは2〜3種類に絞るのが普通だった。

可変フォントは、太さや幅などの“軸”を1つのファイルの中に持つ。軸の両端の字形だけを設計し、その間の形は表示時に計算する。本誌の取材先の制作会社では、欧文の見出し書体を可変フォントに切り替えたことで、フォント関連の転送量が約4割減ったという。

軸は誰が決めるのか

太さ（wght）、幅（wdth）、傾き（slnt）などは標準の軸として定義されている。一方で、書体設計者は独自の軸を追加できる。セリフの長さ、インクだまりの量、文字の“丸さ”まで、軸にできるものに制限はない。

架空の書体設計スタジオで欧文書体を手がける森さんは、軸を増やすほど組み合わせの確認が爆発的に増えると話す。「3軸なら、両端の組み合わせだけで8通り。実際にはその間の形もすべて破綻がないか確認します」。軸の数は、設計者が品質を保証できる範囲で決まる。

和文で可変にする難しさ

欧文の基本的な文字数は数百だが、和文は常用漢字だけで2,000字を超え、一般的なフォントは7,000字以上を収録する。すべての字形で補間が破綻しないように設計するのは、欧文の何十倍もの作業になる。

それでも和文の可変フォントは少しずつ増えている。本誌の記事ページでは、和文本文に可変フォントのNoto Sans JPを使い、見出しには幅の軸を持つ欧文書体を組み合わせている。和文は太さだけ、欧文は太さと幅、という役割分担だ。

測る道具としての可変フォント

取材を通じて意外だったのは、可変フォントが“演出”より“検証”に使われていることだった。見出しの太さを10刻みで変えた画面を並べ、どの値が写真と釣り合うかを比べる。以前は書体見本帳でしかできなかった比較が、ブラウザ上で一瞬でできる。

本誌のトップページのロゴは、スクロールに合わせて幅の軸が狭まる。動きを見せたいからではなく、読み始めたら見出しより記事の一覧に場所を譲るためだ。可変フォントが可変にしたのは、文字の形というより、文字に割り当てる面積の決め方だったのかもしれない。