次世代のフォント技術　バリアブルフォントの世界

次世代のフォント技術
バリアブルフォントの世界

2021年4月19日更新 / 株式会社ICS 昆野史弥

Font

今回の記事では次世代のフォント技術「バリアブルフォント」についてお話します。ウェブにおけるタイポグラフィの進化を振り返りつつ、バリアブルフォントが生まれた背景、その魅力について紐解いていきましょう。

フォントの進化

デジタルフォントはこの半世紀の間にいろいろな進化をたどってきました。フォントのアウトライン化、フォーマット戦争、ウェブフォントの登場などなど……。まずはその歴史をたどっていきます。

ビットマップの時代

デジタルフォントの初期に用いられたのはビットマップフォントでした。ビットマップフォントはドットの集合体として表されるフォントです。現在でも一部の端末や、レトロな雰囲気のデザインには用いられることがありますね。

現在よく見るデジタルフォントに比べるとかなり荒々しいビットマップフォントですが、大きな欠点がありました。それは「あらかじめ用意された大きさでしか正しく表示できない」ことです。12pxで表示することを想定したフォントは拡大すると一つ一つのピクセルが大きくなり視認性が悪くなります。それぞれの文字が持つ点の数が一定であるためで、フォントサイズごとにフォントを作成する必要があります。この後に紹介するアウトラインフォントはこの問題を解決したスケーラブルなフォントです。

ビットマップとベクターの違い

アウトラインフォント

アウトラインフォントは点で表すビットマップフォントと違い、ベクターとして描画されます。現在ではほとんどのフォントがアウトラインフォントです。

アウトラインフォントはAdobeがPostScriptフォントを開発したところから始まります。それを受けたMicrosoftとAppleは対抗馬として共同でTrueTypeフォントを発表しました。TrueTypeフォントの開発はMicrosoft主導で行われました。その結果Windowsマシンでは普及しましたがMacではTrueTypeとPostScriptが共存する形となり、WindowsとMacで互換性がないという問題が生じました。

この問題を解決するため、今度はMicrosoftとAdobeが手を組んでOpenTypeフォントを開発します。TrueTypeをベースにPostScriptフォント形式をサポートしたもので、拡張子が複数パターン存在します。PostScript形式のものは.otf形式、TrueType形式のものは主に.ttfとなります。少しややこしいですが、.ttf形式のOpenTypeフォントは「TrueType形式のOpenTypeフォント」と呼んだりします。この違いは、TrueTypeフォントとPostScriptフォントのアウトラインの計算方法の違いに由来しています。

▼OpenTypeフォントのなりたちオープンタイプの拡張子

OpenTypeフォントは単にOSの互換性をもっただけでなく、文字が持てるスタイルの数が大幅に増加し64,000種のグリフ情報をもてるようになりました。グリフとは文字の形状を司るものです。たとえば画面上に「a」と表示するときはUnicodeU+0061と、対応したグリフを合わせます。一つのUnicodeには太字や細字、斜体といったグリフも合わせられるため、グリフの数はフォントの表現力の高さと言えるでしょう。

また、OpenTypeフォントでは詳細な字詰めの設定などもできるようになりました。以下はCSSのfont-feature-settingsプロパティでプロポーショナルメトリクスを適用した例です。プロポーショナルメトリクスについては『文字詰めできるCSSのfont-feature-settingsが凄い！日本語フォントこそ指定したい自動カーニング』で詳しく解説しています。

プロポーショナルメトリクスの例

フォントによる表現力は向上の一途をたどりましたが、まだまだ扱える場面は限定されていました。

ウェブフォントの登場

OpenTypeの登場によりコンピューターでの文字表現は豊かになりました。しかしウェブに限ってはそうはなりませんでした。なぜなら「コンピューターに入っているフォントしか表示できない」という問題があったからです。

Windowsならメイリオや游ゴシック、Macならヒラギノ角ゴシックファミリーといったフォントはデフォルトでインストールされているため問題なく表示されます。しかし特殊なフォントをfont-familyプロパティに設定しても、フォントを持っていないPCでは表示されません。

この問題への対抗策として現れたのがウェブフォントです。サーバーにフォントファイルを置き、ページの表示時にブラウザに読み込ませる、これで環境に依存せず指定したフォントが表示されます。

