Fundamentals

Buttons Text & Typography Forms Navigation & UI Loading

Design & Visuals

Backgrounds Glass & Morphism Visual Effects Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Depth Cursors

Gallery & More

Cards & Layouts Gallery & Media Data & Visualization Atmosphere Utilities
All Effects New Favorites Templates Blog Tips ✨ Go Premium
Text✨ Premium

Wonky Headlines

Fraunces variable font animated in pure CSS — the 4 axes WONK, SOFT, opsz, and wght transition smoothly between expressive display and readable text.

CSSFrauncesWonk

You'll get access to the interactive demo with a free account.

This effect is part of Effect.Labs — 811 vanilla effects, some free, some premium. Text has 56 effects, including 4 free. Explore the category →

View in catalogue Free account

3 usage examples

Digital magazine cover — Animated front-page headline — Wonky Headlines example 1

① Digital magazine cover — Animated front-page headline

WhenAn online publication or editorial portfolio home page loads: the large Fraunces headline oscillates between its exaggerated display state and its restrained text state.
WhyThe WONK axis exaggerates serif curves only at large optical sizes (opsz 144) — invisible at 12 pt, spectacular at 80–120 px. A full-width banner is the ideal surface to reveal the effect's full range.
Settingsfont-size 4–6 rem, animation-duration 5 s for a slow breath, wght 900 → 300 to maximize weight contrast.
Creative studio hero — Brand name in motion — Wonky Headlines example 2

② Creative studio hero — Brand name in motion

WhenA design studio, agency, or typographer presents their name or tagline in a full-screen hero: the title loops to assert visual identity.
WhyThe WONK 1 → 0 transition evokes the tension between sketch and mastery — a visual metaphor for the creative process. The font reads as character, not a gimmick.
Settingsfont-size 4–6 rem, brand color (e.g. #e8d5b0 ivory), animation-duration 3.5 s, remove .vf-wonky-text--alt for a clean single-line look.
Author page — Name as expressive centrepiece — Wonky Headlines example 3

③ Author page — Name as expressive centrepiece

WhenAn author, artist, or speaker's home page loads: the large-format name loops between its exaggerated display state (WONK 1, wght 900) and its measured text state (WONK 0, wght 300), playing on the person's personality as much as on legibility.
WhyThe WONK and SOFT axes give Fraunces an organic expressiveness that evokes handwriting and a personal signature — precisely what a personal page should project. At 4–5 rem, the 900 → 300 weight oscillation reads as a breathing motion, not a glitch. The frozen subtitle in .vf-wonky-text--alt anchors the reading without competing with the name.
Settingsfont-size 4–5 rem, ivory color #f0ebe0 or the author's signature color, animation-duration 5 s for a slow breath, .vf-wonky-text--alt subtitle at 0.8 rem (WONK 0, wght 300).

How it works

The effect relies on the Fraunces variable font and its experimental WONK axis (0 = classic stroke, 1 = exaggerated curves evoking fresh ink) paired with SOFT (counter aperture, 0–100). These two custom axes, unique to Fraunces, give the typeface a personality tunable entirely in CSS.

The @keyframes vfWonky animation simultaneously oscillates all 4 font-variation-settings values: from "WONK" 1, "SOFT" 100, "opsz" 144, "wght" 900 (heavy display, large optical size) to "WONK" 0, "SOFT" 0, "opsz" 9, "wght" 300 (light text, small optical size) and back. The ease-in-out curve over 4 s creates a continuous typographic breath rather than a hard jump between two states.

Two CSS modifiers split responsibilities: .vf-wonky-text--anim receives the infinite animation; .vf-wonky-text--alt locks the text state (WONK 0, SOFT 0, opsz 9, wght 300) for a contrasting static subtitle. There is no JavaScript in this effect — compatible with any static site generator or SSR framework without client-side hydration.

Accessibility

  • prefers-reduced-motion absent: the code contains no prefers-reduced-motion media query. The animation loops even if the OS signals a reduced-motion preference. Add this to your stylesheet: @media (prefers-reduced-motion: reduce) { .vf-wonky-text--anim { animation: none; } }.
  • Text is native HTML (<span>) — screen readers read it normally, no extra ARIA attributes needed.
  • Contrast: white #fff text on a dark #0a0a0f background — WCAG AA ratio far exceeded (>18:1).
  • No keyboard or mouse interaction (pure CSS) — no event handlers, no focus trap.
  • Font fallback: if Fraunces fails to load, the browser's serif fallback preserves readability; font-variation-settings is silently ignored.

Browser compatibility

Requires font-variation-settings (CSS Fonts Level 4) and a variable font. Fraunces is served by Google Fonts.

Chrome 66+✓ Full
Firefox 62+✓ Full
Safari 11+✓ Full
Edge 79+✓ Full
Mobile iOS 11+✓ Full
Android Chrome 66+✓ Full

Without <code>font-variation-settings</code> support, Fraunces renders in its default static instance (Regular 400) — text stays readable, the animation is ignored without a JS error.

The code

HTML structure to paste into your page (CSS + JS available with a premium account):

index.html — structure 
<div class="vf-wonky-scene">
  <!-- Animated heading: loops between display and text state -->
  <span class="vf-wonky-text vf-wonky-text--anim">Your heading</span>

  <!-- Optional subtitle locked in text state (wght 300, WONK 0) -->
  <span class="vf-wonky-text vf-wonky-text--alt">Subtitle or axis label</span>
</div>
🔒 Unlock the full code — from €2.99 the first month

Full HTML + CSS + JS, copy-paste ready — with hundreds of premium effects.

Customize

Options passed to the API or data-* attributes:

Option / propertyDefaultEffect
animation-duration (.vf-wonky-text--anim) 4s Duration of one WONK→text→WONK cycle. Slow to 6–8 s for a contemplative feel, speed up to 2 s for a dynamic presentation.
animation-timing-function (.vf-wonky-text--anim) ease-in-out Easing curve. linear gives a mechanical oscillation; cubic-bezier(0.4,0,0.2,1) accentuates the holds at both extremes.
font-size (.vf-wonky-text) 2rem Text size. The opsz axis oscillates between 9 and 144 — the larger the font-size, the more visible the difference between the two states.
color (.vf-wonky-text) #fff Text color. Apply your brand color or a CSS gradient (background-clip: text) for a richer look.
"WONK" (keyframe 0% and 100%) 1 Max Wonk axis value. 0 = standard stroke, 1 = exaggerated curves. Reduce to 0.5 for increased subtlety.
"SOFT" (keyframe 0% and 100%) 100 Counter aperture at display state. 0 = closed counters, 100 = open counters (airier appearance).
"wght" (keyframe 0% and 100%) 900 Weight at display state. Reduce to 700 for less dramatic weight contrast.
"opsz" (keyframe 50%) 9 Minimum optical size (text state). Increase to 30–40 for a less condensed, more subtitle-readable text state.

FAQ

Yes, the animation is 100% CSS: a single @keyframes vfWonky rule and two modifier classes. There is no JavaScript — compatible with any static site generator or SSR framework without client-side hydration.
Yes, as long as the font supports at least wght and opsz. The WONK and SOFT axes are Fraunces-specific — if your font does not expose them, remove them from font-variation-settings in the keyframe and adjust the wght and opsz ranges to your font's declared min/max values.
Set animation-iteration-count: 1 and animation-fill-mode: forwards on .vf-wonky-text--anim, then toggle animation-play-state: paused / running via an IntersectionObserver. The effect plays once when the element enters the viewport, then freezes in the text state (wght 300, WONK 0).