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

まずバリアブルフォントとは何かというと、Adobe・Apple・Google・Microsoftが共同で開発した新しいフォントの規格のことです。柔軟性が高く、全てのフォントファミリーを一つのファイルに内蔵しているフォントが多いという特徴があります。そのため複数のフォントファミリーをダウンロードする必要がなく、コンパクトにデータを扱うことができます。
一般的なフォントファイルは太さや字幅・斜体などファイルが別になるものが多いのですが、バリアブルフォントはそれら全てが一つのフォントファイルにまとまっているかつ、フォントによっては自由自在に細かい数値で調整ができるという点も新しいかもしれません。
実はバリアブルフォントの存在自体は数年前からあり、cssに記述することでWEBサイトでも表示できるように主要ブラウザは対応済みです。従来であればスタイルごとにフォントファイルを読み込ませていましたが、バリアブルフォントであれば一つのファイルで調整が可能なため、細かい表現の違いの実現やページの表示速度向上に繋げることができるというメリットもあります。

参照：https://developer.mozilla.org/ja/docs/Web/CSS/CSS_fonts/Variable_fonts_guide

バリアブルフォントの使い方

バリアブルフォントは一般に販売されているものもありますが、Illustratorで使うのであればやはりAdobe Fontsをチェックするのが一番です！
Adobe Fontsではテキストパネルを開いて右の方に「VAR」のマークがついているものがバリアブルフォントとして登録されており、上のパネルにスライドバーのようなアイコンが表示されます。あるいはフォント名の後ろの方に「VF」とついているものはバリアブルフォントのことを指しています。（少し分かりにくいのですが「Skew VF」はマークがついていないものの「VF」表記があるためバリアブルフォントになります…）

フォントによって調整出来る要素が多少異なりますが、デフォルト以外に「カスタム」として太さや字幅を細かく調整をすることができます。（斜体の角度を変えられるフォントもあります）

今までであれば「medium」「bold」など標準の太さでしかフォントを選ぶことが出来ませんでした。しかし、このバリアブルフォントによって、より細かく自分の表現したいフォントを設定することで、テキストのデザイン性はさらに自由に簡単に表現をすることが出来るようになりました！

なお、Adobe Fontsに入っているフォントの中だと英字フォントはそれなりにバリエーションがあったのですが、日本語対応しているフォントはかなり少ないです。そのため、正直なところバリアブルフォントの知名度はあまり高く無かったように感じていました。（2021年に源ノ角ゴシックがバリアブルフォントになったのが一時話題になったくらいかなと…あとはNoto Sansくらいで他に日本語フォントのバリアブルフォントは無かったような…）
それでも、2025年に入ってAdobe Fontsに追加された新しい日本語フォントのうち、「百千鳥」というフォントがバリアブルフォントだということで、また話題になっています。

参照：https://blog.adobe.com/jp/publish/2025/02/13/cc-design-adobefonts-2502

バリアブルフォントを使って文字をデザインする

すでにバリアブルフォントの使い方や便利なところを紹介しましたが、個人的な真骨頂はアウトライン化した時にあると思っています！

せっかくなので新しい「百千鳥」フォントを使っていきます。
今回は字幅100・太さ600という設定にしました。

もし以下のようなデザインをしたいとき、通常のフォントであればナイフツールなどを使ってオブジェクトを自分で切り離す必要が出てきます。

通常のフォントの場合、文字全体に対してアウトライン化されるため文字ごとに一つのオブジェクトになってしまいます。

※こちらはバリアブルフォントではない「ADSあかり」というフォントです。

今回は主題とは離れるので詳細を紹介は出来ませんが、アウトライン化したフォントに対してナイフツールをドラック→パスファインダーの「分割」をすることで文字の画数ごとに分けることができます。（ナイフツールを使う時は事前にフォントのグループ・複合パスの解除をお忘れなく…！）

自由な位置で切り離すことができるため面白いことは出来るのですが、漢字や平仮名など曲線や字画によって画数のところで切り離すことが難しいため、やる際には細かく見ていく必要があるデザイン表現だと思っています。
参照：https://helpx.adobe.com/jp/illustrator/using/tool-techniques/knife-tool.html

しかし、バリアブルフォントはアウトライン化した時すでに画数ごとに分かれているのです！すごい！

複合パスなどを解除したあとは一画ずつにオブジェクトが分かれるため、色変更・サイズ変更・追加/削除など自由自在です。重なり部分はおそらく文字の書き順通りで上に重なっているので自分で重ね順を調整する必要がありますが、逆に文字としてあるはずの重なりというのもそのまま表現ができるのでポジティブポイントだと思っています。（重なりをナイフツールでやろうものなら恐ろしい手間がかかるなと…）

このようにバリアブルフォントは本当に多彩な表現を簡単にできるため、今後も活躍の場が増えていきそうです。

まとめ

今回はバリアブルフォントについて紹介をしてきました。
主にIllustratorでの使用を前提としていましたが、Photoshopなどでもバリアブルフォントは利用ができます。文字のデザイン表現で言えばPhotoshopはより様々なことができるので、面白い活用方法がたくさんあるかもしれません！
また、今回アウトライン化をして文字をデザインするというところにも触れました。まだ日本語対応はしていませんが、IllustratorにはAI技術により英字フォントであれば一度アウトラインしたフォントでもアウトライン化解除できると言った機能も出てきています。（ベータ版で「ウィンドウ＞Retype」というものがあります）このようにこれからも新しい機能が出てきて、より簡単に自分がやりたい表現を実現していくことが出来るかもしれないと思うと楽しみです。

今回はここまで、
最後までお読みいただきありがとうございました。