ウェブフォントとして用いる際の大きな問題はその巨大なファイルサイズでした。 OpenTypeフォントは64,000種ものグリフ情報をもてます。裏を返せばその分だけファイルサイズは大きくなるということです。さらに、用いるフォントの種類が増えればそのサイズは倍々になります。

現状、ウェブフォントが読み込まれる間は以下の方法でやりくりしています。

FOUT（Flash Of Unstyled Text）：ウェブフォントが読み込まれるまでの間は代わりのフォントを表示
FOIT（Flash Of Invisible Text）：ウェブフォントが読み込まれるまでテキストを表示しない

FOUTを選べば途中でフォントが切り替わるためユーザー体験がよくない、しかしFOITを選べば通信環境によってはそもそもフォントが表示されない問題も起こります。対策としてJavaScriptによって両者を併用した制御も行われています。

たとえばGoogleやAdobeはJavaScriptによるWeb Font Loaderを用いた制御を推奨しています。これを用いることでタイムアウト処理やローディング中のクラス制御なども可能になります。フォント自体の形式も、ウェブフォントとして最適化された.woffや.woff2形式のものを用いるのが主流にはなりました。

しかし、それでも大きなファイルサイズに四苦八苦しているのが現状です。FOIT-FOUT問題が引き起こすユーザー体験の低下をできるだけ解消したい──そんな要望に応えるように生まれたのがバリアブルフォントでした。

そしてバリアブルフォントへ

バリアブルフォントは2016年9月にApple, Google, Microsoft, Adobeが共同発表しました。

その最大の特徴は、サイズやウェイト、字幅などのパラメーターを連続的に補完してくれることにあります。それぞれのパラメーターは軸と呼ばれ、その値によって形を変えます。バリアブルフォントには基準となるパターンがいくつか登録されており、軸の値によってそれらの中間値を補完するような見た目になるのです。

こちらは動的にフォントのウェイトと幅を変更するデモです。

バリアブルフォントデモ１

このデモで読み込まれるフォントは一種類です。グリフの数だけフォントを読み込む従来のOpenTypeフォントと比べ、小さなサイズで多様なスタイルのフォントを表現できます。ウェブフォントとして用いる際も、より高速な配信が可能になります。

バリアブルフォントの世界に飛び込もう

以降では、バリアブルフォントについてより詳しく触れてみましょう！

バリアブルフォントを知るにあたって、まずは軸について知る必要があります。標準の軸として「太さ、幅、イタリック、傾き、オプティカルサイズ」があります。プログラムからそれぞれの軸にアクセスするときは、プロパティ名を用います。

軸	プロパティ名
太さ（Weight）	`wght`
幅（Width）	`wdth`
イタリック（Italic）	`ital`
傾き（Slant）	`slnt`
オプティカルサイズ（Optical Size）	`opsz`

補完するのは登録された軸のみになります。たとえばitalの値が1種類しか登録されていないフォントはitalの値によらず一定の傾きをもちます。

オプティカルサイズとは、サイズに連動した文字のスタイルです。フォントサイズが小さなときは簡略化された表記、大きなときは細かく装飾されたフォント、というように設計されることがあります。標準ではフォントサイズに依存しているため手動での変更はできませんが、一部のフォントでは変更が可能です。先ほどのデモにおいても、オプティカルサイズに応じて文字バランスが微妙に変更されることが確認できますね。

Roboto-Flexフォントを例に

バリアブルフォントはまだそれほど普及していないこともあり、入手元がそれほど多くありません。今回は、オープンフォントライセンスで配布されているRoboto-Flexフォントを使用します。

GitHub - Roboto-Flex

記事の末尾にバリアブルフォントを配布しているリンクをいくつか貼っておくので参考にしてください。

フォントを入手したらさっそくHTMLに読み込んで……！　と、はやる気持ちを抑えフォントへの理解を深める作業に移りましょう。『WAKAMAI FONDUE』というサイトでは、バリアブルフォントの軸の種類や上限、下限を知れるだけでなくインタラクティブに操作し見た目を確認できます。ここに先ほどダウンロードしたRoboto-Flexを読み込ませてみましょう。

基本の軸であるwght (Weight) , wdth (Width) , opsz (Optical Size) , slnt (Slant) の他に大文字で表記された軸がいくつかあります。バリアブルフォントでは、開発者がオリジナルの軸を設定することができます。

