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

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

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

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

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

以下、MDNより引用

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

使用するメリット

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

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

② 直感的にスタイルの設定ができる

例えばIllustratorでバリアブルフォントを使用した時、文字パネルにある「太さ」「字幅」「傾斜角」の設定から、バーをスライド(もしくは数値を入力)することで直感的に文字のスタイルを調整することができます。
※フォントによっては、「太さ」しか設定できないものもあります

対象ブラウザ

Webフォントであれば、CSSでバリアブルフォントのパラメーターを設定することができます。

Variable fonts | Can I use... Support tables for HTML5, CSS3, etc
現時点で全てのモダンブラウザで使用可能となっています。
※IE11は非対応ですが、まもなくサポート終了(2022年6月15日まで)なので、対象外としています。

さいごに

いかがでしたでしょうか。
さすが“進化版”と呼ばれるだけあり、今までのフォントの概念とは異なりますね。
まだ実際に活用とまでは至っていませんが、これから少しずつ活躍の場が増えていくのではないでしょうか。
また別の機会に、バリアブルフォントのファミリーを紹介できたらと思います。