If you’ve audited 30 product marketing pages in the last month, you’ve noticed the shift. The hero illustration is gone. The product screenshot has moved below the fold or vanished entirely. In the space those used to occupy, there’s just type: oversized, sometimes spilling beyond the safe area, varied in weight and color, doing the visual work that illustration used to do. Linear started it. Stripe Atlas refined it. By the time Cursor and Pretzel and a half-dozen others shipped variations of it in Q1 of this year, it had crossed from “interesting” to “default.” This is the trend piece for the pattern.
We’re calling it type-as-illustration. Here’s what makes it work and the four moves that separate good executions from cosplay.
Why this pattern won
Three forces converged.
Illustration is exhausted. The Memphis-flavored, character-driven illustration that powered B2B marketing from 2018-2023 is done. It started looking generic the moment Notion, Slack, and Stripe were all running the same illustration agencies, and by 2024 it was a tell of “we couldn’t think of anything specific to say.” Teams have been searching for a replacement.
Product screenshots have lost their punch. Software UIs have converged so hard that one team’s dashboard looks like another team’s dashboard. A screenshot of your analytics product looks like a screenshot of every analytics product. Leading with one signals “we’re competing on feature parity,” which is exactly the message most teams don’t want.
Type rendering finally caught up. Variable fonts, OKLCH color, subpixel-perfect anti-aliasing across the major browsers: typography on the web in 2026 looks like typography in print did in 2010. The medium can finally support what the pattern requires.
The pattern wins because it’s the only remaining hero element that can’t be templated. Two teams using illustration tend to look alike; two teams using screenshots definitely look alike; two teams using type-as-illustration look profoundly different from each other, because the typography choices end up encoding everything about the brand.
Move 1: display face hard, body face quiet
Every good implementation of this pattern uses a strong opinionated display face for headlines, paired with the most boring possible body face. Linear runs Tiempos Headline against Inter. Stripe Atlas uses GT Sectra against their custom Stripe Sans. Pretzel uses ABC Marfa Display against ABC Marfa (their non-display sister). Cursor uses Sohne Breit against Sohne.
The mechanic is contrast. The display face is doing the talking; it’s where the brand voice lives. The body face is supposed to disappear so the writing reads as cleanly as a serious magazine. If both faces are doing personality work, the page reads as cluttered and salesy. If neither is, the page reads as cheap and forgettable. One loud face, one quiet face. Always.
The bad implementations tend to use one expressive face for everything. The headline reads as confident; the third paragraph of body copy reads as exhausting. By the bottom of the page, you’ve stopped reading.
Move 2: set type bigger than feels comfortable, then back off 5%
Hero headlines on this pattern run 80-120px on desktop, 48-72px on mobile. That’s roughly twice what a “responsible” type system would call for. The first cut almost always feels too big. The discipline is to live with it for a day, get used to it, and then dial it back maybe 5%. The result is type that’s still bigger than reflexive, but no longer screaming.
Two specific anti-patterns to avoid: don’t track-out the headline (negative letter-spacing reads as Apple-circa-2014 and is dated); don’t over-leading it (anything past 1.05 line-height on a 96px headline gets choppy on mobile). The default safe zone is letter-spacing: -0.02em; line-height: 0.95; for display faces in this size range.
Move 3: use color as a third hierarchy axis
The strongest implementations of this pattern treat color as carefully as size and weight. A common move: the entire headline is set in the same large size, but key phrases are colored differently. The body of the headline is in --text (the base foreground color), one phrase is in --accent (the brand color), one phrase is in --text-muted (a slightly recessed gray). Reading the headline becomes a small piece of typographic choreography.
Linear’s Method page does this with three colors. Stripe Atlas does it with two. Cursor does it with two plus a subtle gradient on a single word.
The bad version of this trick is to highlight every important word until nothing is highlighted. Pick one phrase, maybe two. The point is rhythm, not emphasis-roulette.
Move 4: make the type breathe, and overscale the white space too
The mistake that kills the pattern faster than anything is to set huge type and then crowd it with the rest of the page. If your hero headline is 96px tall, the surrounding white space needs to be in the same scale: top padding around 160px, bottom padding around 120px, with body copy following at a comfortable 18-20px and a generous 1.6 line-height.
The display face commands attention; the white space gives that attention somewhere to go. Without the breathing room, the type reads as shouting in a small room. With it, the type reads as a confident voice in a quiet hall.
What’s coming next
This pattern is roughly 18 months from being where the bento grid was a year ago: ubiquitous, copy-pasted, and starting to feel like a cliche. Three signals that point at what’s next:
-
The return of the secondary illustration. Once type-as-illustration is everywhere, teams will start adding back small, restrained, single-element illustrations: closer to a mark in editorial design than a hero illustration. We’re already seeing this in Notion’s calendar app marketing and the new Vercel homepage.
-
Typographic motion. A handful of teams are starting to animate the type itself: variable-weight transitions on scroll, color phase-shifts on hover, subtle kinetic transitions between sections. Done well it elevates the pattern. Done badly it’s the new
<marquee>. Watch this space. -
Editorial spreads as marketing pages. The next move for teams who’ve mastered the type-driven hero is to push the entire page into editorial-spread territory: multi-column body copy, real footnotes, sidebar pull-quotes. We’ve seen one or two of these so far and they’re good. By Q4 there will be 50.
If you’re working on a marketing-page redesign right now and considering this pattern: do it. It’s the strongest move on the table for shipping product. Just commit to all four moves above. Type-as-illustration done halfway is worse than a clean illustration. Done right, it’s the most distinctive your page can possibly look in 2026.