はじめまして、フロントエンドエンジニアの minamo です。
趣味は映画鑑賞、特にアクション映画が大好きです。
今年は「イップ・マン外伝マスターZ」、「ジョン・ウィック : パラベラム」、 「HiGH&LOW THE WORST」と最高アクション映画が豊作でうれしいですね。
2月に astamuse にジョインしてから初めてのブログで、好きな映画以外書くことが思い浮かばなかったのですが、最近「バリアブルフォントがおもしろい！」と思ったので、ご紹介します。
バリアブルフォントって何？
バリアブルフォントとは、Adobe・Apple・Google・Microsoftが共同で開発したフォントの規格です。 Variable = 可変フォントとも呼ばれていました。
通常のフォントは字幅やウェイト、斜体などによってファイルが分かれていますが、バリアブルフォントだとそれらが ひとつのフォントファイルで利用できる のが特徴です。
ほとんどはウェイトの調整だけですが、書体によっては傾斜やフォント自体の形状など独自の数値を調整することができます。
Photoshop や Illustrator で利用でき、デザイナー向けの話題と思われがちですが、もちろん Web font としても利用できます。
バリアブルフォントを CSS アニメーションと組み合わせたら楽しいのでは？！と思い、色々遊んでみることにしました。
ドキュメント
まずは MDN Web Doc を読んでみましょう。
バリアブルフォントを CSS で設定するときのプロパティ font-variation-settings も合わせて。
ウェイトや斜体の数値をこのプロパティで設定していくようです。
バリアブルフォントの対応状況
caniuse によるとブラウザでの対応状況はこのとおり。 ほとんど対応できています。
バリアブルフォントをアニメーションさせてみよう
実際に動かしてみました。 まずはかんたんに font-weight のアニメーションから。
ソースはこちら
// 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 でバリアブルフォント独自の数値を設定することができます。
// 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（装飾記号）のバリアブルフォントもあるので、こっちの方がおもしろいかも。
// 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;
}
}
ねこちゃんかわいいですねえええええ！！
ローディングアニメーションにもいいんじゃないでしょうか！
バリアブルフォントで遊べるサイト紹介
現在公開されているバリアブルフォントを閲覧できるサイトがあります。
数値をグリグリ調整してるだけで飽きずに遊べちゃいますよ。
数が多いですが、調子にのって遊んでいると重くなります。
Font Playground -- Play with variable fonts!
直感的な UI で数値をいじれます。
お気に入りのバリアブルフォント
見たまま・超・カッコイイです。ラグランパンチっぽいですね。
ペカペカできて楽しい！かわいい！
未来へ
和文のバリアブルフォントはあるの？ということが気になると思います。日本人なので。
現時点（2019年10月）で調べた限り、ちょっと見つかりませんでした。。 バリアブルフォントでドープな日本語のサイトを作れる日はまだのようです。
モリサワの「タイプデザインコンペティション 2019」でもバリアブルフォント部門の募集があったそうですが、受賞作品…該当なし！ないんかい！
なんだかしまらないですが、astamuse ではいつでもエンジニア＆デザイナーを募集しています。
日本語のバリアブルフォントあるよ！というツッコミのついででも良いので、おきがるにどうぞ！
