無限にフォントが作れる！？フォントの概念を大きく変える「Variable Font」とは

2018年05月28日

デザイン

会員登録してブックマークしましょう

Webデザイナーの方は「Variable Font」という言葉を聞いたことがあるでしょうか。

Variableは、名詞で「変数」、形容詞で「可変の」を意味する言葉です。
通常、フォントには決まった形の文字が収録されており、太さや幅を変える場合には別のフォントファイルを読み込む必要がありました。

Variable Fontを使うと、1つのフォントファイルを使って、ファイルサイズを拡大することなく、太さや幅などの属性を無限に変更することができるようになります。

これまでの固定的で動かないフォントとは対照をなす、全く新しい概念です。
今回は、「Variable Font」について知っておきたいことをご紹介します。

フォントの概念を大きく変える「Variable Font」

Variable Fontは、これまでのフォントの概念を大きく変える、文字どおり「可変の」フォントです。

Variable Fontのレスポンシブレンダリング / 画像引用元：Erik van Blokland

デザイナーのジョン・ハドソン氏の定義を借りれば、Variable Fontとは「複数のフォントを表示できるような挙動が可能な単一のフォントファイル」を表します。

デザイナーであれば、通常のフォントファミリーには、レギュラー書体、イタリック書体、ボールド書体、場合によってはセミボールド書体などが存在することは知っているでしょう。
また、今日の多くの書体には300や500、「Condensed」や「Extended」といった、さまざまな太さや幅のフォントが存在しています。

Variable Fontなら変幻自在に変えられます / 画像引用元：Microsoft

しかし、フォントファイルをいちいち読み込んでいくのは生産的とは言えません。
Variable Fontは、「デザインスペース」(Design Spaces)と呼ばれる仮想空間で、太さや幅などを自由自在に変えながら表示することを可能にしました。

3軸のデザインスペース / 画像引用元：John Hudson

実業務をやっているとｍボールドよりは細く、セミボールドよりは太くしたい、と思うことがあるのではないでしょうか。
そんなニーズにも、Variable Fontは応えてくれるでしょう。

Variable Fontのサポート状況

Variable Fontの概念は2016年9月にAdobe Typekitのチームが発表した概念で、AdobeによってVariable Fontのプロトタイプが発表されています(開発はAdobe・Apple・Google・Microsoftが共同)。

Variable Fontのサポートについては、下記の通りです。

1. Safari

macOS 10.13 High Sierra以降のSafari 11以降でサポート。
また、モバイルではiOS 11.0以降のSafariでサポート。
つまり、macOSもiOSも最新版にアップデートすることで、Variable Fontを使えるようになっています。

2. Chrome

2017年8月上旬のアップデートで、Chromeの開発者版であるChrome Canaryで動作をサポートしています。
Chrome Canaryはほぼ毎日アップデートされているため、そのままダウンロードしていただくことでVariable Fontを確認できます。

3. Firefox

Firefoxでは、Variable Fontの表示に設定が必要です。
プレリリース版のページでFirefox Developer Edition(推奨)かFirefox Nightyをダウンロードし、URLの窓に「about:config」を打ち込みます。
「layout.css.font-variations.enabled」と「gfx.downloadable_fonts.keep_variation_tables」をTRUEに、「gfx.downloadable_fonts.otl_validation」をFALSEにすると、Variable Fontを確認することができます。

Variable Fontを使ってみよう

対応ブラウザはダウンロードできましたか？
実際に、Variable Fontを使ってみることにしましょう。

1. Variable Fontをダウンロード

Variable Fontはまだ発展段階なので、Adobe Typekitなどの主要フォントベンダーサイトではまだ提供されていませんが、Adobe Typekitチームが先陣を切っていくつかのVariable Fontをダウンロードできるようにしています。
また、macOSの最新版でも「Skia」、Windows 10 Previewの最新版でも「Bahnschrift」というVariable Fontがインストールされています。

Adobe Typekit

・Adobe Variable Font Prototype
・Source Sans Pro (Source Sans Variable)
・Source Serif Pro (Source Serif Variable)
・Source Code Pro (Source Code Variable)

これらのファイルをダウンロード＆インストールすれば、設定後対応ブラウザで作動を確認することができます。

2. CSSの設定

CSSに関しては、Variable Font用の新しいプロパティが用意されています。
それが、font-variation-settingsです。

画像はイメージ / 画像引用元：Design mode

font-variation-settingsは、Variable Font(OpenType、またはTrueType)の各バリエーションを利用します。
従来のフォントファイルでは、太さや幅を変えるには複数のファイルが必要でしたが、1つのファイルに様々なバリエーションを含め、ユーザー側で自由に調整できるように軽量化しています。

「"機能名" 値」を1組とし、複数指定する場合はコンマ区切りを行います。
normalを指定した場合、フォントは何も変形されません。

当然のことながら、フォントはVariable Fontに対応したものでなければいけません。
ここでは、macにインストールされている「Skia」というフォントを例にとって、設定をしてみましょう。

まず、font-familyプロパティにVariable Fontを設定します。
外部ファイルを読み込む場合は、そのコードをWebフォントを使うのと同じ手順で読み込んでください。

p {
　　font-family: Skia, sans-serif ;
}

次に、「"機能名" 値」という形式で値を指定します。
下記は、太さを500・幅を45としたときの例です。

p {
　　font-variation-settings: "wght" 500, "wdth" 45 ;
}

これらの機能名の代表的なものは、以下の通りです。

・wdth：フォントの幅(Width)・初期値は100
・wght：線の太さ(Weight)・初期値は400
・Opsz：オプティカルサイズ(Optical Size)・初期値は12(単位はptですが単位はつけずに指定します)
・ital：イタリック(Italic)・0(ノンイタリック)か1(イタリック)で指定
・slnt：スラント(Slant) ＝フォントの傾斜・-90から90の間で指定

以上の設定を行うことで、ブラウザでレスポンシブなフォントを利用することができます。
アニメーションのプロパティを組み合わせれば、面白いことができるかもしれません。