Variable Fontを用いた”滑らかに変化する文字”のコードスニペット8選

フォントのスタイルを自由自在に変化させられる「Variable Font（バリアブルフォント）」は、Webタイポグラフィ界におそらく過去最大のインパクトを与えました。

Variable Fontとは、ひとつのファイルであらゆる太さ、文字幅、高さ、角の丸さ、コントラスト等を変更できる、可変性の高いフォント規格です。

現段階ではバリエーションや対応ブラウザなどの課題があるものの、近いうちに解決されるはず。いまのうちから研究しておきたいものです。

今回は、Variable Fontの可能性が伝わる8つのコードスニペットをご紹介します。

※2019年12月時点では、Chrome、Edge、Firefox、Opera、Safariの最新バージョンのみ動作可能です

1. グリフの馬が走る

『Font Awesome』や『Dashicons』の人気からも分かるように、近年大活躍している「グリフ（絵文字）」。

以下の作品では、CSSのfont-variation-settingsを使用して、馬のグリフに滑らかな動きをつけています。

See the Pen Muybridge galloping horse by Laurence Penney (@lorp) on CodePen.

2. 文字の太さが変化

Variable Fontの大きなメリットとして、1つのフォントファイルでさまざまな文字デザインをつくれることが挙げられます。

以下の作品では、Variable Fontである『IBM Plex Sans』の太さを滑らかに変化させています。

See the Pen Variable font animation by Michelle Barker (@michellebarker) on CodePen.

3. フォントを使ったインタラクティブアート

Variable Fontはアートの一部としても活用できます。

以下の作品は、文字を並べてポスターのようにしたものに、動きをプラスしています。文字の滑らかな変化が、見る人の目を惹きつけます。

かつてはこうしたアニメーションを作るのは大仕事でしたが、Variable Fontなら簡単に実装できます。

See the Pen Variable Font Experiment No.2 by Mark Frömberg (@mark2mark) on CodePen.

4. スライダーでスタイルを調整

Variable Fontの特徴を捉えるのにぴったりなのがこちらの作品。

画面の下部にあるスライダーを使って、Variable Fontである『Venn VF』の太さ、間隔、大きさを調整できます。

See the Pen Variable font demo by Frida Nyvall (@fridanyvall) on CodePen.

5. 文章のスタイルを変更

一見ただの文章に見えるこの作品。じつは右下の2つのボタンをクリックすると、文字のスタイルが変化します。

それぞれの文字をどのように変化させられるかが、ひと目でわかりますね。

See the Pen Goblin Market with Variable Fonts by Chris Coyier (@chriscoyier) on CodePen.

6. アニメーションつきハイライト

いくつかの単語の太さが、すこしだけ違うのがわかるでしょうか。これらの単語にカーソルをあわせると、アニメーションによって文字が強調表示されます。

Intersection Observerが使われているところもポイントです。

See the Pen Variable font – Animated over (weight) by Villads Claes (@villadsclaes) on CodePen.

7. Variable Fontの魅力全部のせ

Variable Font、CSS3、JavaScriptを組み合わせた作品。カーソルをあわせると文字の太さが変わり、なめらかに伸縮します。

右上のパネルの設定を変更すれば、エフェクトの内容を変更可能です。

See the Pen Variable Fonts | Compressa by Juan Fuentes (@JuanFuentes) on CodePen.

8. スリンキーな文字

最後にご紹介するのは、階段をおりていくバネのおもちゃ「スリンキー」を思わせるユニークな作品。Variable Fontである『WHOA』を使って、カーソルの位置にあわせて3Dのような効果を実現しています。

数年前にこうしたエフェクトを実装しようと思ったら、本格的なアニメーションソフトウェアが必要でした。いま必要なのは、数十行程度のコーディングだけです。

See the Pen Slinky Text – WHOA Variable font demo by Jérôme Sprenger Sèvegrand (@jss-the-selector) on CodePen.

おわりに

Variable Fontの登場によって、Webタイポグラフィの可能性はさらに広がりました。

Variable Fontはまだ世に出たばかり。これからも新たな活用方法が続々と開発されていくはずです。Webデザイナーにとって、目が離せない存在になりそうですね。

執筆：Eric Karkovack
翻訳：Nakajima Asuka
編集：内田一良（じきるう）

こちらもおすすめ！▼