Typography × Copywriting

Typography and copywriting are usually treated as separate disciplines—one visual, one verbal. In practice, they're the same problem. The words you write determine how the type looks on screen. The typographic constraints you set determine what the words can be. Ignore either side and you get headlines with widows, brand names that break across lines, and hierarchy that contradicts the persuasion structure.

Smart quotes in code vs. rendered copy

Every copywriter knows to use smart quotes. Every developer knows that code uses straight quotes. The collision happens in the boundary layer: JSX strings, MDX content, CMS fields, and template literals.

A component that renders "Start your free trial" with straight quotes in the source code will display those straight quotes in the browser—unless your pipeline transforms them. Some MDX configurations auto-convert. Some don't. CMS platforms vary. The only reliable approach is to never assume: write the actual Unicode characters (" and ") in every user-facing string, or verify that your toolchain converts them.

The inverse problem is worse. A developer who does use smart quotes in a code comment or a variable name will create subtle bugs—curly quotes are different Unicode codepoints from straight quotes, and string comparisons will fail silently. Smart quotes belong in rendered copy. Straight quotes belong in code. The boundary between the two demands vigilance.

Non-breaking spaces for brand names

"Coca Cola" is wrong. "Coca‑Cola" with a non-breaking hyphen is right, but even that can break across lines in a narrow container. Brand names, product names, and compound proper nouns should use non-breaking spaces or non-breaking hyphens to prevent line breaks that split them.

In JSX, use {" "} or the literal   in MDX. For hyphens in brand names, consider the non-breaking hyphen ‑ (U+2011) instead of the regular hyphen-minus - (U+002D).

This is a copywriting problem and a typography problem simultaneously. The copywriter writes "Next.js" and expects it to render as a unit. The typographer needs to ensure the layout doesn't break it. Neither can solve it alone—it requires awareness from both sides.

Headline length governs line breaks

Here's where the disciplines merge completely. A headline's word count is a typographic decision, not just a copywriting one. Consider:

Build better products with real-time collaboration

At 600px, that headline fits on one line. Beautiful. At 480px, it wraps—and the word "collaboration" sits alone on the second line, creating a widow. No CSS can fix this elegantly. text-wrap: balance helps but doesn't eliminate the problem for all viewport widths.

The fix is copywriting: rewrite the headline.

Build better products, together

Shorter. Punchier. And it wraps cleanly at every width because there's no long tail word that can orphan itself.

The copywriter who doesn't think about line breaks writes headlines that break badly. The typographer who doesn't edit copy treats every widow as a CSS problem. The intersection is where you realize that editing the copy is often the best typographic fix.

text-wrap: balance and copy length

text-wrap: balance is a CSS property that distributes words across lines to minimize the difference in line lengths. It's a powerful tool for headlines—but it has limits that depend entirely on the copy.

A three-word headline—"Ship with confidence"—doesn't need balancing. It fits on one line at most widths, and when it wraps, two words plus one word is already balanced.

A six-word headline—"The fastest way to ship products"—benefits enormously from text-wrap: balance. Without it, the wrap might produce "The fastest way to ship" + "products"—a classic widow. With it, the browser distributes more evenly: "The fastest way" + "to ship products."

A twelve-word headline will often ignore the instruction or produce awkward results—the algorithm can't make twelve words look balanced across two or three lines without creating unnatural breaks. At that length, the copywriter needs to intervene: shorten the headline or add a manual <br> at the right position.

The rule: text-wrap: balance works best on headlines between four and eight words. Outside that range, the copy itself is the variable you need to change.

Typographic hierarchy must match copy hierarchy

The persuasion frameworks in the copywriting module—PAS, AIDA, StoryBrand—all establish a narrative order. The "why" comes first. The "what" follows. The "how" comes last, if at all.

Typographic hierarchy must mirror this exactly. If the copy leads with the user's pain point (the "why"), that element should be the largest and most prominent text on the page. If the product name (the "what") is typographically dominant instead, the visual hierarchy contradicts the narrative hierarchy, and the reader receives conflicting signals about what matters most.

This sounds obvious. In practice, it's violated constantly. A homepage with the company name in 64px and the value proposition in 18px has a typographic hierarchy that says "our brand matters most." The copy might be brilliant, but the type is overriding it.

Why first means why largest. If your copy starts with the user's problem, your type scale should make that problem the most visually prominent element. Match the hierarchy or accept that one of them is undermining the other.

The single problem

Typography and copywriting are not two disciplines that occasionally overlap. They are two lenses on the same problem: how does text communicate on screen? The copywriter decides what the words are. The typographer decides how they appear. But the what and the how are inseparable—a widow is a copy problem and a type problem, a brand name that breaks is a spacing problem and a content problem, and a headline that's too long for text-wrap: balance is a layout problem and an editing problem.

Work in both lenses simultaneously. Write copy with line breaks in mind. Set type with word count in mind. They're the same discipline, viewed from different angles.