変幻自在な未来のフォント「バリアブルフォント」

バリアブルフォント／Variable Font

バリアブルフォント／Variable Font

f:id:mojiru:20190122165635p:plain

バリアブルフォント（Variable Font）とは、Adobe・Apple・Google・MicrosoftといったIT業界の巨人ともいえる会社が共同で開発したOpenTypeフォント。かいつまんでいえばフォントの太さや幅、高さ、コントラスト、角丸などを調整できるフォントのこと。

また、バリアブルフォントに関してAdobeタイプデザイナーであるジョン・ハドソン氏は「ひとつのフォントファイルでありながら複数のフォントのように利用できる」フォントと定義している。

通常のフォントはフォントのウェイト（太さ）を変更する場合はそれぞれのフォントファイルを読み込む必要があるが、「バリアブルフォント（Variable Font）」を使用すればアルゴリズムを使用して1つのフォントファイルから太さや高さを変更できるため、データ容量の縮小につながる。ウェイトバリエーションの少ないフォントに関しても、ウェイトのバリエーションを増やせるなどの利点もある。

話題の「バリアブルフォント」がIllustratorとPhotoshopで使えるようになった！

f:id:mojiru:20190122165251p:plain

Illustrator CC 2018とPhotoshop CC 2018にバリアブルフォントが搭載され、簡単にフォントの字幅や線幅、傾斜のデザインの変更が可能になったので実際にIllustratorで使用してみた。

Illustratorには、「Acumin Variable Concept」「Bahnschrift」など2019年1月現在、9書体が搭載されている。

f:id:mojiru:20190122165235p:plain

これらの「バリアブルフォント」は、コントロールパネルでボタンをクリックするとスライダーコントロールを使用して文字を調整できる。

f:id:mojiru:20190122165216p:plain

▼「バリアブルフォント（Variable Font）」線の太さを変えてみた。

f:id:mojiru:20190122164804p:plain

▼「バリアブルフォント（Variable Font）」幅を変えてみた。

f:id:mojiru:20190122164742p:plain

▼「バリアブルフォント（Variable Font）」傾斜を付けてみた。

f:id:mojiru:20190122164657p:plain

▼Photoshopでは文字パネルでバリアブルフォントを選択すると属性パネルで幅や傾斜を調整できるようになる。

f:id:mojiru:20190122170220p:plain

Windows 10プレビュー版にVariable Font（バリアブルフォント）「Bahnschrift」が実装

Variable Fontを使ったレスポンシブレンダリングの例

米Microsoft Corporationは2017年8月23日に「Windows 10 Insider Preview」Fastリングの参加ユーザーに対してビルド16273を公開した。

このBuildにて、Windowsで初めてVariable Font（バリアブルフォント）「Bahnschrift」が実装された。

Variable Font（バリアブルフォント）「Bahnschrift」の特徴

Variable Font（バリアブルフォント）「Bahnschrift」

従来のフォントは、標準とBOLD（太字）の2種類のウェイトしか使えず、それ以上に細いストロークもしくは太いストロークを使用したい場合は同じフォントファミリーの別フォントを用意する必要があったが、Microsoft、Google、Adobe、Appleらが共同で開発した新しい仕組みのフォント「Variable Font」は、1つのフォントファイルでありながらユーザーがウェイトを自由に変更できる。

Variable Fontを使ったレスポンシブレンダリングの例

Adobe Typekit Blogより引用

Variable Fontを使ったレスポンシブレンダリングの例

「Variable Font」の特徴として、ウェイトを変更しても文字幅が変わらないためレイアウトの変更が不要になるというメリットやウェイトを変えられるためファイルサイズも小さいといった利点がある。

将来的には静的フォントが「Variable Font」に置き換わることも期待されている。

▼外部リンク：バリアブルフォント（Variable Font）参照記事

hacks.mozilla.org

ブラウザ「Firefox 62」がVariable Font（バリアブルフォント）に対応

f:id:mojiru:20180928081932p:plain

Mozillaは2018年9月4日に「Variable Fonts Arrive in Firefox 62 - Mozilla Hacks｜the Web developer blog」内で、Firefox 62にVariable Font（バリアブルフォント）のデフォルトサポートを追加した事を発表した。

FirefoxがVariable Fontに対応した事で、主要ブラウザのすべてがデフォルトでVariable Font（バリアブルフォント）をサポートしたことになる。

f:id:mojiru:20180928081957p:plain