バリアブルフォントで遊ぼう

f:id:astamuse:20191024122921p:plain

はじめまして、フロントエンドエンジニアの minamo です。

趣味は映画鑑賞、特にアクション映画が大好きです。

今年は「イップ・マン外伝マスターZ」、「ジョン・ウィック : パラベラム」、「HiGH&LOW THE WORST」と最高アクション映画が豊作でうれしいですね。

2月に astamuse にジョインしてから初めてのブログで、好きな映画以外書くことが思い浮かばなかったのですが、最近「バリアブルフォントがおもしろい！」と思ったので、ご紹介します。

バリアブルフォントって何？

バリアブルフォントとは、Adobe・Apple・Google・Microsoftが共同で開発したフォントの規格です。 Variable = 可変フォントとも呼ばれていました。

通常のフォントは字幅やウェイト、斜体などによってファイルが分かれていますが、バリアブルフォントだとそれらが ひとつのフォントファイルで利用できる のが特徴です。

ほとんどはウェイトの調整だけですが、書体によっては傾斜やフォント自体の形状など独自の数値を調整することができます。

f:id:astamuse:20191024123412p:plain — Photoshop の画面。 "VAR" とついているのがバリアブルフォントですね。

Photoshop や Illustrator で利用でき、デザイナー向けの話題と思われがちですが、もちろん Web font としても利用できます。

バリアブルフォントを CSS アニメーションと組み合わせたら楽しいのでは？！と思い、色々遊んでみることにしました。

ドキュメント

まずは MDN Web Doc を読んでみましょう。

Variable フォントガイド

バリアブルフォントを CSS で設定するときのプロパティ font-variation-settings も合わせて。

ウェイトや斜体の数値をこのプロパティで設定していくようです。

font-variation-settings

バリアブルフォントの対応状況

caniuse によるとブラウザでの対応状況はこのとおり。ほとんど対応できています。

f:id:astamuse:20191024124014p:plain — https://caniuse.com/#search=variable%20fonts

バリアブルフォントをアニメーションさせてみよう

実際に動かしてみました。まずはかんたんに font-weight のアニメーションから。

f:id:astamuse:20191024145111g:plain — League Spartan Variable

ソースはこちら

// HTML
<h1 class="zycon">
  astamuse
</h1>

// CSS
@font-face {
  font-family: 'LeagueSpartan';
  src: url('/LeagueSpartanVariable.woff2') format('woff2-variations');
}

.leagueSpartan {
  font-family: 'LeagueSpartan';
  display: block;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
  animation: weight 2000ms infinite alternate;
}

@keyframes weight {
  0% {
    font-weight: 200;
  }
  100% {
    font-weight: 900;
  }
}

もうちょっとバリアブルフォントっぽいことがしたい！

font-weight 以外も動かしてみましょう。

さきほどの font-variation-settings でバリアブルフォント独自の数値を設定することができます。

f:id:astamuse:20191024145650g:plain — Handjet

// HTML
<h1 class="handjet">
  astamuse
</h1>

// CSS
@font-face {
  font-family: 'Handjet';
  src: url('/Handjet-VF.woff2') format('woff2-variations');
}

.handjet {
  font-family: 'Handjet';
  display: block;
  font-size: 100px;
  color: #35495e;
  animation: digit 2000ms infinite alternate;
}

@keyframes digit {
  0% {
    font-variation-settings: 'wght' 1, 'wdth' 400, 'opsz' 100;
  }
  100% {
    font-variation-settings: 'wght' 80, 'wdth' 400, 'opsz' 100;
  }
}

wght = font-weight のこと、など独自の値があります。

Dingbats（装飾記号）のバリアブルフォントもあるので、こっちの方がおもしろいかも。

f:id:astamuse:20191024145636g:plain — Zycon

// HTML
<h1 class="zycon">
  🐈
</h1>

// CSS
@font-face {
  font-family: 'Zycon';
  src: url('/Zycon.ttf');
}

.zycon {
  font-family: 'Zycon';
  display: block;
  font-size: 100px;
  color: #35495e;
  animation: meow 2000ms infinite alternate;
}

@keyframes meow {
  0% {
    font-variation-settings: 'T1  ' 0;
  }
  100% {
    font-variation-settings: 'T1  ' 1;
  }
}

ねこちゃんかわいいですねえええええ！！

ローディングアニメーションにもいいんじゃないでしょうか！