Copywriting × Craft

8 min

Copywriting × Craft

Good copy in the wrong place is wasted. Good placement with bad copy is confusing. The intersection between copywriting and craft is where what you say meets how you present it—and neither can compensate for a failure in the other.

Error messages need copy AND placement

Most error messages fail twice. First, they say the wrong thing: "Invalid input," "Error occurred," "Please try again." These tell the user something went wrong without explaining what, why, or how to fix it. Second, they appear in the wrong place: a red banner at the top of a long form, a toast that vanishes before the user can read it, or a generic alert that doesn't reference the specific field.

The copywriting fix: write error messages that name the field, describe the problem, and suggest the fix. Not "Invalid email" but "Enter an email address like name@company.com." Not "Password too short" but "Passwords need at least 8 characters—you entered 5."

The craft fix: place the error inline, directly below the field that caused it. Move focus to the first field with an error. Set aria-invalid="true" on the input and connect the error message with aria-describedby. Ensure the error text has sufficient color contrast—red on white is often below 4.5:1.

Neither fix works alone. A perfectly worded error message at the top of a 12-field form requires the user to scroll, find the problem, and map the message to the right input. A perfectly placed inline error that says "Invalid" gives the user no path forward.

<label htmlFor="email">Email address</label>
<input
  id="email"
  type="email"
  aria-invalid={hasError}
  aria-describedby={hasError ? "email-error" : undefined}
  autoComplete="email"
/>
{hasError && (
  <p id="email-error" className="text-sm text-red-600" role="alert">
    Enter an email address like name@company.com
  </p>
)}

Empty states need copy that drives action

The default empty state in most applications is some variation of "No results found," "Nothing here yet," or a sad-face illustration with no text at all. These communicate absence without direction. The user sees nothing and has no idea what to do next.

The copywriting fix: every empty state should answer three questions. What is this space for? Why is it empty? What should the user do? The best empty states are specific and actionable:

  • Not: "No projects found."

  • Instead: "You haven't created any projects yet. Start your first project to begin tracking progress."

  • Not: "No results."

  • Instead: "No matches for 'acme.' Try a different search term or browse all integrations."

The craft fix: the empty state needs a clear visual hierarchy (headline, supporting text, action button), proper vertical centering in its container, and the action button needs to look like a primary action—not a text link buried in a paragraph. The button's hit target should be at least 44×44 CSS pixels. If the empty state includes an illustration, that illustration should have alt="" and aria-hidden="true"—it's decorative, not informational.

CTA buttons need visual weight to match copy importance

A button that says "Start free trial" is the most important element on a landing page. If that button is rendered in a ghost style—transparent background, thin border, muted text—the visual weight contradicts the copy importance. The words say "this is the primary action." The styling says "this is secondary."

The inverse is equally broken. A button that says "Cancel" styled as a large, red, filled button implies danger and primary importance. But "Cancel" is almost always a secondary action—the escape hatch, not the destination.

The rule: the visual weight of a button must match the importance of its copy. Primary CTA → filled, high-contrast, prominent size. Secondary action → ghost or outlined, lower contrast, same or smaller size. Destructive action → red but not visually heavier than the primary.

This extends to hit targets. A CTA that says "Get started for free" needs a generous clickable area—at least 44px tall, with horizontal padding that makes the button feel substantial. A "Skip" link can be smaller. The physical size of the interactive element signals its importance just as loudly as the words inside it.

Accessible labels need meaningful copy

Screen readers don't see your beautifully designed icon button. They read its accessible name. If that name is "button," "icon," "null," or nothing at all, the interface is unusable for the roughly 8 million screen reader users in the US alone.

But the fix isn't just adding an aria-label—it's writing a good one. "Button 1" is worse than no label because it's actively misleading. "Close" is better. "Close navigation menu" is best—it tells the user what will happen, not just what the element is.

The copywriting standard for accessible labels:

  • Icon buttons: describe the action, not the icon. Not "X" but "Close dialog." Not "hamburger" but "Open navigation menu."
  • Links: describe the destination. Not "Click here" but "View pricing details." Not "Read more" but "Read the full case study."
  • Form inputs: label the expected input. Not "Field 1" but "Company name." Not "Enter text" but "Search integrations."

The craft requirement: every aria-label must be unique within its context. Two buttons both labeled "Delete" on the same page are ambiguous. "Delete 'Acme project'" and "Delete 'Beta launch'" are specific.

This is copywriting work inside a craft requirement. The developer knows an aria-label is needed. The copywriter knows what it should say. The intersection is where both skills operate on the same element—and where most interfaces fail because only one discipline shows up.

The single standard

Every interactive element on a page is a copywriting problem and a craft problem. The button needs the right words and the right hit target. The error needs the right message and the right placement. The empty state needs the right tone and the right visual hierarchy. The accessible label needs the right description and the right ARIA attribute.

You cannot audit one without the other. A copywriting review that ignores placement is incomplete. A craft review that ignores microcopy is incomplete. The intersection is the standard—and it's the standard your users experience, whether you check for it or not.