新しいフォントのカタチ「バリアブルフォント」とは

こんにちは、ハヤマです。

今回は、少しずつ普及し始めている「バリアブルフォント」について学んでいきたいと思います。

バリアブルフォントとは？

Adobe・Apple・Google・Microsoftが共同で開発した新しいフォントの概念のことで、通常、フォントファイルは字幅やウェイト、斜体などのスタイルごとで分かれていますが、バリアブルフォントの場合はフォントファミリー全体を1つのファイルで管理することができます。

以下、MDNより引用

可変フォント (Variable fonts) は幅、太さ、スタイルごとに個別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを 1 つのファイルに組み込むことができる OpenType フォント仕様の進化版です。CSS および単一の @font-face 参照を介して、特定のフォントファイルに含まれるすべてのバリエーションにアクセスできます。

使用するメリット

① ファイルサイズが小さい

スタティックフォントでは、字幅・ウェイトの分だけアウトラインデータが必要となるのでその分の容量が含まれますが、バリアブルフォントの場合はそれぞれ上限・下限の2種類の値があれば良いので、その中間値のデータはほぼゼロになるのだそう。その分スタティックフォントに比べてファイルサイズが軽くなります。また単一ファイルで文字の太さや幅を調整できるので、複数のフォントファイルをいちいち読み込む必要がなくなります。