Webデザインの救世主？バリアブルフォント?！

2020.05.20Design

Webデザインの救世主？バリアブルフォント

HPなどのWebデザインを行っていると、必ず悩むのがフォントの問題。紙媒体のデザインだと、自分の思うようにフォントを選んで制作できるのですが、Webとなると使用できるフォントの数が限られてきます。

そもそも、ブラウザで表示することを考えると、データを出来るだけ軽くしユーザビリティを意識し、デザインよりも機能性を優先させるのは当たり前の話。しかし、デザイン上もう少し太いフォントがいいとか、少し細くしたいなど、微妙なところが気になる時に、我慢しないといけなかったのですが、その問題を解決できるバリアブルフォントというものが出てきたのです。

バリアブルフォントとは

Variableとは、名詞で「変数」形容詞で「可変の」を意味する言葉ですが、バリアブルフォントとはいままで指定された中でしか選べなかった文字の太さやWeight（文字の太さ）や斜体の角度などを自由に調整できるフォントのことです。

バリアブルフォントで出来ること

ではバイアブルフォントで出来ることはなんでしょうか？普段使っているフォントには、RegularやBoldなど数種類のWeight（太さ）のデータが別々のファイルに入っています。その為、規定の範囲の中でしかフォントを選ぶことが出来ませんでした。しかし、バリアブルフォントにより、デザイン（他の要素）などを考慮した上で最適なWeight（文字の太さ）などを自由に選べるようになりました。

またWebデザインの場合、使用する際に表示速度の関係で容量を気にする必要がありましたが、バリアブルフォントは一つのファイルで様々なWeight（文字の太さ）などを選べるようになるためデータ容量を気にせず使用することができます。

バリアブルフォント紹介

バリアブルフォントはIllustrator CC 2018〜とPhotoshop CC 2018〜で対応しておりAcumin、Myriad、Minion、Source Code、Source Sansなど、デフォルトで数種類のバリアブルフォントがインストールされています。
また、バリアブルフォントを一覧で紹介されているサイトもあるので実際にどうのように変化するか試めしてみてもいいかもしれません。
Variable Fonts