バリアブルフォントは、さまざまなフォントスタイルの連続的なバリエーション（異なる幅、ウェイト、サイズなど）を保存できる 1 つのフォントファイルです。
バリアブルフォントには、OpenType 1.8 仕様で導入された新しいデータ構造があります。このデータ構造により、フォントファミリーの 2 つ以上のスタイルを 1 つのフォントファイルにコンパクトにパッケージ化できます。
バリアブルフォントには 1 つのアウトラインセットが含まれており、データセットからほぼ無制限のインスタンスを派生させることができます。これは、フォント内のアウトラインバリエーションのセットを定義することによって行われます。このようにして、多くのフォントインスタンスを追加できる単一または複数軸のデザイン空間が構成されます。
バリアブルフォントを表示するには、Monotype Fonts の［ブラウズ］>［フォント］ページの［フィルター］セクションにある［バリアブルフォント］の［バリアブルフォントのみを表示］オプションを使用します。
注記：Monotype Fonts で利用可能な、すべてのバリアブルフォントには、のラベルが付いています。
静的フォントとバリアブルフォントの違い
下記の表で、静的フォントとバリアブルフォントの違いがわかります。
| 静的フォント | バリアブルフォント |
定義 | スタイルが固定されており、バリエーションごとに他のファイルが必要なフォント。 | 多くの書体バリエーションを 1 つのファイルに保存できるフォント。 |
バリエーションごとに違うファイル | あり | なし |
Web サイトのパフォーマンス向上 | なし | あり |
デザインの柔軟性 | なし | あり |
CSS トランジションをサポート | なし | あり |
圧縮 | なし | あり |
レスポンシブタイポグラフィ | なし | あり |
配布のしやすさ | なし | あり |
アクセシブルタイポグラフィ | なし | あり |
含まれるスタイルの数 | 1 つ | 複数 |
ブラウザのサポート | あり | ほとんどの Web ブラウザでサポートされている
注記：こちらをクリックすると、可変フォントをサポートしている Web ブラウザがわかります。 |
ダイナミックテキストの効果 | なし | あり |
バリアブルフォントのメリット
バリアブルフォントを利用するメリットは以下の通りです。
圧縮
バリアブルフォントのサイズは、そのバリアブルフォント内の同じスタイルの複数の静的フォントを個別に使用した場合の合計サイズよりも小さくなります。例えば、プロジェクトで3つ以上の静的フォントを別々に使う場合の合計サイズは、それらのスタイルをすべて含んだ1つのバリアブルフォントのサイズを上回ることがあります。バリアブルフォントに追加するスタイルが多いほど、その削減効果は大きくなります。
Web パフォーマンスの向上
Web サイトでは、1 つのバリアブルフォントファイルを読み込み、必要に応じて調整できます。これによって、Web サイトの読み込み速度とパフォーマンスが向上します。
配布のしやすさ
ダイナミックテキストの効果
バリアブルフォントは、CSS アニメーションまたはトランジションを使用してアニメーション化でき、フォントのウェイト、幅、傾斜、またはその他の属性を時間の経過とともに変化させるダイナミックテキスト効果を作成できます。
可変性の向上
幅広いスタイルをパッケージにして、1 つのフォントファイルに入れることができます。OpenType 1.9 仕様では、5 つの特定の軸にのタグを定義しています。
ウェイト
幅
オプティカルサイズ
イタリック（ローマンに対して）
斜体（ローマンに対して）
ただし、OpenType フォント仕様では、ユーザーが独自で定義した軸を使用することで、想像可能なあらゆるバリエーションを作成し、描画できます。
Monotype には、さまざまなウェイトや幅を含むように設計された多くのファミリーがあります。例えば、Helvetica Now、Cotford、Kairos Sans、Futura Now などです。
レスポンシブタイポグラフィ
バリアブルフォントを使用することで、レスポンシブタイポグラフィとアプリケーションの調整が可能になります。ウェイトやコントラストなどの変数を調整することで、特定のデバイスでのリーダビリティを最適化することができます。
クリエイティブ効率
バリアブルフォントは、柔軟かつ効率的で、創造的な可能性を秘めています。そのため、クリエイティブデザイナー向けの強力なリソースになります。
アクセシブルタイポグラフィ
読者とその環境に適応できるバリアブルフォントの多様なバリエーションを活用することで、より良い体験を提供することが可能です。
バリアブルフォントの制限
バリアブルフォントは、その用途によって、以下のような制限が生じる可能性があります。
バリアブルフォントは、複数のスタイルを圧縮した形式です。しかし、膨大なバリアブルファミリーから 2～3 種類のウェイトを使用したい場合などは、サイズの削減効果が失われる可能性があります。つまり、バリアブルフォントは、ファイルサイズを削減できる一方で、不要なバリエーションを多く含むことになると、サイズが大きくなってしまうのです。
すべてのフォントがバリアブル形式で使用できるわけではありません。
比較的新しいフォントデータは通常、補間が可能な形で描画されており、バリアブルフォントとして簡単に開発ができます。一方、比較的古いフォントは、静的デザインとして個別に描画されているので、軸の構造が多様で、補間可能なフォントとして簡単には構築できない場合があります。
例えば、Times New Roman は改変に適しません。それは、ストレスの方向性の変化や、小文字のセリフの形状と配置の変化により、不自然な補間を生むからです。
すべてのブラウザがバリアブルフォントに対応しているわけではありません。
詳細については、ブラウザのサポートを参照してください。
バリアブルフォントファイル内でフォントのバリエーションを調整するのは複雑な作業であり、CSSとバリアブルフォントのデザイン空間に関する十分な理解が必要です。
バリアブルフォントのブラウザサポート
当社の WOFF および WOFF2 フォントファイルは、すべての最新ブラウザでサポートされています。ブラウザやそのバージョンによって、対応形式が異なる場合があります。
WOFF のブラウザサポート
Internet Explorer 9+
Edge 12+
Firefox 3.6+
Chrome 5+
Safari 5.1+
Opera 11.5+
iOS Safari 5+
Android 4.4+
Blackberry 7+
Opera Mobile 12+
Chrome Android 70+
Firefox Android 63+
Internet Explorer Mobile 10+
UC for Android 11.8+
Samsung Internet 4+
QQ 1.2+
Baidu 7.12+
WOFF2 のブラウザサポート
Edge 14+
Firefox 39+
Chrome 36+
Safari 12+
Opera 23+
iOS Safari 10+
Android 67+
Opera Mobile 46+
Chrome Android 70+
Firefox Android 63+
Samsung Internet 4+
QQ 1.2+
Baidu 7.12+
バリアブルフォントのダウンロード
次の手順に沿って、Monotype Fonts プラットフォームからバリアブルフォントをダウンロードしてください。
同期とダウンロードのオプションアイコンをクリックし、必要なバリアブルフォントを選びます。
［ダウンロードのオプション］タブを開きます。
ダウンロードするファイル形式（CFF、TTF など）を選択します。
ダウンロードするフォントのウェイトとスタイルを個別に選択するか、［ファミリーのダウンロード］をクリックして、ファミリー全体をダウンロードします。
バリアブルフォントのインストール
Mac
Mac にフォントをインストールする手順は以下の通りです。
ダウンロードした .zip アーカイブをダブルクリックして、解凍します。
Mac へのフォントのインストール方法は、次の 2 つがあります。
フォントを有効にして、［Library］フォルダー内の［Fonts］フォルダーにファイルをドラッグします（Macintosh HD/Library/Fonts）。また、ショートカット（Cmd+Shift+G）も利用できます。
Font Book（Mac OS のフォント管理アプリケーション）を使用して、フォントをインストールします。
フォントをダブルクリックすると、Font Book ウィンドウが開きます。
［Install Fonts（フォントのインストール）］をクリックして、フォントをインストールします。
詳細については、Apple Web サイトのサポートセクション（http://support.apple.com/kb/HT2509）を参照してください。
新しくインストールしたフォントを使用するには、使用中のアプリケーションを再起動します。
Windows
Windows XP 以降：
.zip アーカイブを右クリックして、［Extract All（すべて解凍）］を選択します。選択した場所に、フォントを含む新しいフォルダーが作成されます。
その他のWindowsバージョン:
ローカルディスク（C:）› [Windows] › [Fonts（フォント）]へ移動します。ダウンロードした .zip ファイルから展開したフォルダーを探し、フォントファイルを Fonts フォルダーにドラッグします。
Windows 7 以降：
解凍したフォントファイルを右クリックし、［Install（インストール）］または［Install for All Users（全ユーザー向けにインストール）］を選択します。
新しくインストールしたフォントを使用するには、使用中のアプリケーションを再起動します。
バリアブルフォントの同期
フォントを同期させるには、フォントをブラウザのダッシュボードから Monotype デスクトップアプリに転送する必要があります。
Monotype デスクトップアプリに同期されたフォントやフォントファミリーは、ほとんどのクリエイティブアプリケーションで自動的に利用できます。ユーザーが個別のフォントファイルをダウンロードする必要はありません。
同期は、Monotype Fonts を通じてフォントにアクセスする主要な方法です。
次の手順に沿って、バリアブルフォントを Monotype デスクトップアプリに同期させます。
同期とダウンロードのオプションアイコンをクリックし、必要なバリアブルフォントを同期させます。
［Sync to Monotype App（Monotypeアプリと同期）］タブで、お好みのファイル形式（CFF、TTF など）を選択します。
個々のフォントのウェイトおよびスタイルを同期させるか、［Sync family（ファミリーを同期する）］をクリックして、ファミリー全体を同期させます。
バリアブルフォントの同期解除
バリアブルフォントの同期を解除する手順は、以下の通りです。
同期したバリアブルフォントの同期とダウンロードのオプションアイコンをクリックします。
［Sync to Monotype App（Monotype アプリと同期）］タブで［Unsync（同期解除）］をクリックします。
バリアブルフォントの利用
現在市販されているバリアブルフォントは、TTF 形式で作られています。バリアブルフォントをご注文の際に、対応する静的フォントのセットをリクエストすることもできます。これらのフォントは、バリアブルフォントと同時にインストールすることが可能です。
バリアブルフォントは、特にWebやデザインチームにとって有益かもしれません。バリアブルフォントは、静的フォントと比較して、ファイル全体のサイズを節約することができます。これは、特に Web アプリケーションにとって重要です。ファイルサイズの節約は、デザインとスタイルの数によって変わり、一般的には、ファミリー内のスタイルの数に比例します。また、可変フォントは、UI デザインチームに柔軟性をもたらします。