キネティックタイポグラフィ：文字がウェブの主役になった経緯

バリアブルフォント、スクロール連動アニメーション、ビューポート基準のサイズ指定により、かつて写真が必要だったページを文字が支えられるようになりました。軽く、速く、アクセシブル——そして失敗しやすい。

Written and reviewed by Artem Palamarchuk, Founder of BLEX STUDIO.

タイポグラフィは脇役をやめた

20年間、ヒーローセクションは「写真の上に言葉」でした。感情の仕事は写真が担い、文字がそれを説明する。この関係は逆転しました。よくできたサイトの多くで、いまや文字そのものがビジュアルです。ビューポートに合わせて拡大し、スクロールに反応し、ウェイトと幅がリアルタイムで変わる。写真は主役ではなく、裏づけの役割に移りました。

これは単なる美意識の揺り戻しではありません。流行の選択が技術的にも優れている、珍しい種類のトレンドです。画像がメガバイト単位である一方、文字はキロバイト。スクリーンリーダーにも機械にも読め、ピクセル化せず、別のアセット処理なしにどんな画面にも適応します。

何が「キネティック」にするのか

バリアブルフォント。 ウェイト、幅、光学サイズの連続的な範囲を1ファイルに収めたもの。従来6ファイル読み込んでいたものが1リクエストになり、軸を滑らかにアニメーションできます。

ビューポート基準のサイズ。 `clamp()`と`vw`により、ブレークポイントを積み上げずに見出しが画面幅いっぱいに収まります。

スクロール連動アニメーション。 CSSのスクロール連動アニメーションは、毎フレーム再計算するJavaScriptのリスナーなしに、変形をスクロール位置へ結び付けます。

構造としてのタイポグラフィ的コントラスト。 大きなディスプレイ書体とメタデータの等幅書体の対比だけで、装飾ゼロの階層が作れます。