dynamic-typography

Dynamic Typography (L2: Motion Mechanics)

Use when typography changes over time or in response to input, state, viewport, scroll, or pointer. Motion must communicate something the reader benefits from; spectacle is not a job. Concentrate dynamic behavior in headings, navigation labels, controls, status text, metrics, and display type; keep reading text stable while it is being read.

Entry condition

Verify the interface works as a static typographic composition before adding motion. If hierarchy, measure, contrast, semantics, or copy are weak, fix them first: animation is a multiplier and amplifies confusion with the same efficiency as clarity.

What type motion may communicate

A typographic change should serve at least one job:

1. state: hover, focus, selected, active, loading, success, error
2. hierarchy: direct attention or signal a change in importance
3. continuity: show one typographic object becoming another
4. progress: encode a bounded process or data change
5. navigation: tell the reader where they are or where an interaction leads
6. responsive adaptation: fit width, optical size, weight, or spacing to the space
7. expressive delight: character, only after functional needs are met

If an effect does none of these, challenge whether it belongs. When motion encodes data (severity, intensity), typography must not be the sole channel: pair it with the numeric value, a label, or a color-independent marker.

Effect-family selection ladder

Prefer the least disruptive mechanism that communicates the change. Perceptual cost, lowest to highest:

1. color or decoration change
2. grade or subtle weight change
3. style or slant change
4. width or tracking change
5. scale or position change (transform)
6. per-letter transforms
7. continuous or scroll-driven kinetic composition

Do not start at rung 7 because the font file makes it possible. Match the family to the job before choosing a library:

• Axis modulation: animate weight, grade, width, slant, optical size, or custom axes for state, emphasis, and responsive fit.
• Reveal and occlusion: clip, mask, or translate a wrapper while the real text stays in the DOM; entrances and disclosure that never delay essential information.
• Object motion: move whole words, lines, or headings with transforms; preserve identity across UI states (View Transitions as progressive enhancement, with a correct semantic source and destination).
• Timeline-driven: bind a bounded change to scroll or view timelines; native scroll-driven animation is enhancement, not baseline, and a JS fallback must not recreate motion the user asked to reduce.
• Scripted orchestration: WAAPI or a dedicated library only when several text objects must coordinate, interrupt, reverse, or track live input; do not import a large dependency for a single hover transition CSS already handles.