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.

On this page

¶ Please Note. Each new step in the Typography-First guide will be sent out first to my newsletter subscribers. They also get the final PDF that includes an exclusive bonus step on mastering
OpenType. Subscribe here. Yes, it’s free. 

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.

2010

We have an opportunity – an historic opportunity – to take the best that people have done with typesetting and design and apply it in a new way. And I think that way starts with type. I think that from that most atomic unit – type – whole experiences can resonate. Whole experiences can be harmonious. And whole experiences can have a purpose suited to our design intentions.In 2010, Tim Brown, Head of Typography for Adobe Type and Typekit, released a video calling for More Perfect Typography. Just like Oliver, Tim invited designers to embrace typography as the key to making the web experience – at its core a reading experience – a whole lot richer.

2011

I feel that a Typography-First, content-out approach to web design moves us one step further away from the unnecessary distractions of design-for-design’s-sake and one step closer to becoming true typographers.2011, designer, speaker and author Elliot Jay Stocks added his voice to the debate in his brilliant article, The typography-out approach in the world of browser-based web design.

2012

This redesign is a response to ebooks, to web type, to mobile, and to wonderful applications like Instapaper and Readability that address the problem of most websites’ pointlessly cluttered interfaces and content-hostile text layouts by actually removing the designer from the equation. (That’s not all these apps do, but it’s one benefit of using them, and it indicates how pathetic much of our web design is when our visitors increasingly turn to third party applications simply to read our sites’ content.)2012 saw the publisher of A List Apart Jeffrey Zeldman enter the fray. Like Oliver his new approach divided his audience. So in his Web Design Manifesto 2012 he explained why his blog had gone type-first.

2012

I know, it may sound weird and you probably expected to plan the spacing first, do the layout next, and then fill it out with some content, etc. The reason why I start with the typography first is that I don’t want the layout to influence how the typography should look … I think typography should influence the entire website style.Also in 2012, Rafal Tomal, Lead Designer at Rainmaker Digital, confessed that he started every design by defining the typography he was going to use. Anticipating surprise in his web design audience, in Start The Visual Design Process By Defining The Typography First, he explained why.

2012

If a design is not enjoyable to read then it is not an enjoyable experience, no matter how many images, colors or sounds you decide to add to it.One more from 2012, this time from Paul ‘Scrivs’ Scrivens. In One More Time: Typography Is The Foundation Of Web Design, Paul shifts the focus onto how design should be the friend of readability, not its enemy.

2013

Making responsiveness only about grids, responsive images and media queries is a disservice to customers and brands. It needs to be about providing readable content for any device, and that means starting with type…. we should be designing for the reader, not the device.2013. Paul McKeever, senior director, market and product strategy at Monotype wrote Designing for a Responsive Web Means Starting with Type First. Typography as the key to responsive design had arrived.

2015

If we start by designing one great paragraph, down to every fine detail and nuance, as our content builds out, so will our typographic system, giving us a flexible, robust and considered foundation for the entirety of our content and the site beyond. This is true for any sort of site, but even more so in the age of responsive web design when our content needs to work well across nearly limitless numbers of screen sizes, resolutions and technologies.Skip to 2015 and Jason Pamental’s‘The Life of ¶: The History of the Paragraph’. Author of ‘Responsive Typography’, like Tim Brown and others we will look at later, Jason argued that we should start with the body text.

2016

The average person with a smartphone or laptop and a stable internet connection probably spends more time interacting with typography in a single day than with food, music, and family combined. The majority of the web (and our lives) is type-based. That was the case in 2006, is still the case 10 years later, and will continue to be true until the day we’re all communicating via holographic emojis (2020?).2016. Last but not least we have Toronto-based design agency, Studio Function, who posted the latest article on Medium. Here’s the intro from Typography tips for a better user experience (notice how they refer back Oliver’s 2006 article).

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.

Google ranking

Google pays very close attention to “dwell time”: how long people spend on your page when coming from a Google search. This is also sometimes referred to as “long clicks vs short clicks”. If people spend a lot of time on the site you design, that may be used as a quality signal.

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

Jeffrey Zeldman

An Event Apart Boston

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

Need a web strategy blueprint for your online business?

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.

Tim Brown

More Perfect Typography

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

Tim Brown

Typesetting Body Text Like a Pirate Jedi with a DeLorean.

The goal of the Typography-First designer is to find that sweet spot where the font, layout, and design work together to serve up the perfect mobile reading experience, one that enables the user – the reader – to feel at home.Stephen Shaw · via @anartfulscience

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…

Kenneth Ormandy

Efficient Web Type, c. 1556

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.

Typography is set using a modular scale 1.333, a perfect fourth. Icons, visual assets and Grid widths are set at 1.618, the Golden Ratio from a 66 Character reading length measurement. Vertical Rhythm is set at 1.618 from the breakpoint base font size.
The text face is Sybilla Pro  the captions and titles are set in Calluna Sans, code clips in Pragmata Pro & Typography First logo in Clarke.