astamuse Lab

astamuse Labとは、アスタミューゼのエンジニアとデザイナーのブログです。アスタミューゼの事業・サービスを支えている知識と舞台裏の今を発信しています。

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

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;
  }
}

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

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

f:id:astamuse:20191024145705g:plain
いぬもかわいいです!

バリアブルフォントで遊べるサイト紹介

現在公開されているバリアブルフォントを閲覧できるサイトがあります。

数値をグリグリ調整してるだけで飽きずに遊べちゃいますよ。

Variable Fonts

数が多いですが、調子にのって遊んでいると重くなります。

Font Playground -- Play with variable fonts!

直感的な UI で数値をいじれます。

お気に入りのバリアブルフォント

f:id:astamuse:20191024144205p:plain
Fit

見たまま・超・カッコイイです。ラグランパンチっぽいですね。

f:id:astamuse:20191024144212g:plain
Pappardelle Party

ペカペカできて楽しい!かわいい!

未来へ

和文のバリアブルフォントはあるの?ということが気になると思います。日本人なので。

現時点(2019年10月)で調べた限り、ちょっと見つかりませんでした。。 バリアブルフォントでドープな日本語のサイトを作れる日はまだのようです。

モリサワの「タイプデザインコンペティション 2019」でもバリアブルフォント部門の募集があったそうですが、受賞作品…該当なし!ないんかい!

なんだかしまらないですが、astamuse ではいつでもエンジニア&デザイナーを募集しています。

日本語のバリアブルフォントあるよ!というツッコミのついででも良いので、おきがるにどうぞ!

Copyright © astamuse company, ltd. all rights reserved.