Skip to content
Viewing: all (23)
  1. David Lowbridge From fixed values to behaviours Brand automationUX & UIDigital strategy
  2. Mike Leonard The web is fun Motion designUX & UITechnical validation
  3. Jara Santamaria Martinez Every year is a new brief PlatformsContent strategyTechnical validation
  4. Kristina Radonjic The work between the work Digital strategyMarketing
  5. Guanglun Wu Choosing the right tech stack Technical validationPlatformsDigital strategy
  6. Barry Cumberlidge Security deep dive Technical validationContent strategyDigital strategy
  7. David Lowbridge Startups are prototypes Digital strategyBrand automation
  8. Tara Heal Shapeshifting the Future UX & UIMarketing
  9. Tom Small The theme is the guardrail Brand automationPlatforms
  10. Barry Cumberlidge Your biggest asset in an RFP, your website SEOContent strategyDigital strategyMarketing
  11. Michael Gunner Cache Components: the right content at the right time PlatformsTechnical validationContent strategy
  12. David Lowbridge From static frames to a creative operating system Brand automationUX & UI
  13. Tom Small We build by leaving things out PlatformsDigital strategyUX & UI
  14. Michael Gunner Standardise the foundations, not the brand experience PlatformsBrand automation
  15. Charlie Clarke Letting type move Motion designUX & UI
  16. Andy Purbrick Putting video back where it belongs PlatformsTechnical validation
  17. Mike Leonard The cache that doubled as a coordinator PlatformsTechnical validation
  18. Andy Purbrick We test the revenue path Technical validationDigital strategy
  19. Mike Leonard Two months in Three.js, we started over Motion designTechnical validation
  20. Rhona Mackay The form we actually trust PlatformsTechnical validation
  21. Andy Purbrick The testbed nobody will see PlatformsTechnical validation
  22. Andy Purbrick Twenty-four modules, one wrapper PlatformsContent strategy
  23. Andy Purbrick We haven’t missed a Thursday in 33 weeks Content strategyMarketing

Letting type move

Charlie Clarke 5 min read Motion design UX & UI

We treat type as something that sits still — fixed in place, headings always the biggest thing, motion bolted on at the end. For one Creative Spark we dropped those rules and asked what type could do once it started moving.

Letting type move

Creative Spark is our in-house R&D session: ninety minutes, a single theme, and a room full of people building prototypes with no client to please and nothing due at the end. This time the theme was type in motion. We wanted type to feel less like a fixed shape that carries information one way and more like a material with some give in it. But the afternoon turned out to be about something bigger than typography: how cheap and fast exploring an idea has become, and what that does to the way a studio spends its time.

What we questioned

A few of our assumptions went early. Weight can change mid-word. A heading needn’t be the biggest thing on the page. Motion has to do a job rather than decorate, without sliding back into the hyperactive web of 2002. Most of these aren’t rules anyone chose on purpose; they’re hangovers from how web type is built, all CSS axes and classes, and that machinery sands the creativity out of it. The tooling has moved on, though. The new AI font editors make a bespoke cut of a typeface cheap enough to try on a whim, so the cost of asking “what if the type did this?” has more or less collapsed.

Whiteboard reading "Type in Motion — challenge these assumptions", ringed with notes on fixed shape, one-way communication and scale as hierarchy
The framing board: every assumption about type we wanted to push on

What we made

Six prototypes came out of it, all over the map. One was a 3D dial you turn instead of scrolling a list. Another tied typography to scroll speed, so the text frays the faster you go. A few used the camera, with hand and face tracking that shoves the letters around — very Minority Report. There were soft-body letters that behave like balloons, bouncing on gravity and anti-gravity. Someone rebuilt the dial from scratch in plain JavaScript and CSS in about ten minutes, from a JSON spec and a reference URL, just to see how close standard web tech could get. None of them were precious, and that was the idea: enough range, fast enough, that binning most of it still leaves you ahead.

Green jittery type on a pink field reading "the web has genuine capabilities for type that almost nobody is using", with radius, jitter and strength sliders
Typography wired to scroll speed: the faster you go, the more it frays
A radial "Circular nav drift" menu beside live variable-font controls for weight, width and optical size
The dial rebuilt in plain JS and CSS: a radial nav that drifts with scroll momentum

What we took away

The making turned out to be the cheap part. We settled on a cheap, fast model to churn out the bulk and a slower, pricier one to tidy up after it; the whole multi-model run came to about £1.40. For the price of a coffee we had a spread of directions that would normally take days to work up. When making the thing is nearly free, the hard part isn’t the making any more — it’s knowing which of the six is worth pursuing, and why.

A couple of things caught us out. You can do proper hand and camera tracking in the browser now with no extra software, which none of us knew. And the move off loose “vibe coding” onto structured prompts and JSON build specs mattered more than any clever wording. The boundaries kept the models from wandering and handed back code we could actually use.

A particle-dust rendering of the word "MAGIC" with a "hand detected" badge, driven by webcam hand-tracking
“Magic”, revealed by hand-tracking through the webcam — no plugins, just the browser

The speed stuck with me most. We started with a vague theme and, ninety minutes later, had a handful of working, clickable prototypes. That’s the kind of session I’d put a client in the room for: not to show them finished work, but to let them watch an idea become six things they can click before lunch.

A four-panel grid of more prototypes from the session: glowing "type is alive" variable-font text, a radial 3D navigation dial, a split-flap departures board, and ghosted type set over a landscape photo
A few more from the room: a variable-font study, the 3D dial, a split-flap departures board, and type set into a landscape

Magic and logic

There’s a split underneath all of this. The balloon letters showed it. Motion looks right when it obeys physics — mass, gravity, the way a soft body overshoots and settles. That’s the logic. A model holds it without effort: the easing curves, the equations, the maths of how things move. You can hand all of that over. None of it has to live in your head.

What’s left is the magic, and the magic is taste. Should the letter bounce at all? Is this the moment for it? A model can make motion look natural. It can’t tell you it’s good. I don’t think that part can be written down. Make a list of everything we like and it’s out of date before you finish. Taste keeps moving. That’s the part no model took off us.

These models are really just a store of human memory. Fallible, unpredictable, sometimes astonishing. But it’s more personal than that. What comes back is shaped by you — your words, your tone, the way you ask. No two conversations are the same.

We hand over the logic and keep the magic. Maybe that’s what these tools are really for: they show us what’s human in us. Not a record of where we’ve been. The taste for where to go next.