If you believe brand attention is a valuable resource, then the tools that conserve that resource are likewise valuable. Typography-First™ is one of those tools.
Typography-First
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 you to create the perfect reading experience. We believe the Typography-First™ method is your secret weapon.
New book coming soon (see below for details) ↓
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:Oliver Reichenstein · via @reichensteinWeb design is all about typography. Period.
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.
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.Cyrus Shephard · via @cyrusshepardThe user is queen, and she rules the universe.
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?
Certainly not that you should 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 options, 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.
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 you apply a Typography-First methodology into your brand strategy. And not a year from now, now-now.
Join the wait listTypefaces 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
