Writer, Set Your Own Type – Copywriting is UX Design

UX (user experience) design is a fancy word for the age-old practice of layout, meaning how you present written content visually.

And no one – certainly not designers – understands the value of layout as well as a copywriter.

And whenever you make statements like this, it’s never a bad idea to cite Ben Franklin.

After all, few writers have influenced layout and design as he did. And aside from being one of the most important inventors, diplomats, and entrepreneurs in modern history, consider his writing and copywriting body of  work:

  • Poor Richard’s Almanac, the best selling publication in the New World for 26 years in a row. It was sort of like the New Yorker, Wikipedia, and Vice Magazine, all rolled into one
  • News and opinion for the most-read newspaper (which he also owned) in the American colonies
  • The slogan United We Stand, Divided We Fall, among many others
  • The Declaration of Independence of the United States (well, co-authored along with Thomas Jefferson)

We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable rights, that among these are life, liberty and the pursuit of happiness.

So his opinion on how to present writing probably matters.

But did you know that he also wrote advertising copy? He is in fact considered the first American copywriter and was considered in his day “the patron saint of advertising”.

Anyway, forget all those interesting bona fides; here’s what’s most interesting to me: Benjamin Franklin set his own type.

And it appears he had a flair for what we now call “UX design”. A Journalism history publication observed that he “made ads more readable by using large headlines and considerable white space”.

The importance of “setting your own type” in copywriting

In the digital world, it’s impossible to be an effective UX designer without a strong understanding of technology, especially CMS software, the primary type of software used to create websites and deliver content.

But the connection between UX design and technology expertise is nothing new.

First, what does setting type mean? In the context of printing presses, it simply meant arranging (metal) letters on a printing press to print content onto paper. An enterprising newspaperman might forge his own letters (his own stylized alphabet, in other words), providing control over font style, font-size, and so on.

But even using someone else’s letters, a printer exercises considerable control over the effect of words simply by arranging, aligning, and spacing them on a page.

Today when we write on digital mediums, we accomplish the same task using CSS or a  text editor such as WordPress, MS Word, or Facebook provides. These tools let us “set digital type”.

And it’s just as important today as it was back then. Drupal CMS  founder and entrepreneur Dries Buytaert reflected recently: “20 years later and I’m still learning CSS”.

Now, why would the founder of a major open source project (and CTO of an 800-employee company) spend time learning CSS? Because he writes web copy and an essential part of writing good web copy is “setting type” – controlling it’s displayed. 

I can’t speak for all writers in the three centuries between Ben Franklin’s 1729 newspaper and Dries Buytaert’s 2018 blog, but I’m officially calling it a trend.

Isn’t controlling type the “job” of the web designer?

The short answer is yes, absolutely. The long answer is yes, but it’s not the exclusive job of the designer.

But the “job of” concept makes us chuckle and reflect, ultimately, doesn’t it? Aren’t all job roles, positions, titles, etc., just abstractions and arbitrary divisions of labor – I wonder what Ben Franklin would have thought between the division of labor between UX designer and copywriter?

Well for my part, I think there’s an awful lot of overlap; that’s why I call what I do “copywriting UX design”. In my view, the author of the message should develop the ability to determine precisely how that message is presented.

Counterpoint – are you pumping out “fluff” blog posts as if what mattered was not what you said but that you said something. “Content”, in other words, as opposed to insight? OK, then you might as well ignore the presentation of your message.

But if you are publishing strong opinion, insight, calls to action, sales & marketing copy that works,  or just trying to tell a good story, I suggest you learn to set your own digital type.

Enter Zeldman

On a recent webcast entitled Web Typography & Layout: Past, Present, and Future, web design and development legend and standards-advocate Jeffrey Zeldman, talks about this same idea – but from the designer perspective.

As he frames it in the show’s introductory paragraph, “Can typography encourage long-form reading—not just scanning?”

What a great question. I think Ben Franklin would say yes, as would other copywriters like David Ogilvy, who thought that “short copy is for amateurs”.  Writers like Neil Patel have written about the strategic SEO benefit of very long, well-researched articles.

No one doubts Neil’s remarkable marketing brain (or writing ability), but the question is: how do we make long content readable? Or if we want to get really ambitious, how do we make long content read?

Of course, step 1 is to write well. And that step can be further subdivided hundreds, if not thousands of times. But there are a few key themes that keep coming up when writing digital content:

  • Keep paragraphs short (1 to 3 sentences)
  • Use bullets to express facts or ideas with a tight thematic structure
  • Use tables to express even more tightly structured data
  • Break up your content into mini-articles, each with its own header, following the best practices of the great copywriters

That’s enough to get you started! And that’s also a lot of material and formatting to control. That’s why a comprehensive style guide is such an important part of a web design process. And why a great designer is such a massive asset to the presentation of content.

But a designer can’t always anticipate the exact messages, headlines, and passages that need to be produced. 

A designer’s typography work is a guideline

Consider how many ways the “UX” of web copy affects its presentation – and its ability to persuade, amuse, or educate:

  • Font family (the one thing I wouldn’t change as a copywriter)
  • Font-size
  • Size of the line-height
  • Letter spacing, if necessary
  • Spacing between paragraphs
  • Spacing and line height of each kind of title, subtitle, header, and subheader (h1 through h6)
  • The arrangement of pull quotes and/or blockquotes
  • Use of dual columns, in such cases as long bullet lists
  • Padding and margins or bulleted and numbered lists

“The devil is in the details”
~Mies Van De Rohe

Of course, a good designer will pick out good starting points for pretty much everything on this list.

But even so, they can’t prescribe the flow of your content, writer. That’s your job.

Multi-dimensional content requires copywriting UX design

To make it interesting, not only should our writing be readable and enjoyable, but web copy, at least, is multi-dimensional. In fact, it generally balances three goals, from most to least important:

  • Creating conversions, ie, getting people to take action
  • Attracting visitors by being optimized for SEO
  • Strengthening the brand image

So more than any other type of copywriting, web copy is a balancing act between multiple potential outcomes. Here again, controlling the spacing and layout is a lovely asset to have at your disposal.

Ready to practice? If you want a great place to practice “copywriting UX design”, try Medium.com – their designers have made it easy for you to express yourself clearly and in an aesthetically pleasing way.

If you keep writing there (or in a similar place) long enough, however, you may find yourself unsatisfied with the relationship between your content and what you want to say.

And now you know you’re ready to follow in the path of Ben Franklin, Jeffrey Zeldman, and Dries Buytaert: open up a CSS editor, and set your own type.