ブログ
バリアブルフォントをWeb上で触ってみる
こんにちは。2回目の登場となります。エンジニアのuchimuroです。
数年前からバリアブルフォントという名称はたまに聞くな〜という感じだったのですが、じゃあそれって実際何者なのと聞かれると、色々な値が可変できる…？くらいの知識しかありませんでした。
そこで今回はバリアブルフォントをWebフォントとして使ってみて、どのようなものかを知っていければと思います。
バリアブルフォントとは
それではまず初めに、今回の題材であるバリアブルフォントの概要をMDNから引用してみます。
バリアブルフォントは幅、太さ、スタイルごとに個別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを 1 つのファイルに組み込むことができる OpenType フォント仕様の進化版です。CSS および単一の @font-face 参照を介して、特定のフォントファイルに含まれるすべてのバリエーションにアクセスできます。
（引用元：https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide）
なるほど…。要するに従来であればウェイトの違いなどによって、同じ書体でも別々のフォントファイルを用意する必要がありましたが、バリアブルフォントは1つのフォントファイルに複数のバリエーション情報が内包されているため、ファイルを1つ用意するだけで色々なバリエーションを表現できるということのようです。
CSSで操作できる値
バリアブルフォントはCSSを用いて、それぞれの値を以下のように設定して制御することができます。
これ以外にも「オプティカルサイズ」などの値も設定できるとのことでしたが、今回は割愛させていただきます。
太さ
font-variation-settings: "wght" {数値};幅
font-variation-settings: "wdth" {数値};イタリック
font-variation-settings: "ital" {数値};傾き
font-variation-settings: "slnt" {数値};実際に試してみる
今回はcodepenでデモを作成してみました。
「Archivo」というバリアブルフォント対応の書体をGoogle Fontsから読み込んで使用しています。
ちなみにGoogle Fontsのバリアブルフォント対応書体の一覧はこちらから確認することができるので、興味がある方は見てみてください。
（書体によって設定できる値や範囲が違うので注意が必要です。）
デモ内の英字部分は全て同一のフォントサイズに設定し、太さと幅の値のみを変化させています。
それぞれで値をどのように設定しているかは、デモ内に併記したテキストを確認していただければと思います。
See the Pen variable font by evoworx-uchimuro (@evoworx-uchimuro) on CodePen.
使ってみた感想
- ウェイトなどをアニメーションに取り入れられるのは面白いと思いました。
- 導入するのは簡単だけど、実際の案件で使用できる場面があまり思いつかなかったです。
- （使用例や対応している書体の少なさなども踏まえると）まだまだ発展途上な表現…？
補足情報
ブラウザ対応状況
https://caniuse.com/variable-fonts
バリアブルフォントは基本的にはどのブラウザでも使用することができますが、IE11のみ非対応となっています。
しかし、2022年6月15日にIE11のサポート終了も発表されており、弊社でもIE11を対象ブラウザの範囲外とする案件も増えてきたので、来年以降から大バリアブルフォント時代が到来するかもしれないですね…。
和文のバリアブルフォント
https://blog.adobe.com/jp/publish/2021/04/08/cc-design-source-han-sans-goes-variable.html
このブログでは主に欧文書体のバリアブルフォントを取り扱いましたが、もちろん和文書体（日本語）のバリアブルフォントも存在します。（しかし、おそらく和文書体でバリアブルフォントに対応しているのは現在「源ノ角ゴシック」のみという状況かと思います。）
やはり欧文に比べると、和文の方が必要な文字数が多くなってしまうので、今後全ての和文書体がバリアブルフォントに対応するというのは現実的ではないと思います…。しかし、少なからずリリースはされるはずなので、各フォントベンダーの動向を見守りましょう。
おわりに
ということで駆け足にはなりましたが、今回はバリアブルフォントについてまとめてみました。
もし実際の案件でウェイトなどをアニメーションさせるとなった場合は、デザイナーとしっかりとすり合わせを行い、何故この部分で用いるのかを明確にしないと、ただ単に真新しいことをやっているユーザビリティの低いサイトになってしまいそうだなという印象を受けました。
しかし、使い所さえ合致していればとても面白い表現であることは間違いないので、今後使えそうな機会があれば自分も積極的にチャレンジしていきたいと思います。
それでは今回はここらへんで失礼します。