Beautiful and Effective Web Typography: An Interview with Richard Rutter
Web typography is experiencing its biggest surge since the arrival of web fonts. We sat down with web typography evangelist Richard Rutter to talk about his book on the subject, the potential of variable fonts and how good typography induces a good mood
Typography on the web has come a long way. About a decade ago it was still woefully underused and done very poorly. Texts weren’t very readable online and the same typefaces were used over and over again. People were throwing their hands in the air, claiming you couldn’t do typography on the web well. But there’s one man that has been trying to convince people otherwise, and that man is Richard Rutter, co-founder of influential UX consultancy Clearleft. Now there’s a real surge of excitement about web typography, and he’s at the centre of it.
One of the biggest game changers right now is the advent of variable fonts, a technology that enables a single font file to behave like multiple fonts. “It’s really interesting how quickly this has come out of nowhere,” Rutter explains. “Adobe, Microsoft, Apple and Google have all thrown their collective weight behind variable fonts, and they all have their slightly different reasons. Google’s in particular will be one of performance because you can save an awful lot of space. If you deal with Chinese, Japanese and Korean languages in particular, font files will be a few megabytes in size as opposed to Latin-based font files, which are much smaller. You can radically cut down the size of these files, because you can have a regular and a bold wrapped up together. You’ve just got one font file for an infinite number of variations. It’s also going to be really interesting to see how type designers will provide stylistic variations in their fonts, that are really unusual and that we wouldn’t have seen before.”
Variable fonts can be used in real projects now. Browser support has reached over 65 per cent. Both Safari and Chrome already support variable fonts and Firefox and Edge will follow shortly. The latest versions of Photoshop and Illustrator also support them, and they’re included in the latest Windows and Mac operating systems as well — Apple’s system font San Francisco uses font variations extensively.
Clearleft have used a variable font on the website for Ampersand, the web typography conference Rutter brought back to Brighton in 2018 after almost three years. It’s one of the first commercial sites ever to do such a thing, something Rutter explores in his article, How to Use Variable Fonts in the Real World.
“We set the word ‘Ampersand’ in six different weights,” Rutter enthuses. “Each individual letter is set at a slightly different weight to give it a slightly more hand-drawn feel. There’s no way you would have done that in the past! You would have served it up as an SVG but now it’s real text, and we can do that with a variable font, which is tiny in size because it’s got a very small character set. It’s got the full alphabet and very little else, but that’s all we needed for one word.”
Better layouts with CSS Grid
Another new groundbreaking tool is CSS Grid, which is revolutionising web layouts. “Typography and layout have always been intrinsically linked,” Rutter points out. “The fact that Grid is coming along at the same time as variable fonts technology is very exciting. Grid has been adopted very quickly, and you can use it now. I’m still getting to grips with what it can do because it frees up so much for you in terms of how you can lay out a page, and it’s inherently responsive as well. It’s very, very powerful. There’s a bit of a learning curve, but anything written by Rachel Andrew or Jen Simmons will put you on the right track. We’ve got to really embrace it as designers. It means we can go back and look at all these lovely things that we saw done by brilliant print designers back in the 60s that have always been too hard to do on the web. We can do them now!”
Rutter initially studied chemical engineering and, long before founding Clearleft with Andy Budd and Jeremy Keith in 2005, began his career designing bits of oil rigs. He first discovered his love for typography in the mid-1990s. The web came along and anyone could build a web page if they could type some simple HTML. Rutter found it very rewarding, so he got into design and with that came typography. “In my first proper job as a designer at an agency in London, I was introduced to Robert Bringhurst’s book The Elements of Typographic Style,” Rutter remembers. “It was a revelation. I was fascinated by the way he was typesetting pages and the thought processes behind it. I realised — and fell in love with — the fine detail that he was putting into his work. It really resonated with me. There’s a wonderful geekiness to it. There are a lot of tiny, seemingly meaningless, details that sometimes only you or other typographers can see. It’s your own special code in a way but if you get enough of them right, then the whole thing comes together to be something beautiful and enjoyable. They all improve the reading experience.”
No good user experience without good typography
The discovery of Bringhurst’s book prompted Rutter to start writing about typography on the web. He wanted to show people how to apply Bringhurst’s guidelines using techniques available in HTML and CSS and became a self-appointed web typography evangelist. Ultimately, it led to Rutter’s own book, Web Typography, a handbook for designing beautiful and effective responsive typography. Originally, it was meant to be co-written by Mark Boulton and fellow typographer Jon Tan, who Rutter co-founded pioneering web font service Fontdeck with (now closed down). It was also going to be published through Boulton’s Five Simple Steps, which shut down when his agency was acquired by Monotype. Despite the setbacks Rutter was committed to the project and decided to go ahead on his own, without a publisher and with the help of Kickstarter; his campaign reached its target in less than 48 hours.
Web Typography is aimed at both designers and developers and blends together typographic theory with the practical and technical. Rutter tried to include everything he could possibly think of that would be relevant to web typography. One of the theories he covers focuses on how you can’t have a good user experience without good typography.
“Looking at words is the vast majority of what we do on the web,” he points out. “Millions of people do it every day, and the type is the experience much of the time, which is why it’s so important to get right. A few years ago a study done by Microsoft in collaboration with MIT tried to compare the difference between what was deemed to be good typography and bad typography. There was no significant difference in terms of the speed of reading, retention of information or even comprehension. The core thing they found was that with good typography the speed of reading felt faster and there was an overall sense of relaxation and enjoyment. With bad typography, people were frowning more, so essentially they found that good typography puts you in a good mood. If that’s not the ultimate user experience, I don’t know what is!”
Creating joyful typography
Rutter argues that all typography starts with an effort to make sure it’s not broken, which includes things like line length, consistent spacing, and the text being in an inappropriate size. While the predominant issue in days gone by was text that was on the tiny side, these days Rutter also finds himself pointing fingers at text that is too big — forcing him to sit back in his chair just so he’s able to read what’s on his screen. “First you need to get the basic typesetting rules right,” he advises. “Then the reader needs to intuitively know how important once piece of text is relative to another. They need to be able to scan and find the the information they want. The typography needs to be able to draw you in, then get out of your way and not stop you getting into a flow of reading. These are the things that build up to typography being joyful.”
Both in his book as well his workshops Rutter dives deep into responsive design, which he says is what fundamentally separates the web from print but also what brings out its beauty. “In print you have almost complete control over what ends up in front of your reader. The only thing you don’t have control over is the light conditions, under which someone is reading your text. Other than that everything is fixed and you get to dictate all of it.”
“On the web the reader has a huge amount of control. They choose the device, they can bump up the text size, change the size of the window — everything is in their hands. All you can do as a typographer is set guidelines, and they need to work under all kinds of circumstances and for all kinds of devices. It’s just a mindset you have to get into.”
When asked what currently excites him about web typography apart from variable fonts and CSS Grid, Rutter is quick to shine a light on OpenType features and one tool in particular, Wakamai Fondue, built by Roel Nieskens, using Fontkit and Vue.js. Typographers will delight in the tool’s easy of use — you can just drop a font on the tool right in the browser and it will tell you about the font’s features and even give you all the CSS needed to use them in your web projects. “It’s doing everything I’d want it to do,” Rutter exclaims. “It shows you these wonderful characters that are being built into a font. It’s just a terrific tool.”
Typography matters, whether it’s in print or on the web. If a text has anything significant to say, then it needs the typographer’ care to make sure that what’s being written comes across well, which will in turn be repaid by the reader’s attention. Finally, we have the tools to do a text justice on the web and make the reading experience as good as possible. But now we can also be really creative with typography and focus on the impact it can have, no matter what kind of device the reader uses.
This article originally appeared in issue 308 of net magazine in 2018 and has been reviewed by Richard Rutter before republication.
