本文へスキップ

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

ばりあぶるふぉんと

バリアブフォントとは、一つのフォントファイルの中に太さ・幅・傾きなどの軸を連続的に調整できる機能を持つフォント形式です。

バリアブフォント(Variable Font)とは、OpenType仕様のバリエーション機能(OpenType Font Variations)に対応したフォント形式で、一つのファイル内で複数デザイン属性を連続的に変化させられる仕組みを持ちます。2016年にAdobe・Apple・Google・Microsoftの4社が共同でOpenType 1.8仕様として策定しました。

従来のフォントでは、「Regular」「Bold」「Light」など用途ごとに別々のファイルが必要でしたが、バリアブルフォントでは一つのファイルで全バリエーションをカバーできます。変化させられる要素を「軸(axis)」と呼び、代表的なものには以下があります。

  • Weight(太さ):細いLightから太いBlackまで連続的に変更
  • Width(幅):Condensedから Expandedまで
  • Slant/Italic(傾き):直立から斜体まで
  • Optical Size(オプティカルサイズ):字の大きさに応じた形の最適化

ウェブ制作においては、CSS のfont-variation-settingsプロパティで各軸の値を数値指定でき、アニメーション表現なども可能です。ファイル数の削減によるページ表示速度の改善や、デザインの細かな調整が可能になる点が大きな利点です。対応ブラウザも広がり、現在はモダンブラウザでほぼ標準サポートされています。

使い方・例文

ウェブサイトでバリアブルフォントを使うと、CSSひとつでフォントの太さを100〜900の間で自由に指定でき、ホバーアニメーションで文字の太さが滑らかに変化する演出も実現できます。

この用語をシェア

𝕏 でポスト LINE

最終更新:

関連用語