Typography, spacing, and rhythm aren't properties of the structure. They're properties of the words inside it.
I was on a call this week with the founder of a tax startup whose homepage I’d been asked to look at. The design felt too immature for the audience the company is trying to reach: CFOs, VPs of Tax, finance leaders at growth-stage companies. The visual language was pulling young when the audience expected serious. My recommendation was small and high-leverage: refresh the typography, drop the textured background. No rebrand. Two changes.
The founder asked the obvious follow-up. What’s the right typography?
I said I couldn’t tell him yet. We needed the words first.
He paused. The pause was the article.
The default workflow at most companies I’ve worked at goes the other way around. Design ships a homepage layout in Figma with placeholder text. Lorem ipsum, or a draft headline the designer sketched in to make the layout breathe. The copywriter or PM writes the real words a sprint or two later. The words drop into the layout. Sometimes the layout breaks; usually the team patches it and ships. The implicit theory of the workflow is that design is the structure and copy is what fills it.
This theory is wrong in a specific way. It’s wrong because typography, spacing, weight, and rhythm are not properties of the structure. They’re properties of the words inside it.
A specific example. The headline “Tax compliance, simplified” sets at a certain weight in a certain face at a certain size. It will read as trustworthy and a touch boring, which may or may not be the right register for the audience. If the actual headline is “We file your R&D tax credit, you sleep through April,” the rhythm is different, the scan pattern is different, and the typography that fits is different. Same homepage. Different design.
The spacing question is even more sensitive than the typography question. The vertical rhythm of a page is set by the ratio of headline to subhead to body. That ratio is a function of word count and word weight, not just type size. A 5-word headline next to a 14-word subhead breathes at one rate. A 9-word headline next to a 22-word subhead breathes at another. The grid that supports the first will misbehave for the second. Designers who ship layout-first end up with dozens of small adjustments that should have been one decision made earlier.
The reframe I offered the founder, and the one I’ve been saying internally for a while: exact copy informs design. Not “informs the design choices about copy.” Not “informs the marketing voice.” It informs the design itself. The font, the size, the spacing, the weight, the line height, the visual rhythm of the page. All of it is downstream of words you haven’t written yet.
A practical version of this for any team, one I’ve started asking my own designers to use.
For any high-stakes surface (a homepage, a pricing page, a major in-product moment), the copy is a design input, not a design output. Lock it before you start the visual work, or run them in parallel with the copywriter in the room when you’re sketching.
For lower-stakes surfaces (an admin setting, a confirmation modal), placeholder copy is fine, but the designer should write a plausible placeholder, not Lorem ipsum. Cancel subscription and Confirm cancellation and lose access to all archived sessions set very differently. The designer who writes the second will sketch a different button than the designer who writes the first.
The most common objection I hear is that copy can’t be locked in time. Marketing wants to A/B test it. Stakeholders want to revise it. The wording will change. This is true. The implication isn’t that we should design first. The implication is that we should design with the range of plausible wordings in mind, and the way to do that is to actually write three or four candidate headlines and sketch the page against the longest and shortest of them. Make the layout robust to the words it might end up holding.
Words come first. Then form. This order isn’t a preference, it’s the design.