Variable Fontを試してみました

少し前にGoogle Choromeがバージョン62にアップデートしました。

その更新内容の中にOpenType Variable Font(バリアブルフォント)に対応したという内容があったので、面白そうだなと思い色々調べてみました。
そして、自分で試して見ることができたのでテストページを作ってみました。

こちらがテストページ
Variable Font test

Variable Fontとは

従来のフォントは文字の太さなどが何段階かに分けられて別々に提供されていて(図1)使用者はそれを選ぶという形でしたが、Variable Fontはそれが無段階で変えて使用することができるというものです。

(図1)イメージ図

テストページの解説

Google ChromeでVariable Fontを活用するにはCSSでそのための指定をします。

①Font

これは従来からあるCSS指定を使っています。

@font-face {
font-family: 'Avenir';
src: url(AvenirNext_Variable.ttf);
}

で準備をして、

font-family: Avenir;

と指定する感じです。

②size

これも従来からある

font-size: 10px;

と指定する感じです。

③wdth、wght、ital

これがVariable Font特有の部分です。

font-variation-settings: 'wght' 700, 'wdth' 75, 'ital' 0.5;

のように指定します。

wghtはweightの意味で文字の太さ、wdthはwidthの意味で文字の幅、italはitalicの意味で斜体の具合を指定する項目です。

ただし注意が必要なのはフォントによってどの項目が有効かが異なり、加えてどの数値の範囲をサポートしているかが異なることです。

テストページで使用したAvenir NextKairos Sansでは、
Avenir Nextの場合、wdthが75~100、wghtが400~900の範囲で有効、
Kairos Sansの場合、wdthが75~125、wghtが250~900、italが0~1の範囲で有効、
のようです。

CSS指定ではwdthは100(%)が標準、wghtは400が標準みたいなので、どの範囲をカバーするかはフォント次第という事みたいです。

④italic

これも従来からある指定方法で、チェックをONにすると

font-style: italic;

という指定をしています。

Kairos Sansで試してみると分かりますが、このfont-styleでの指定とfont-variation-settingsでのital指定の効果は重複するようで、両方を指定するとめっちゃ斜めになります。
まあ、イレギュラーな指定方法なので両方指定することは普通しないとは思いますが。

最後に

Variable Fontを試すにあたって、各種サイトや
Variable Fontについて – console.blog(self);
のページを参考にさせていただきました。

Variable FontのテストができるFontViewのWindows環境での使い方が分からなかったので、ブラウザでできる範囲でやっちゃえ!というのもテストページを作る動機でした。

Variable Fontを作る(従来のフォントをVariable対応にする)のは(日本語フォントだと特に)手間がかかりそうなので今後どれほど普及するのかは未知数ですが、Variable Fontを使う方の環境は各種ブラウザや各種ソフトの対応で徐々に整ってきたという感じでしょうか。

スポンサーリンク
レクタングル広告(大)




レクタングル広告(大)




シェアする

  • このエントリーをはてなブックマークに追加

フォローする