表現を広げるフォント技術　バリアブルフォントの世界

表現を広げるフォント技術
バリアブルフォントの世界

7月8日メンテナンス済み / 株式会社 ICS

WebFont

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

フォントの進化

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

ビットマップの時代

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

現在よく見るデジタルフォントに比べるとかなり荒々しいビットマップフォントですが、大きな欠点がありました。それは「あらかじめ用意された大きさでしか正しく表示できない」ことです。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-VF.woff2") format(woff2) tech(variations);
  font-weight: 100 1000;
  font-stretch: 25% 151%;
}

まずはフォントを読み込みます。ウェブ配信では.woff2形式を用います。format(woff2) tech(variations)は、ブラウザにバリアブルフォントであることを伝えるための記法です。かつてのformat("woff2-variations")と同等で、現在はこちらが推奨されています。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; }
}

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

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

▼これはNG例

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

/*❌‍上で指定したwghtと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とAdobe Fontsには、なんとバリアブルフォントの絞り込み検索機能があります。

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

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

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

AniconsはGoogleマテリアルアイコンを基に作られたバリアブルフォントです。A,B…の文字にそれぞれアイコンが割り当てられています。

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

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

Aniconsのデモ画像

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

待望の和文フォント登場！

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

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

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

しかし！　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』も提供されました。Serif体も『Noto Serif CJK Variable』として同リポジトリに収録されています。

Google FontsのNoto Sans JPとNoto Serif JP

日本語サイトには欠かせないNoto Sans JP（Google Fonts上の表記は「Noto Sans Japanese」）と、Noto Serif JP（「Noto Serif Japanese」）も、2024年からGoogle Fontsでバリアブルフォントとして配信されています。

wght軸（太さ）の範囲は、Noto Sans JPが100から900、Noto Serif JPが200から900です。Google FontsからNoto Sans JPを読み込むときは、可変フォント向けのwght@100..900という記法が使えます。

<link
  href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap"
  rel="stylesheet"
/>

CSS側ではfont-weight: 450のように任意の太さを指定できます。font-variation-settingsを使わなくても、通常のfont-weightプロパティで連続的な太さの調整が可能です。

GitHub上のNoto Sans CJK Variableは日中韓の文字を1ファイルにまとめた配布形式です。Google Fonts版はUnicode範囲の最適化によって転送量を抑えたサブセットであり、ウェブ配信向けに整理された形です。

OS側でも和文バリアブルフォントの普及が進んでいます。2025年4月のWindows UpdateでNoto Sans JPがWindows 10/11に標準搭載され、Windows 11ではNoto Serif JPも同時に搭載されました。フォントファイル名はNotoSansJP-VF.ttfやNotoSerifJP-VF.ttfです。

Android 15（2024年10月リリース）からも、搭載されているNoto Sans CJK JPがバリアブルフォントになり、font-weightによる細かい太さの指定を反映できるようになりました。

名称の違いや環境別の導入方法は、記事『ウェブ制作者のためのNoto Sans JP最新実装ガイド』で整理しています。

Adobeからは2025年2月に「百千鳥」というレトロなスタイルのバリアブルフォントがリリースされています。

2025年2月日本語のバリアブルフォント「百千鳥」がついに登場！さらに Adobe Fontsのラインナップが大幅拡充しました

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

まとめ

本記事ではデジタルフォントの歴史を振り返りつつ、表現を広げるフォント技術「バリアブルフォント」について紹介しました。

バリアブルフォントは、主要ブラウザやフォント配信サービスで対応が進み、以前よりもずっと身近な存在になりました。「柔軟すぎる」という点では使いどころを選びますが、これまでのフォントでは難しかった表現が可能になります。

新しいウェブ体験を作る技術の一つとして注目していきましょう！

参考文献

モリサワ - フォント用語集
ウェブ上の可変フォントの概要 | Articles | web.dev
可変フォントガイド - CSS: カスケーディングスタイルシート | MDN
Adobe Typekit Blog - Variable fonts, a new kind of font for flexible design
Glyphs - Creating a Variable Font：バリアブルフォントの作り方の参考記事です

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

Google Fonts：Googleが提供するフォントライブラリで、無料で利用可能なフォントが多数収録されています。Noto Sans JP、Noto Serif JPなど和文のバリアブルフォントも配信されています。
Adobe Fonts：基本的には商用利用可能な高品質フォントが揃っていますが、ライセンスは注意が必要です。
Variable Fonts(beta)：名前の通り、有料無料問わず古今東西のバリアブルフォントが紹介されているサイトです
GitHub - TypeNetwork：実験的なオープンフォントライセンスのものが多く、試してみるにはもってこいのリポジトリです。Decovarのようなおもしろいバリアブルフォントが多数開発されているようです
AXISPARAX：バリアブルフォントの実験的なサイトです。ダウンロードはできませんが、さまざまなフォントを試すことができます。個人的にzyconというアイコンフォントがお気に入りです。