Designing for a Responsive Web Means Starting with Type First

Type matters. How to use typography in responsive web design

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.

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.

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.

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?

Read full article here: Designing for a Responsive Web Means Starting with Type First | Design in the browser with web fonts and real content — Typecast.