「OpenTypeフォント」のことについてこれまでも記事を書いてきましたが、もう1つ欠かせない要素がこの「バリアブルフォント」です。Adobeの画面でいうとフォントを選ぶときに出てくるこちらの項目です。「OpenTypeフォント」であることを表すOのマークにVARと付いているものが目印になります。一体これはどういうものなのかについて探っていきたいと思います。

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

2016年にApple社, Google社, Microsoft社, Adobe社によって共同発表されました。通常のフォントファイル（※）は、ウェイト/斜体などのスタイルにつき1つでしたが、バリアブルフォントはフォントファミリー全体を1つのファイルで管理することができます。ファイルサイズも軽いのが特徴です。
※1スタイルにつき1つのフォントファイルの形式をスタティック（静的）フォントと呼びます。

直感的にスタイルの調整が可能

1つのファイルでフォントを管理とは具体的には「軸」と呼ばれる数値の増減でパラメータで細かくスタイルが調整可能だということです。調整できる項目としては、①太さ、②幅、③イタリック、④傾き、⑤オプティカルサイズの5つになります。2024年1月現在、バリアブルフォントをサポートしているAdobe Creative Cloud アプリは、Photoshop、Illustrator、InDesignの3つのようです。今回はオープンソースで配布されているフォントのRoboto-Flexを使用することにしてそれぞれ実演していきたいと思います。

＜Roboto-Flex＞
https://github.com/googlefonts/roboto-flex

①太さ（weight）

②幅（width）

③イタリック（italic）

イタリックはパラメータではなく通常通りタブから選ぶようです

④傾き（slant）

⑤オプティカルサイズ（optical size）

和文フォントでは「源ノ角ゴシック」が使える！

2021年4月に、Adobe社とGoogle社で共同開発したオープンソース書体「源ノ角ゴシック」のバリアブルフォントがリリースされていました。英語名称は「Source Han Sans Variable」。

＜源ノ角ゴシック（バリアブルフォント）＞
https://github.com/adobe-fonts/source-han-sans/releases

基本的にバリアブルフォントは欧文しか実装されていません。欧文と和文では文字数が圧倒的に違いますし文字も複雑ですから、和文のバリアブルフォント化は難しいものがあることは容易に想像できますが、5年後とかにはもっと色々な和文バリアブルフォントがリリースされているような気がしています。今後に期待したいですね！

まとめ

これまでバリアブルフォントという言葉を知らなくて、アンテナが張れていなかったことを痛感しました。「MediumとDemi Boldの間が使いたいんだけどな・・・」とか痒いところに手が届くみたいなことにはなるかなと思いました。WEBフォントでも適用することもできるので便利です。

表現の幅は広がった一方で、1つのデザインにおいてスタイルを多用し過ぎてもそれはデザインの統一感を生むことが難しくなってくると思いますので意図的に賢く使っていくことが重要ですね。

まだバリアブルフォントに触れたことが無い方は、「Variable Fonts」というサイトはおすすめです。WEB上でパラメータを動かしてバリアブルフォントを体感することができますし、いいなと思ったらリンク先からフォントをダウンロードすることもできます。まずはこちらからどんなものがあるのか見てみることからおすすめします！