Roboto-Flexの場合はGRADという軸が設定されており、この軸の値を変更するとwghtとはまた違った文字の太さの調節を行えます。

ここまでをまとめると、バリアブルフォントの特徴は以下のようになります

基本の軸（太さや幅）を持つ
オリジナルの軸が設定されたものもある
それぞれの軸の上限値、下限値が設定され中間地では補完するような形をとる

CSSでバリアブルフォントのパラメーターを設定しよう

それではお待ちかね、実際にフォントを表示する作業です。適当なHTMLファイルを作成したあと、CSSを追加していきます。下の手順に従ってスタイルを追加していきましょう。

バリアブルフォントのOS、ブラウザごとの対応状況は以下のページで確認できます。

『Support - Variable Fonts』

@font-faceでフォントを読み込む

@font-face { 
  font-family: "Roboto Flex";
  src: url("./fonts/RobotoFlex[slnt,wdth,wght,opsz].ttf") format("truetype-variations");   
  font-weight: 100 1000;
  font-stretch: 25% 151%;
}

まずはフォントを読み込みます。font-weightやfont-stretchに2つの値を設定しました。これはそれぞれの上限値と下限値になります。

font-variation-settingsでパラメーターの値を設定する

p {
  font-size: 48px;
  font-family: "Roboto Flex", sans-serif;
  font-variation-settings: "wght" 400, "wdth" 90, "GRAD" 1;
}

それぞれの軸の値はfont-variation-settingsに「プロパティ名　値」の順で記述します。

実際にブラウザで確認すると、与えた値が適用されていることがわかります。開発者ツールから値を変更すると形が変わります。

バリアブルフォントデモ２

アニメーションさせてみよう

バリアブルフォントではそれぞれのパラメーターが連続的である特徴を生かし、アニメーションを追加することができます！

p {
  font-size: 48px;
  font-family: "Roboto Flex", sans-serif;
  font-variation-settings: "wght" 400, "wdth" 50, "GRAD" 1;
  animation: width-animation 1s ease infinite alternate;;
}

@keyframes width-animation {
  from { font-variation-settings: "wght" 400, "wdth" 50, "GRAD" 1; }
  to   { font-variation-settings: "wght" 400, "wdth" 151, "GRAD" 1; }
}

バリアブルフォントアニメーションデモ

ここで注意する点としては、アニメーションの前後で変化しない値、上の例だとwhgtやGRADについても指定してあげることです。指定しなかった場合、デフォルトの値に戻ってしまうため想定したフォントになりません。

▼これはNG例

p {
  font-variation-settings: "wght" 400, "wdth" 50, "GRAD" 1;
  animation: width-animation 1s ease infinite alternate;;
}

/*❌‍上で指定したwhgtとGRADの値がリセットされてしまいます！❌*/
@keyframes width-animation {
  from { font-variation-settings: "wdth" 50 }
  to   { font-variation-settings: "wdth" 151 }
}

CSS変数でパラメーターを管理しよう

軸に与える値はCSS変数で管理すると、何かと便利です。JavaScriptで動的な変更を行う場合など、CSS変数を変更するだけですむからです。

:root{
  --wght: 400;
  --wdth: 100;
  --GRAD: 1;
}

p {
  font-size: 48px;
  font-family: "Roboto Flex", sans-serif;
  font-variation-settings: "wght" var(--wght), "wdth" var(--wdth), "GRAD" var(--GRAD);
}

JavaScriptから変数を変更する場合は直接CSS変数の値を変更すればよいですが、CSSアニメーションに関してはプロパティそのものを変更しなければアニメーションしないようです。NG例とOK例を記載しておきます。

/*❌NG例❌*/
@keyframes width-animation {
  from { --wdth: 25; --wght: 100; }
  to   { --wdth: 151; --wght: 100; }
}
/*OK例*/
@keyframes width-animation { 
  from { font-variation-settings: "wght" 100, "wdth" 25; } 
  to   { font-variation-settings: "wght" 1000, "wdth" 151; }
}

Google Fontsのバリアブルフォント

使い勝手のいいオープンソースフォントが配布されるGoogle Fontsには、なんとバリアブルフォントの絞り込み検索機能があります。

Google Fontsバリアブルフォント絞り込み機能画像

ダウンロードしたものはRoboto-Flexの例と同様に使えますが、<link>タグで直接用いる例はパラメーターによって上手くバリアブルフォントにならない例があるようです。確認してから使うようにしましょう。

