The future of responsive typography

by Chris Thomas on 25 November 2015

"Web design is 95% typography", design studio iA said in an influential blog post back in 2006 – a statement that still more or less holds true today. Nowadays, people can be reading that typography from pretty much anywhere, on any kind of device.

Although you can't always know exactly what device someone is using, you can make an educated guess based on the size of their screen. From this, you might infer something as to their reading position – someone reading your text in a phone-sized browser window is likely to be much closer to the screen than someone reading it on a 27-inch iMac. The way you set your typography should adapt accordingly.

typescale.png

Above: the diatonic scale from Robert Bringhurst's "The Elements of Typographic Style". This is the scale you will find as default on most word processors.

A pretty standard type scale would have you using 16px as your base paragraph size, with complimentary sizes for headings, subheadings and so on. But for very large screens, with your users likely to be sat further from the screen, you might start to increase that base, maybe rising to 18px, with other sizes changing proportionally. As a result your audience can read more comfortably, and don't have to lean into their screens or strain their eyes. Conversely, on a smaller mobile device, you might reduce your headings so that they take up less vertical space, and can be read in that narrower space. This has all been fairly standard practice since the advent of responsive design.

People designing for screens are now faced with an even larger surface to consider – TVs. With the increasing popularity of smart TVs and web-connected boxes, TV apps are going to growing demand – and designers are going to have to adapt to this new medium. Given that TVs are generally anything from 30' to 50' in size but people are likely to be sat much further away from them, how do you begin to calculate a working type scale that can work for them all?

Size Calculator is a tool developed by Nick Sherman and Chris Lewis for calculating type size based on your distance from the reading surface. For a television, you might estimate your reading distance as 2 metres, and want the perceived size of your body text to be 16 pixels. Run that through the calculator and the ideal physical size of your type comes out at 34 points (roughly 45 pixels). This size would seem enormous when you're sat in front of your computer designing it, but should be just right when you're viewing it from your sofa at home.

sizecalc.jpg

Above: Size Calculator

On the other end of the scale – how do you set type for something really close-up, like a VR headset or glasses? Or something tiny, like the interface of a smartwatch? There definitely isn't space for the recommended 45-75 character line length on one of those. I can't help but think of something like Spritz, a start-up that has completely reimagined the way we read. By forcing you to focus on just one word at a time, but showing them in quick succession, it is possible to digest a text at great speed. Have a go on their site – I found it comfortable enough reading at 400 words per minute, which is around twice as fast as a normal reading speed. This technology seems a perfect match for screens where space is in short supply, though it remains to be seen how open people are to reading in this way. I wouldn't read a novel or poem in this way, but a text or email – why not?

 

spritz.gif

Above: A demonstration of Spritz in action, at 350 words per minute. Via Gizmag.

As with all these things, the only way to truly test is to see it in the environment it's meant for, with your own eyes. And then preferably with someone else's eyes just to be sure. Especially when making use of new technologies, you can't be sure how well your audience will receive it until it's in their hands (and eyes).

It's a lot of work, adjusting your type to work within all of these different screens and contexts. But perhaps it won't always be. Have a look at this interesting demo by Marco Dugojić. Using your computer's webcam, it adjusts the size of the text in real time, depending on the distance you are from the screen. You could go further and add more intelligence to this – feed in any information on visual impairment or colour blindness, adapt screen brightness to your surroundings, and so on.

livedemotypesize.jpg

Above: Adjusting the size of the type using nothing but my own mug

Of course, we're some way off this being practical for every project, but perhaps one day "responsive typography" will be closer to this ideal – constantly sensing and adapting to the specific needs and environment of an individual reader.

Keen to learn more? Check out our Visual Web and Interface Design course!

Jack says 12:32pm 01 Dec 2015

Really good article and a valid point. It's annoyed me for years that responsive websites with nice big typography on desktop don't down scale text size on narrow viewports for mobile screens.

Thank you for your comment. It has been submitted for approval.

Comment Again?

Leave a comment

Please enter your name.
Sorry, this email address is not valid.
Please enter your comment.

Course basket x

Course

Price per place

Add another courseCheckout

Pay now by credit card or later by invoice (invoice payments only possible if all courses are 3+ weeks in advance)