Kinetic typography: when text should move (and when it shouldn't)

Tuesday morning, end of May 2026, 9.10am. I'm sat at a table under the porticoes near the Criminal Court in Santa Maria Capua Vetere. The air's already warm, the smell of coffee mixing with damp tarmac, and my laptop fan is going full pelt, letting out a quiet hiss as I compile the preview of a web project.

Next to me is Pasquale, an old-school craftsman who shapes ceramics in Vietri sul Mare. His hands are marked by the potter's wheel, and he's got a deep-rooted suspicion of anything you can't touch with your own hands.

A few days ago Pasquale sent me a link on WhatsApp. It was the site of a design studio in Shoreditch: a page where the headings melt into each other, change weight and rotate as you scroll down. "Umberto, look at this," he said, eyes lighting up like he'd seen something magic. "I want my workshop's story to move like that. It makes everything look modern."

So I took his old Android — screen cracked from years of use, the glory days of three years ago — and opened the link. We waited. One, two, three, four seconds of total emptiness. Then the page suddenly appeared, the text started jumping about and the layout danced around alarmingly before locking up. Pasquale frowned, pulling the screen away from his face. "No, hang on. This is doing my head in. Makes me feel dizzy."

And there's the turning point, and the argument I'll defend to the hilt: kinetic typography on the web isn't a special effect you bolt on to wow the crowd or massage the designer's ego. It's a surgical tool. When it works, it builds an invisible narrative tension. When it fails, it wrecks the user experience and pushes people away — real people, with a cracked Android and the dodgy wifi from the café down the road.

What kinetic typography actually is (and why in 2026 it's no longer a niche thing)

Let's call things by their proper name, without hiding behind manuals written on the other side of the Atlantic.

Kinetic typography is, technically speaking, text whose shape, weight, position or size changes in real time in response to an external trigger. That trigger could be the page scrolling, time passing, the cursor hovering, or the size of the browser window itself.

There's a technical mix-up I want to clear up straight away. Loads of people confuse kinetic typography with variable fonts, but they're different things. As I explained when looking at variable fonts (I covered this in the guide to fonts that breathe), variable fonts are the raw material: a single file containing endless weights and widths. Kinetic typography is movement applied to that material. A variable font can sit perfectly still for months; a traditional, static font can still be animated by shifting its opacity or position.

There's a second misunderstanding too, a bigger one: kinetic type isn't a category on its own. It's a specific case — the most extreme one, because it works directly on the text — of what I called motion design as the language of your brand. There I was talking about transitions, button hovers, elements coming into view. Here I'm narrowing it down to one question: what happens when the thing moving is the word itself, the very thing the reader has to decode to understand what you're saying? The stakes are higher, because movement and readability are fighting over the same space.

From my time at the agency, I've sorted these animations into three technical families:

Scroll-driven font-variation.

The thickness or width of the text changes depending on how far down the page you've scrolled, using font-variation-settings paired with JavaScript or the newer CSS scroll-linked animation APIs.

Viewport-scaled typography.

This isn't movement in the strict sense, but the combined use of vw and clamp(). The text changes proportion elastically to fill the visual space — the foundation that a lot of modern grids are built on, including the bento grids I covered in another article.

Classic kinetic motion.

Text that enters, exits, rotates or breaks apart. Often orchestrated with libraries like GSAP or Framer Motion, or with @keyframes in plain CSS.

Let me tell you what happened a few months back at the Granatello pier in Portici. I was testing an animation on a main heading: I wanted the letters to gradually widen as they entered the viewport, using an IntersectionObserver. On the studio monitor, everything ran smooth as butter. Then I loaded the test on an older phone and the frame rate dropped to 12fps. The text moved in jerky steps, killing the magic stone dead. Mistake number one, duly noted: I'd forgotten that smoothness needs hardware that the average user often simply doesn't have.

Rule number one: prefers-reduced-motion isn't optional

There's an ethical and technical side to this that too many designers overlook once they get carried away with typographic animations. Not everyone experiences movement the same way. Conditions like vestibular disorders or photosensitive epilepsy mean that text moving about uncontrollably can cause nausea, dizziness or immediate physical discomfort.

In today's development landscape, inclusivity isn't a badge to pin to your chest — it's a design requirement, something I went into in more depth when discussing web accessibility. The browser gives us a precise tool for this: the @media (prefers-reduced-motion: reduce) media query. It picks up on the user's system preferences: if they've turned on "Reduce Motion", the site needs to switch off any typographic flicker.

Here's a clean example:

/* Standard animation for those who haven't requested restrictions */
.titolo-cinetico {
  transition: font-variation-settings 0.4s ease-out;
  font-variation-settings: 'wght' 300, 'wdth' 100;
}

.titolo-cinetico:hover {
  font-variation-settings: 'wght' 800, 'wdth' 150;
}

/* Full respect for those who've requested a static experience */
@media (prefers-reduced-motion: reduce) {
  .titolo-cinetico {
    transition: none !important;
    /* Mid-range value (500): we don't go back to the minimum (300) nor
       jump to the maximum (800). The aim isn't to "switch off"
       the style, but to offer the most balanced and readable
       version of the heading, with no transition at all */
    font-variation-settings: 'wght' 500, 'wdth' 100 !important;
  }
}

Here's something that really stuck with me. During the beta of an editorial site, an external collaborator wrote to us saying the typewriter-style entrance effect on the homepage headlines caused him such visual discomfort that he couldn't read the articles. He had a point. We'd designed that movement thinking only about the visual impact, ignoring the people on the receiving end of it rather than choosing it. From that day on, checking reduced motion is the first test we run, before we even write a single line of animation code.

vw, clamp() and fluid typography: the foundations before the movement

Before we get text racing across the screen, we need to make sure it can stand on its own two feet. A lot of designers make the mistake of setting font size with a simple 10vw. The result is a mathematical disaster: on a big screen the text becomes massive, on a phone it shrinks down until it's unreadable.

The fix is the controlled fluidity of clamp(), which takes three values: minimum, preferred (in relative units) and maximum.

h1.titolo-fluido {
  font-size: clamp(2rem, 8vw + 1rem, 7.5rem);
  line-height: 1.1;
  contain: layout size; /* helps the browser isolate the element */
}

This links straight back to the performance metrics that affect search engine rankings, which I covered in the article on Core Web Vitals. If you don't set boundaries for a font, the constant resizing during loading or scrolling causes elements to suddenly shift position — the phenomenon behind CLS (Cumulative Layout Shift), one of the three Core Web Vitals. The browser's forced to recalculate the position of every paragraph, slowing down navigation and winding up anyone trying to read.

Scroll-triggered typography: when it works, with real-world examples

Let's look at the market with proper honesty, both at those who've shown the way and those who've lost the plot along the way.

An example I showed a client myself

A few weeks back I was at a client's studio in Caserta — they make bespoke furniture. He wanted to understand what I meant by "movement that doesn't get in the way". I grabbed my phone, opened the iPhone product page on the Apple site and handed it to him.

"Look," I told him, "scroll slowly." He scrolled down nice and slow: the product title grew slightly larger, the descriptive text faded out and another appeared in its place, but at every single moment — even halfway through the animation — there was already something readable on screen. No gaps, no waiting around. "And what if I stop scrolling halfway through?" he asked. He tried it. The text was still readable, frozen mid-transition. That's the principle of progressive enhancement: the content exists before the animation, the movement is an extra, not a condition for understanding.

Same goes for the typographic micro-interactions on interfaces like Stripe's, where the weight of the characters reacts almost imperceptibly to scrolling or the cursor hovering — that change in weight draws the eye towards the important technical details, without ever turning reading into a chore.

The mistake of constant motion

On the other side of the fence, you've got the showcase sites that fill up the galleries on places like Awwwards. There's a whole strand where every single word has to move, rotate or break apart non-stop, forcing the user to chase the text with their eyes just to make it out. It's the mistake of movement for movement's sake: the constant animation goes head-to-head with the content. The visitor loses their thread, gets tired, and bounces off the site before they've even worked out what the company sells.

A pattern you see a lot in these portfolios: headings that scroll round in an endless loop, in boxes cascading one after another, even when the user's stationary and simply reading the paragraph below. On its own, the effect is hypnotic. Repeated across every section of the page, it turns into visual noise competing with the text that's meant to be selling the service.

I remember a winter afternoon in the Shoreditch studio, on City Road EC1V. Me and my client Bobby were testing a preview on a 32-inch professional monitor. Everything looked stunning, gallery-smooth. A bit later we popped out for a coffee towards Old Street, and I opened the exact same page on my phone, walking along in a bit of light rain. The whole experience flipped on its head: the scroll lagged, the text overlapped, the interface had become a right pain. That gap between the comfort of the studio and the reality of everyday life is at the heart of every good piece of web design.

Font-variation-settings: the engine behind it all

For anyone getting their hands dirty with the code, control over typographic movement comes down to font-variation-settings. This property adjusts the variation axes defined within the font — and on a smaller scale it's a microinteraction in its own right: a small bit of visual feedback telling the user "I've seen you, I'm responding to you". The standard recognised axes are:

• wght (Weight) — the thickness of the strokes
• wdth (Width) — the width of the characters
• opsz (Optical Size) — visual optimisation based on size
• slnt (Slant) — the tilt

Here's an animation that changes the weight on cursor hover, with a fallback for browsers that don't support variable fonts:

/* Basic setup with traditional font as fallback */
h2.titolo-animato {
  font-family: 'Inter Static', sans-serif;
  font-size: 3rem;
}

/* Only kicks in if the browser supports variable fonts */
@supports (font-variation-settings: normal) {
  h2.titolo-animato {
    font-family: 'Inter Variable', sans-serif;
    font-variation-settings: 'wght' 300, 'slnt' 0;
    transition: font-variation-settings 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  }

  h2.titolo-animato:hover {
    font-variation-settings: 'wght' 750, 'slnt' -10;
  }
}

One key detail: not every font exposes every variation axis. Before you go promising a client some flashy effect, you've got to check the file's structure with free tools like Wakamai Fondue or Axis-Praxis.

Back to Pasquale: he'd fallen in love with an optical expansion effect he'd seen on that Shoreditch site. We opened the laptop on his workbench, between the blocks of clay and the brushes. I had a look at the font he'd picked and had to show him, plain as day, that it only had one axis — tied solely to weight. No way of widening it horizontally without distorting the letters. We renegotiated the whole setup right there and then, while the coffee went cold in his handmade ceramic cups.

Performance: the hidden cost of movement

Every time we move something on screen, the browser runs through three steps: working out the layout (reflow), drawing the pixels (paint), and combining the layers on the graphics card (compositing).

Animating properties like font-size, width, height or margin is costly, because it forces the browser to recalculate the geometry of the entire page on every single frame. Animating transform (scale, translate, rotate) and opacity, on the other hand, lets you skip the first two steps altogether, handing the work over to the GPU — smooth even on older hardware.

/* EXPENSIVE APPROACH - recalculates the layout on every frame */
.testo-lento {
  transition: font-size 0.3s;
}
.testo-lento:hover {
  font-size: 4rem;
}

/* CORRECT APPROACH - takes advantage of hardware acceleration */
.testo-veloce {
  transition: transform 0.3s ease;
}
.testo-veloce:hover {
  transform: scale(1.2);
}

If we decide to animate font-variation-settings on continuous scroll — the technique typical of scroll storytelling — we need to test real-world performance by simulating hardware slowdown in Chrome DevTools, setting CPU throttling to 4x. If the frame counter drops below a steady 60fps, the animation will chew through mobile battery life.

The figures from the Web Almanac 2025 (based on CrUX data, collected in July 2025) show that only 48% of mobile pages and 56% of desktop pages pass all three Core Web Vitals. More than half of the mobile web is, even now, still rated "not good" by Google. A site polished to the last detail in a Shoreditch studio could take several seconds to become interactive when someone in Santa Maria Capua Vetere is checking it out on the dodgy wifi from the café down the road. That's an unacceptable price to pay for a bit of aesthetic flair.

When kinetic typography should NOT be used

I want to be blunt about this, no fudging it.

Typographic movement sells brilliantly during a pitch. The client watches the slides, sees the words assembling themselves, signs the contract, chuffed to bits. But the person dealing with that site every day is a real user looking for a phone number, a price, an address. That person couldn't care less about the movement: they just want quick answers.

There are areas of a project where animating the typography should be off the table for the sake of getting results:

Conversion and e-commerce pages.

Buy buttons and contact forms need to stay static, solid and readable. If the text inside a button moves or changes weight just as the user's finger is hovering to click, it creates a moment of hesitation that knocks down conversions.

Service information.

Opening hours, spec sheets, price lists, contact details — the operational heart of any SME. A website isn't a digital business card, and it's not a gallery experiment either: it needs to help people find answers fast.

Kinetic typography earns its place only in editorial projects, brand "manifesto" sections, or launch landing pages for a single creative product — where the time someone spends on the page is driven by the joy of discovery, not by urgent need.

Breathing isn't the same as noise

Not all pasta needs draining at exactly the same minute: it depends on the flour and the sauce you're tossing it in. Typography follows the same craftsman's rule. Movement is a powerful ingredient, a concentrated aroma that can turn an ordinary layout into something memorable. But overdo it, and you ruin the dish.

By the end of our morning in Santa Maria Capua Vetere, I'd shut the laptop lid. Pasquale sat looking at the table for a few seconds, then smiled and nodded. He'd got the lesson from the code. Together we decided to keep just the one animated heading — a slow, controlled entrance on the first screen of his homepage — to tell the story of the earth and fire that shape his ceramics. Everything else on the site will stay still, solid, readable, fast.

Kinetic typography is an excellent stylistic signature when it knows how to be rare, like a moment of silence dropped in at just the right point in a packed conversation. If everything's moving on screen at once, you're not communicating: you're just making noise.