Responsive Web Typography News

Q&A with Richard Rutter, Web Typography Expert

Richard Rutter, world-renowned authority on web typography, will be in Dublin on March 7th to deliver a full day, hands on workshop on Typography for the Web.  

We caught up with Richard before his visit to Dublin for a chat about fonts, kerning, rems and ems and his thoughts on the ubiquitous Helvetica.

Why does typography matter on the web? With people only skimming and scanning so much of what they read online, what difference does it make if there is good or bad use of typography?

RR: Research by Microsoft and MIT has shown that there are indeed important differences between good or poor typography that appear to have little effect on reading speed and comprehension on the web. However, the same study indicates that when the typography is good, there is significantly more engagement during reading. And that’s what it’s all about – engaged readers!

There are a myriad of details that make up good typography, kerning, padding, colour, font-size etc What are the most important elements to keep in mind for readability of a simple paragraph?

RR: There are three factors that combine to make a paragraph readable: line spacing, the width of the line and the text size. It is important to find the correct balance between these three things for optimum readability.

Choosing the right font for a design can be very tricky, as well as deciding what size to use. Some fonts appear bigger, even though they are the same size. Why is this?

RR: Yes, different fonts have different heights and widths, making them look different to the reader, even when they are the same size. For example, if you set a paragraph of Helvetica at 16px, the same copy in Futura would have to be set at 20px in order to be look about the same. So it is important for typographers to take these differences into account

How important do you think it is for designers to build up their library of paid fonts?

RR: Basically you get what you pay for! Thankfully foundries have realised the necessity of the testing model where designers can try before they buy. The problem with free fonts is that they are often short of characters, the rendering is poor and the kerning leaves a lot to be desired. There are a handful of decent free ones but designers are limited in what they can do with them.

Do you have favourite font foundries that are your go-to source of fonts?

RR: The fonts from FontSmith are great. They work so well on screens and you can bend them at your will. The power of typography is that it can really set your product apart. As German typographer Erik Spiekermann said, “All you need is a typeface and a colour”. And yet so many companies today are using geometric sans serifs, like AirBnB, and it does not set them apart.

Where do you begin when choosing a typeface?

RR: I usually refer to one of my preferred canon of typefaces and then ask a series of questions – what characters do I need, do I require special ligatures, Turkish names, am I looking for a Superfamily? And then, the crucial questions is what do I want readers to feel? What do I not want to say on screen to my reader? I would recommend to designers to source some real content and then think about what impact do they want to have on the reader. There will be a whole section on this in the workshop I will give in Dublin.

Does a typeface make or break a design?

RR: The typeface should be the design; it should serve the typesetting. The choice of typeface is decided only when you know the precise requirements of the project.

What else can you tell us about the workshop?

RR: It will be very much about what you can do with fonts, covering some of the basics of typography and then looking at the responsive canvas. My book is a sequence of guidelines for designers using typography and we will cover about 20 of these guidelines in the workshop, including

  • the basics of responsive typography
  • typesetting applied to the web
  • adapting for responsive screens
  • media queries
  • variable fonts and how to use them in responsive design

Will you cover display text?

RR: Yes, we will also be looking at using text almost as if it were an image, setting up an emotional state for the reader, nailing an emotion. Display text can be so much more visceral and impactful when properly designed.

One last question, the ubiquitous Helvetica. You referred to it earlier when talking about the differences in font size. It is also often the go-to font for designers. What is your opinion?

RR: Helvetica is just one of a selection of grotesque, serif, mid-century fonts. There are so many others to be explored. I believe Helvetica is lazy option for designers who are actually afraid of trying an alternative. It’s too easy!

Book Your Spot in Richard’s Workshop on March 7th from 9am – 5pm

Become a member

Find out how you or your company can become a member of Design Enterprise Skillnet.

Learn More

How it works

Find out more about how The Design Enterprise Skillnet works.

Learn More

Sign up to our newsletter:

Follow Skillnet on twitter Follow Skillnet on Instagram