Design Aesthetic Reference
Dynamic Axes • Fluid Weight • Kinetic Letterforms
A design aesthetic where typefaces are not static artifacts but living, breathing systems — shifting weight, width, and expression in response to viewport, interaction, and time.
Typography
Variable fonts with fluid axes replace static type families
Display / Roboto Flex
Fluid Type
Heading / Fraunces
Expressive Serif Headlines
Subheading / Outfit
Clean Geometric Subheadings
Body / Inter
Precise humanist sans-serif for long-form reading. Variable weight allows fine-tuned typographic color across every breakpoint.
Code / Recursive Mono
font-variation-settings: 'wght' 700;
Interactive / Recursive (hover me)
Casual to Linear Transition
Fraunces 800 + Inter 400
Expressive editorial serif meets precise Swiss sans
Roboto Flex + DM Sans
Dynamic expanded display with clean geometric body
Recursive Casual + Recursive Linear
Same family casual-to-linear shift for unified personality
Color Palette
Neutral surfaces let dynamic typography carry the visual weight
Components
Type weight, width, and expression as interactive states
Smooth interpolation from Thin to Black weight on hover, scroll, or time-based triggers creates organic emphasis shifts across the interface.
wght hoverThe wdth axis compresses or expands letterforms fluidly to fit containers, replacing abrupt font-size changes with graceful typographic reflow.
wdth responsiveThe opsz axis adjusts stroke contrast and detail level automatically — thicker strokes at small sizes, refined detail at large display sizes.
opsz legibilityIndividual letters receive staggered animation delays, creating cascading weight waves that ripple through words like kinetic sculptures.
animation staggerDesigner-defined axes like CASL (casualness), SOFT (softness), and WONK (wonkiness) add personality dimensions beyond standard weight and width.
CASL SOFTScroll position maps directly to font axis values, letting users explore the typeface's design space through natural page interaction.
scroll JSDesign Principles
Parametric thinking applied to every typographic decision
Typography is not decoration layered onto a layout; it is the layout, the interaction surface, and the primary visual expression. Variable font behavior replaces traditional hero imagery.
Prefer smooth interpolation across axis ranges over discrete jumps between fixed styles. The design space between a font's minimum and maximum values is a continuous, explorable landscape.
Because the typography itself is dynamic and expressive, surrounding elements — color, imagery, decoration — should be restrained. Neutral palettes let kinetic type carry the page.
Variable font features enhance the experience but degrade gracefully. Static fallback fonts must still produce a usable, attractive design. Performance is a feature, not a cost.
Visual Effects
All effects driven by font-variation-settings, no image assets
Looping wght 100-900 animation creates an organic, living typographic pulse.
Per-character delayed weight animation creates a cascading ripple effect.
The wdth axis sweeps from condensed to expanded, reshaping letterforms in place.
Recursive's CASL axis transitions from formal linear to playful casual letterforms.
Background-clip text with Fraunces opsz/SOFT axis animation for editorial drama.
Recursive's MONO axis flips between monospace and proportional spacing.
Interactive Elements
Weight and width shift on hover instead of color alone
Variable Typography rejects the notion that a typeface is a fixed artifact. It treats the design space between a font's minimum and maximum axis values as a continuous, explorable landscape.— The Variable Typography Manifesto
Variable Typography treats every typeface as a living system. Weight, width, optical size, and custom axes form a multidimensional space that responds to viewport, interaction, and time. Start with Roboto Flex, Inter, and Fraunces — then let the axes breathe.
Back to the Top