1.バリアブルフォント（Variable Font）とは

Apple、Google、Adobe、Microsoftが共同で開発した、新しい種類のフォント。「Variable（バリアブル）」は日本語で「可変」という意味で、その名の通り形を柔軟に変えられるフォントです。文字の「太さ」や「間隔」、「傾き」などを数値（パラメータ）で細かく調整できるのが特徴。フォントごとに細かなニュアンスまでカスタマイズできる、自由度の高いフォント形式です。

2.使用方法

文字パレットからバリアブルフォント「VAR」のアイコンがついているフォントを選びます。

主な調整できる要素

・字幅（Width）

・太さ（Weight）

・傾斜角（Italic）

※フォントによってパラメータの種類は変わります。

3.使用例

それでは、Adobe Fontsの「百千鳥（ももちどり）」を使ってみます。インストール方法は2種類あります。

「百千鳥VF」はバリアブルフォント版で、フォントファイルは1つ。太さや幅などをスライダーで自由に調整できます。一方、「百千鳥」は通常のフォントと同じ形式で、Regularなどスタイルごとに用意されています。

・百千鳥 VF

https://fonts.adobe.com/fonts/momochidori-variable

・百千鳥

https://fonts.adobe.com/fonts/momochidori

Illustratorの場合

「百千鳥VF」に設定すると、右側にバリアブルフォントの設定アイコン（T字マーク）が出てきます。

そこを開くと、字幅や太さ、欧文イタリックなどの項目が表示されて、スライダーを動かしながら文字の太さや幅を調整できます。実際の見た目を確認しながら操作できるので、感覚的にスタイルを決めていけるのが楽しいところです。

ちなみに、普通のフォントだと扁平（横方向の変形）をかけたときに、縦横の線が細くなったり太くなったりしてしまうことがあります。その点、百千鳥は扁平をかけても線幅があまり変わって見えないようにデザインされているそうです。こういう細かいところにも工夫がされているフォントなんですね。

Photoshopの場合

4.フォントサービス 検索機能

定番のフォントサービスであるGoogle FontsとAdobe Fontsにはバリアブルフォントの絞り込み検索機能があります。

Google Fonts

Adobe Fonts

5.オススメなバリアブルフォント

個人的にオススメなバリアブルフォントです。

・Acumin Variable【Adobe Fonts】

https://fonts.adobe.com/fonts/acumin-variable

・Jetlab Variable【Adobe Fonts】

https://fonts.adobe.com/fonts/jetlab-variable

・アングル【デザインポケット】

https://designpocket.jp/static/font/brand/toktaro-fonts/angle.html

・DriveFlux Min2 VF【Morisawa Fonts】

https://morisawafonts.com/fonts/2340/

バリアブルフォントを紹介しているサイトもあります。

・Variable Fonts

https://v-fonts.com/

バリアブルフォントが一覧でたくさん紹介されていて、実際にどのように変化するのかを試すこともできます。
文章で読むよりも、実際に見たり触ったりしながら試してみると、バリアブルフォントの面白さや特徴がぐっとわかりやすくなるはずです。

以上、バリアブルフォントについてでした。

デザインの可能性を広げてくれるフォントとして、これからの展開が楽しみです。