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

Variable Font(バリアブルフォント)
無料のメールマガジンに登録

毎週月曜日に、フリーランス向けニュースまとめをお届けします。 プライバシーポリシーはこちら

フォントのスタイルを自由自在に変化させられる「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.default

2. 文字の太さが変化

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7. Variable Fontの魅力全部のせ

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

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

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

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.default

おわりに

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

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

 

執筆:Eric Karkovack
翻訳:Nakajima Asuka
編集:内田一良(じきるう)

 

こちらもおすすめ!▼

34,000人以上が使う!日本最大級のフリーランス・副業向けマッチングサービス『Workship』

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・副業向けマッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!

  • 34,000人以上のフリーランス、パラレルワーカーが登録
  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 公開中の募集のうち60%以上がリモートOKのお仕事
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

利用料は一切かかりません。一度詳細をのぞいてみませんか?

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。また、本メディア内に掲載されているリンクには、アフィリエイトURLが含まれる可能性があります。

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