The pervasiveness of mobile devices today means audiences want to consume content on whichever browser or device they prefer. As a result, web designers and publishers have rallied behind the idea of responsive design to reach the widest possible audience and promise the reader a great experience no matter what their screen size. But in our rush to make sites work well across a plethora of mobile devices, tablets and desktops, many of us have overlooked a crucial concept: we should be designing for the reader, not the device.
We must remember that the web is fundamentally a textual medium. People use it to read content and complete tasks. Remove the text from almost any popular site and it becomes impossible to use. This means those differences in screen size, device resolution or text rendering don’t matter in and of themselves, but only because they influence how someone will read our content.
That’s why it’s time to change our web design process—to make this user priority our design priority. Designing for a responsive web must now mean starting with type first.
The brand is the type
Ensuring that content is readable, accessible and attractive regardless of the technology used has long been the role of typography. But type is everywhere, so we take it for granted. We forget exactly how much of a brand’s identity is rolled up in the typography. While a brand’s personality starts with its people, its primary expression is through the language it uses to deliver its messages. And that language is delivered through the type. The two are inextricably linked.
From its logotype to its films’ iconic opening crawl, typography has always defined the Star Wars brand. They’ve continued this on the web by using the Antenna typeface by Webtype.
A great message can be undermined by poorly chosen or poorly set type, just as a beautifully scripted monologue can seem trite if performed by a mumbling, bumbling, talentless actor. Typography carries the literal message, and its legibility and readability impacts not just the audience’s understanding of the content but how easy it is for them to hear the brand’s personality.
Edenspiekermann’s brand aesthetic for Redbull Music Academy Radio was built around web typography. On small devices and native apps, it’s the type that carries the brand.
Typography’s role in imparting the implied message is just as profound, and we can see its impact most clearly on mobile devices. Here, the design is often stripped back to its simplest form. Gone are the graphics, gradients and pixel-perfect details. It is the aesthetic personality of the type and the colour palette that influences our emotional response as readers and defines the experience.
With so much responsibility resting on the shoulders of type, why would we ever allow it to be the last thing we focus on?
Design for the reader, not the device
Many of us approach a responsive design project by thinking about how the layout will adapt from one screen size to another using a technique known as a fluid grid. Borrowed from graphic design, grids have traditionally been used to divide up a canvas of known proportions into smaller units. They help establish uniformity and aesthetic harmony throughout a design.
But on the web, we’re designing for a medium that doesn’t have fixed dimensions. Resizing a layout using an arbitrary grid system no longer makes sense.
Designer Chris Armstrong recently published an article on the “infinite grid”. In it, he argues that grids exist to hold content, and it is from the proportions of our content that we should design our grids.
Given that most of that content is text, our grid proportions should be based on type. After all, how can you know where a design break is if you haven’t settled on the font, its size, height and measure?
Seeing type in the browser for better, faster decision-making
Now is the perfect time to set things right, flip the responsive design process, and put type first. Web designers are already embarking on a wholesale transformation of their design process. Where we once drew beautiful pictures of websites in Photoshop or other design software, we’ve come to realise that flat images are no longer the definitive deliverable. It is simply impractical to produce mockups for how every piece of content will look on every potential device.
Driven by the need to test design decisions across devices and platforms their audience use, designers are prototyping working websites earlier in the process. The emphasis is on seeing a design in the medium where it will be published, then adapting as necessary.
Our ability to work with type on the web has also improved dramatically. Until recently, you could only see your web type live at the end of the design process, when your developer began the HTML prototype. Web designers were stuck using system fonts or images of web fonts to approximate the web typography they hoped would materialise at the end of the project —only to watch those designs unravel during the development process.
Condé Nast designed a beautiful palette of web fonts for Vogue UK by using Typecast to experiment with type in the browser from the very beginning of the process.
But today, new typography design tools like Typecast and the widespread availability of web fonts allow us to create our web typography earlier, faster and better than ever before.
Online services like Fonts.com, Typekit and Google Web Fonts offer designers affordable access to a huge range of typefaces. As a result, new websites rarely stick to system fonts like Arial, Verdana and Times New Roman. Instead, you’re more likely to see classics like the Helvetica family or contemporary works like the Harriet Series from Okay Type.
Seeing type in the browser at the start of the design process lets us test how the strokes, counters and size of individual characters feel when applied to groups of letters—even using real client content if we want. We’re able to discover and test how fonts render across browsers and platforms before creating colour palettes, thinking about layout, constructing wireframes, before the prototype is built and definitely before committing to final type decisions.
How to stop screens being “just like bad paper”
Designing for our readers requires us to understand the information that they will find useful and relevant and then shape that content into a beautiful experience. Dealing with the challenges posed by different media is something designers are well-versed in. As Erik Spiekermann said, “screens are just like bad paper”.
By putting type first, we do both. We can be assured of readable content that imparts the brand personality, and from this position of strength we can then make informed decisions about design augmentation that allow us to offer responsive experiences that honour the most fundamental element of all sites: the type.
We first published this article on Wired UK on 19 March.