特殊なバリアブルフォント

ここまででバリアブルフォントの強力さを存分に感じてもらえたと思いますが、この仕組みを利用して文字ではないフォントも作られています。

AniconsはGoogleマテリアルアイコンを基に作られたバリアブルフォントです。A,B…の文字にそれぞれアイコンが割り当てられています（ドキュメントがなさそうなので、自分で全通り試す必要がありそうですが……）

軸はTimeのみで、その値に応じて動きを見せます。

これをCSSアニメーションと組み合わせるとこのような表現が可能になります。

Aniconsのデモ画像

バリアブルフォントの技術はこのように応用できるという例を紹介しました。今後もどんなフォントが生まれていくのか楽しみですね。

待望の和文フォント登場！（2021年4月追記）

ここまで読んでくださった日本語話者の皆さんは気になっていることがあるのではないでしょうか。

ところで……和文フォントはあるの？

種類の少ない欧文に比べ、ひらがな、カタカナ、さらに無数の種類がある漢字が含まれる和文は制作コストも高く、フォントファイルとしてもサイズが大きくなってしまうため長らく存在しない状況が続いていました。

しかし！　2021年4月、AdobeからSource Han Sansのバリアブルフォントのリリース発表がありました。日本では源ノ角ゴシックとして親しまれているフォントです。

Source Han Sans（日本語名称：源ノ角ゴシック）がバリアブルフォントに - Adobe Blog

Source Han Sansのバリアブルフォントでは、前述の「サイズが巨大」という問題を乗り越え現実的なサイズに抑えられています。日中韓のフォントが含まれていますが、日本語のみというように地域別のフォントのみ使用する場合はさらに小さなサイズで導入できます。

非バリアブルフォントであるPan-CJK Source Han Sans 2.002フォントのフルセットは593.7MBですが、1つのOTCファイルとしてパッケージ化された同等のバリアブルフォントはわずか32.9MBで、各地域のサブセットフォントはさらに小さくなります。

Source Han Sansのレポジトリから日本語サブセットであるSourceHanSansJP-VF.otf（7.75 MB）をダウンロードし、上述の『WAKAMAI FONDUE』でWeightを動かしてみました。見事にバリアブルフォントとなっています！

和文のバリアブルフォント

あわせて、Googleからは『Noto Sans CJK Variable』バリアブルフォントも提供されました。

それぞれのフォントはAdobe Fonts, Google Fontsでは現在（2021年4月）扱っていない点には注意しましょう。利用したい場合はGitHubレポジトリからダウンロードしてください。

今後はバリアブルフォントがより身近な存在になっていくでしょう。

まとめ

本記事ではデジタルフォントの歴史を振り返りつつ、次世代のフォント「バリアブルフォント」について紹介しました。

柔軟なバリアブルフォントではありますが、普及というにはまだまだ程遠い状況です。「柔軟すぎる」という点では逆に使いにくい要因のひとつになっていることも想像できます。

とはいえ、これまでのフォントでは難しかった表現がいくつも可能になるためポテンシャルは無限大です。新しいウェブ体験を作る技術の一つとして注目していきましょう！

参考文献

モリサワ - フォント用語集
Introduction to variable fonts on the web
MDN - Variable fonts guide
Adobe Typekit Blog - Variable fonts, a new kind of font for flexible design
Glyphs - Creating a Variable Font：バリアブルフォントの作り方の参考記事です

バリアブルフォント配布サイト一覧

Variable Fonts(beta)：名前の通り、有料無料問わず古今東西のバリアブルフォントが紹介されているサイトです
GitHub - TypeNetwork：実験的なオープンフォントライセンスのものが多く、試してみるにはもってこいのレポジトリです。Decovarのようなおもしろいバリアブルフォントが多数開発されているようです
AXISPARAX：バリアブルフォントの実験的なサイトです。ダウンロードはできませんが、さまざまなフォントを試すことができます。個人的にzyconというアイコンフォントがお気に入りです。
GitHub - Source Han Sans：「汎日中韓」フォントである源ノ角ゴシックのセットです。和文のバリアブルフォントが収録されています。
GitHub - Noto Sans CJK：Googleから配信される和文フォント「Noto Sans CJK」です。「Sans」ディレクトリにバリアブルフォントが収録されています。