A web designer’s guide to

Typography-First

Why Typography-First? Un-plug from the design Matrix The web is still 95% words


We’re in an attention war. The battleground is mobile, 4.7 inches tall, 2.64 inches wide. Businesses scrap over it. Buy it. Sell it. Trade it. Attention is fuel. Light. Inattention is death by tumbleweed.

But full attention is a reading experience, not an aesthetic one. The web is not an art gallery, it’s a newsstand chock full of brand stories dying to be read. Google decides the tales worth telling. It falls to web designers to design the perfect reading experience. We believe the Typography-First method is your secret weapon.

The 10 Steps & Guide Content ↓

Using a Typography-First approach to website design adds many more exciting options to be creative, not less.Stephen Shaw · via @anartfulscience

Un-plug from the design Matrix & approach your work Typography-First

 The idea that web designers should un-plug from the design Matrix and approach their work from a Typography-First perspective isn’t new. As both a concept and a design methodology, Typography-First has a history. A history marked by often contentious articles and videos published by some of the world’s most influential strategists, technologists, interface designers, typographers – and web designers.

A history most Typography-First converts agree was kickstarted by the seminal article, Web design is 95% typography by Oliver Reichenstein in 2006. There, Oliver started out by stating the obvious:

95% of the information on the web is written language.Oliver Reichenstein · via @reichenstein

But then he drew a conclusion that stirred up a storm:

It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.Oliver Reichenstein · via @reichenstein

A global storm of protest from indignant web designers so vociferous that Oliver felt compelled to explain himself. Which he did a month later and in withering fashion in reactions to 95% typography:

Looking at the state of web design today, and the wasted know-how we have about typography, that is what should make us angry. Maybe the title was a mistake after all. Instead of saying 95% of web design is typography, I should have kept the original title: Web design is all about typography. Period.Oliver Reichenstein · via @reichenstein

The Typography-First, design second flag had been planted. And a lot of sympathetic designers and typographers heard the call.

In chronological order, below is a selection of some of their notable contributions. Note how we move from theory to practice, particularly with the advent of responsive design.

Despite all the selfies, TED Talks and cat videos, the web is still 95% words

 Ten years on, things have changed. But when it comes to business, we rely on words. We search with words (increasingly the spoken word). Scan the SERPs (more words) and, in few very short seconds, decide whether to read on. Or refine our search (yep, more words). Words sell, not just the design.

And as SEO gurus like Brian Dean know well, you can have the most perfectly SEO optimised page but if the content doesn’t answer the searcher’s question and lead to shares (more words!) or backlinks, no amount of design voodoo will save your client’s company site or blog from Google.

And Google ranks sites not on your design but on bounce rate and dwell time, signals not just of quality content but a quality read. Content might be King, but as Cyrus Shephard over at Moz sagely pointed out, the Queen is a reader:

If content is king, then the user is queen, and she rules the universe. Let’s say that again, because this is important. The user is queen, and she rules the universe.Cyrus Shephard · via @cyrusshepard

And that Queen is mobile. As Zeldman observed in his 2015 roundup, ‘The Year in Design’:

Mobile is today’s first screen. So design responsively, focusing on content and structure first. Websites and apps alike should remove distractions and let people interact as directly as possible with content. 90 percent of design is typography. And the other 90 percent is whitespace.Jeffrey Zeldman · via @zeldman

So what does adopting a mobile-first, content-first, typography-first approach mean for you as a web designer?

 Certainly not that you should start designing sites that resemble an “unfriendly text sahara” as Oliver calls it. But there is a good reason why Google and Apple – arch mediators of our reading habits – have offered their users design-decluttering Reader View modes.

We are also not arguing that choosing to approach your work Typography-First necessarily relegates design to second place – quite the opposite. Typefaces are works of art and knowing how to select and present them in the best light gives web designers more design work, not less. It also gives them – as typography-first designers – a competitive design advantage.

But what we and all the designers and typographers are saying is that design should support and enhance the reading experience, and it should do so in an unobtrusive way. This applies to the typography too.

In 2015, Tim Brown released another video, hilariously titled: "Typesetting Body Text Like a Pirate Jedi with a DeLorean." Here he argues that the aim of your text is to be ‘invisible’:

Body text is everywhere. It’s the majority of text you want people to read. It sets the tone for entire experiences. And when it’s done well, no one notices. So it’s shocking when we see typefaces eliminated from mobile experiences, which are people’s primary computing experiences.Tim Brown · via @nicewebtype

By now, you’re probably thinking: thanks for the history lesson. But I don’t create the content. I don’t have the time to go to typography school. The client should hire a typographer and a copywriter…

I felt the same way. But then I looked at the stunning work being produced by type-friendly graphic and web designers like Jeanne Bataille or Gracie Smith or Roger Black or Tim Van Damme or Chiara Aliotta or Rina Miele or Trent Walton or Kenneth Ormandy or Antonea Nabors or Marcin Wichary or Jessica Walsh and Jessica Hische. And the clients they work for.

So I spent a year learning typography and how to use the Golden Ratio to structure content for max readability. I put everything I learnt into this website to see if it worked – it did. Then consolidated all this learning into a ten step guide.

A practical guide designed to help fellow web designers apply a Typography-First methodology into their work. And not a year from now, now-now.

Typefaces give us tone. They give us personality. They give us background. They give us context. They give us dimension. How can you design a page and not consider these things first? You should be able to view a page, without even reading it, and still feel what it’s trying to convey. That’s the power of typography.Rina Miele · via @honeydesign

So click on the link below to read the first step on typecasting your target audience. But before you do, make sure you sign-up for the free newsletter. And don’t forget to share this guide with friends and colleagues on social media. You’ll unlock the hidden Typography-First settings when you do.

Get started with Step 1: Typecasting →
TopMenu

Newsletter

Keep updated. You’ll be the first to receive links to each step in my Typography-First guide before they're released.

Close
Open navigation