のぐそんブログ

暗いおじさんがシコシコ書くブログです。

Variable Font について調べる

Variable Font (バリアブルフォント)とは

アドビとマクロソフト、グーグル、そしてアップルが共同で開発を進めてきたテクノロジー。 1つのフォントで複数の役割を担うフォント。

1つのフォントで複数フォントを表示できるが、ファイルサイズはそれほど大きくはならず、複数フォントを読み込むよりフォントサイズを削減できる。

WEBで利用する際も通信回数が減るためデータの容量も減らせますし、設定できるプロパティの増える。 また、レスポンシブレンダリングという技術が採用されているようで、レスポンシブデザインをフォントまで適応させることができるようになるようです。

イラストレータで使ってみる

バリアブルフォントはIllustratorphotoshopなどでも利用できます。

バリアブルフォントはフォントのアイコンのところに「VAR」が表示されます。

プロパティパネルのフォントから「バリアブルフォント」ボタンを押します。

バリアブルフォントの設定パネルが表示され、「線の太さ」、「幅」、「傾斜」を設定できます。

まとめ

Illustratorでバリアブルフォント調整用のスライダーをいじっていて、フォントのモーフィングのようなアニメーションもできそうな気がしました。