バリアブルフォントとは-可変フォントで形が自在に変えられる新しいフォント-

バリアブルフォントはご存じでしょうか？

簡単に説明をすると、1つのフォントで太さや幅等といった形を変える事ができますので、バリエーションが豊富に使えるとても便利なフォントです。

今回はバリアブルフォントについてご紹介したいと思います！

バリアブルフォントとは

冒頭にもご紹介しましたが、バリアブルフォントとは1つの種類の太さや幅等といった形を自在にかえる事ができるフォントで「可変フォント」とも呼ばれています。
詳しくは以下になります。

可変フォント (Variable fonts) は幅、太さ、スタイルごとに個別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを 1 つのファイルに組み込むことができる OpenType フォント仕様の進化版です。

引用元：https://developer.mozilla.org/ja/docs/Web/CSS/CSS_fonts/Variable_fonts_guide

現時点でのブラウザの対応

2024年9月時点での各ブラウザの対応状況は以下になります。

URL：https://caniuse.com/?search=Variable%20fonts

CSSでフォントの値を調整が可能

バリアブルフォントはCSSで値の調整する事で1つのフォントで様々なバリエーションが楽しめます。

CSSで調整できる値

以下のコードの値を調整する事で、フォントの調整を行います。

/* -- フォントの太さ -- */
font-variation-settings: "wght" {数値};

/* -- フォントの幅 -- */
font-variation-settings: "wdth" {数値};

/* -- イタリック -- */
font-variation-settings: "ital" {数値};

/* -- フォントの傾き -- */
font-variation-settings: "slnt" {数値};

/* -- フォントのアウトライン -- */
font-optical-sizing: "opsz" {数値};

/* -- フォントの等級 -- */
font-variation-settings: "GRAD" {数値};

まとめ

バリアブルフォントについてご紹介いたしましたがいかがだったでしょうか？

リリースされてからしばらく経ちますが、1つのフォントで様々なバリエーションが作れる点や、APIでもフェイトの数だけ読み込ませる事がないので、メリットは多いかと思います。

ご興味のある方は是非使ってお試し下さい！