Webデザイナーの方は「Variable Font」という言葉を聞いたことがあるでしょうか。

Variableは、名詞で「変数」、形容詞で「可変の」を意味する言葉です。
通常、フォントには決まった形の文字が収録されており、太さや幅を変える場合には別のフォントファイルを読み込む必要がありました。

Variable Fontを使うと、1つのフォントファイルを使って、ファイルサイズを拡大することなく、太さや幅などの属性を無限に変更することができるようになります。

これまでの固定的で動かないフォントとは対照をなす、全く新しい概念です。
今回は、「Variable Font」について知っておきたいことをご紹介します。

フォントの概念を大きく変える「Variable Font」

Variable Fontは、これまでのフォントの概念を大きく変える、文字どおり「可変の」フォントです。


Variable Fontのレスポンシブレンダリング / 画像引用元：Erik van Blokland

デザイナーのジョン・ハドソン氏の定義を借りれば、Variable Fontとは「複数のフォントを表示できるような挙動が可能な単一のフォントファイル」を表します。

デザイナーであれば、通常のフォントファミリーには、レギュラー書体、イタリック書体、ボールド書体、場合によってはセミボールド書体などが存在することは知っているでしょう。
また、今日の多くの書体には300や500、「Condensed」や「Extended」といった、さまざまな太さや幅のフォントが存在しています。


Variable Fontなら変幻自在に変えられます / 画像引用元：Microsoft

しかし、フォントファイルをいちいち読み込んでいくのは生産的とは言えません。
Variable Fontは、「デザインスペース」(Design Spaces)と呼ばれる仮想空間で、太さや幅などを自由自在に変えながら表示することを可能にしました。


3軸のデザインスペース / 画像引用元：John Hudson

実業務をやっているとｍボールドよりは細く、セミボールドよりは太くしたい、と思うことがあるのではないでしょうか。
そんなニーズにも、Variable Fontは応えてくれるでしょう。