CSS TEXT MODULE LEVEL 5

Text Fit

文字数が変わっても、見出しはフレームいっぱいに。

CHECKING
01

LIVE HEADLINE STUDIO

文字とフレームを、同時に合わせる

GROW MODE 82 WIDTH
textfit.local / headline
FALLBACK ENGINEDRAG WIDTH ↔
EDITORIAL / 01ISSUE 066

Typography should respond to its frame.

CSS / 2026
ENGINEFALLBACK
MODEGROW
SCALE100%
LINES2

右端のハンドルをドラッグすると、同じ文字がフレームへ合わせ直されます。

ONE FRAME / THREE LENGTHS

文字数が変わっても、幅は揃う

GROW · CONSISTENT
SHORT

TYPE

MEDIUM

TYPE FOLLOWS

LONG

TYPE FOLLOWS THE FRAME

同じ`font-size`を決めるのではなく、それぞれの文字列に必要なスケールを計算します。

IMPLEMENTATION

現在の設定を持ち帰る

ブラウザの対応状況を確認しています。