文字の太さや幅が躍動する！CSSテキストアニメーション「バリアブルフォント」5選

2026年2月27日

当ページのリンクには広告が含まれています。

Webデザインの最前線、「バリアブルフォント」をご存知ですか？ 1つのフォントファイルの中で、文字の「太さ」や「幅」を自由自在かつ無段階に操れるこの技術を使えば、文字自体が生きているようなアニメーションを作成できます。

この記事では、CSSの font-variation-settings を使い、文字の太さや幅がダイナミックに躍動するコードを5つ紹介します。複雑なJavaScriptは不要。コピペするだけで、あなたのSWELLサイトに最新トレンドのタイポグラフィ表現を取り入れることができます。

文字の太さや幅を「アニメーションで滑らかに変形」させるには、「バリアブルフォント（可変フォント）」という特殊なフォントを読み込む必要があります。SWELLの標準フォント（游ゴシックや通常のNoto Sansなど）では、太さが「細い⇔太い」とカクカク切り替わってしまい、滑らかに動きません。

そのため、今回のコードにはすべて、Google Fontsの優秀なバリアブルフォントである「Roboto Flex」を読み込むコード（@import）をCSSの1行目に含めています。そのままコピペするだけで、魔法のように滑らかな変形を体験できます。

Breathing Weight（ブリージング・ウェイト）

文字の太さ（wght）が、極細から極太へ、ゆっくりと呼吸するように変化し続けます。シンプルながらも、バリアブルフォントの滑らかさを最も実感できるエレガントな表現です。

調整方法

太さの範囲: @keyframes 内の "wght" の数値を変更します。一般的なフォントは100〜900ですが、Roboto Flexは1000まで対応しています。
スピード: animation の 3s を短くすると、鼓動のように速く変化します。

文字の「幅（wdth）」が、ゴムのように伸び縮みします。通常の transform: scaleX による引き伸ばしとは異なり、文字の線の太さを保ったまま幅だけが変化するため、非常に美しく仕上がります。

See the Pen Elastic Stretch by BaseKENT (@basekent) on CodePen.

調整方法

幅の限界値: Roboto Flexの幅（wdth）は 25（最も狭い）から 151（最も広い）まで設定可能です。数値を変更して好みのプロポーションを探してください。

風に煽られるように、文字の傾き（slnt）と太さ（wght）が連動して変化します。右に傾くほど太く力強くなり、起き上がると細くなります。ホバーで真っ直ぐに直立します。

See the Pen Kinetic Slant by BaseKENT (@basekent) on CodePen.

調整方法

一文字ずつ順番に太さが変化し、テキスト全体に波（ウェーブ）が起きているように見せます。位置が上下に動くわけではないのに、太さの変化だけで波を感じさせる高度なタイポグラフィ表現です。

See the Pen Variable Wave by BaseKENT (@basekent) on CodePen.

調整方法

波の滑らかさ: animation-delay の間隔（0.1s）を 0.05s にすると、より細かいウェーブになります。
浮き上がり: 太くなる瞬間に transform: translateY(-3px); を入れているため少し跳ねます。純粋に太さだけにしたい場合はこれを削除してください。