Typography-First

The typeface you pick for your website or blog is the most important choice you ever make.

It defines who you are, what your brand stands for, and who it is talking to.

Most copywriters don’t know too much about typography. Designers either. But that’s about to change with the publication of The Web Designer’s Guide to Perfect Readability.

Here’s how I got involved and why you need to get reading.

A year or so ago…

My cousin, Stephen Shaw, over at An Artful Science, came to me with an idea.

He’d begun to fundamentally re-examine his approach to design. In particular, he’d come to realize the primacy of the reading experience over the design experience.

In a nutshell: Typography-First, Design Second.

But he came to me with more than just an idea. He’d watched countless videos and read innumerable books and articles on the subject. He’d mastered the history, purpose and power of typography, seeing it as not just a conveyor of information and brand stories, but the jumping off point and focus of mobile-friendly design.

Now he wanted to do something cool on the outside but daunting in the middle: Condense everything he’d learned into a free, 10 step guide for other web designers to use.

With a twist: The guide had to be living proof that a Typography-first approach made money.

The guide had to show that great fonts + great design + great content = engaged readers, a shedload of backlinks and social shares, and Google love.

It had to be both a guide and a case study.

Here’s how we put it together…

Like I said, Stephen was way ahead of me. Still is. So he started by sending me all the articles and videos he’s watched and read so I could read and watch them myself.

While I was busy playing catch up, he sketched out the framework and the individual steps the guide required in order to comprehensively get everything across.

Into each step, he then poured all the information he’d gleaned on each subject.

Up to speed, and while Stephen went to work building the perfect template to showcase the perfect guide to perfecting web typography, I did some research of my own. Adding new ideas and content that we then spent the best part of a year razoring, editing, polishing…

And then we were done. Kind of. Because the entire guide was big, weighing in at over 17,000 words.

It was also full of quotes, graphics, videos and references. The intro and step 1 alone include contributions from Jessica Hische, Jeremiah Shoaf, Oliver Reichenstein, Jeffrey Zeldman and Kenneth Ormandy to name a few.

All lovingly showcased. Here’s a quote from Tim Brown:

Each contributor needed not just to give us a thumbs up for using their ideas, but as they were central to the veracity of the argument, we wanted their feedback – positive and negative – on the direction we were taking.

So after reaching out to them and taking their feedback on board, we released the introduction, which goes into the history of the Typography-First approach.

As a teaser, here are the opening paragraphs:

And the first step, which shows you how to base your font choice on a detailed understanding of your target audience.

We actually conducted research into the reader personas of the people we wanted to read the guide, including the fonts used by the publications they love, font choices that helped shape the fonts we chose for the guide:

So has it been a success?

The reception has been overwhelming. Huge approval from all those whose ideas we are building on. Hundreds of people sharing the guide on social media and signing up to the newsletter to keep tabs on the release of step 2 (we will release a new step each month).

We now have both a guide and a case study proving the business case for combining great typography, great design, and great content.

So go check it out. Read it. Use the ideas in your work. Sign up to the newsletter for the next release. And share it on social media.

If you want a superbly designed and written guide for your website or blog, get in touch.