Full Transcript

Adam Churchill: Welcome everyone to another edition of the SpoolCast. Earlier this year, Richard Rutter presented a virtual seminar called, "Typography in Responsive Web Design." Richard's seminar, along with 112 others, that teach the tools and techniques you need to create great design, is now part of the UIE User Experience Training Library.

In the seminar, Richard explains why typography is like a visual hierarchy. He shows what to watch out for with the OpenType, and how features on the edge of CSS can make or possibly even break user experiences. Our attendees left with tools and practical techniques that they could immediately apply to their own designs.

Hey Richard, thanks for coming back.

Richard Rutter: Hi, thanks for having me back.

Adam: For those that weren't with us that day, can you give us an overview of what you covered in the virtual seminar?

Richard: I talked about why good typography is a necessary component of a good user experience. I opened up by quoting some scientific research that was done fairly recently. It had a few crucial things that are really good for us to know.

One is that it proved that good quality typography is responsible for greater engagement during reading. What that really means is that participants in the research significantly underestimated the time taking to read type which was set well.

The overall conclusion of this research is that good typography induces a good mood. In other words, good typography is inherent to a good user experience. It then became necessary, I felt, to try and talk about some of the things that I think make for good typography. What is good typography.

I spent some time talking about responsive design with typography as its basis, about paying attention to microtypography, the tiny little things to get right in your designs. Choosing and pairing fonts carefully. I also went into some technical detail about your options for loading Web fonts, particularly with a view to loading fonts over slow connections on phones, for example.

Throughout the whole talk, I built up an example page. I started this off by picking on a simple paragraph of text, and setting that for comfortable reading. Then using a few media queries, end-based media queries, so they're based on the text size, to adjust things like line lengths and so on for different screen dimensions. That paragraph is comfortable to read, regardless of the screen that you're trying to read it on.

I looked at a few other things along those lines, such as type scale, for example. When you've got a very small screen, you haven't got the scope to have really big headings, for example. That's obvious, but you look at many responsive designs at the moment, and you'll see some have got huge headings which take up the entire screen, and you have to scroll straight away to even get to the first paragraph.

I talked about a few other things along those lines. When it came to microtypography, I was trying to concentrate a fair bit on the OpenType features, which are features of fonts, which were available to us with CSS3.

Those are things like different types of numerals, so you can have lining numerals and old-style numerals, which are like capital numbers and lower-case numbers, if you like. The different scenarios in which you would use those.

Picking out one of typography's old favorites, which is using real small caps, as opposed to tiny little capital letters. Tried to convey why those are different, and why it's important to remember they're different.

Choosing fonts and pairing fonts, in particular. With choosing fonts, let's have a look at that to start off with. I was thinking about the requirements that you would have before you go and choose a font. You can get yourself a reasonable short list of practical things that font's got to do for you.

Does it have the characters in there that the reflect the languages that are being used on the site, for example? Does it render well at the sizes that you think you're going to use it on, on different screens and different operating systems?

All of these things that you can try out to decide, from a purely practical point of view, whether the font is right for you, before you even go down the lines of more subjective views. Does the font say what the text is saying?

Pairing fonts, I gave a few hints about how to try and make that easier. Picking a superfamily which includes a sans and a serif, for example, that have been designed by the same designer to work together. That's a really easy way of knowing if they're going to work. Picking fonts by the same designer which are different fonts but may still work together, this kind of thing. Using type foundry websites to help along the way about which typefaces individual foundries are saying go together.

There's lots of information there to help you make these choices beyond "Does it just look right?" or "Does it look wrong?" I showed a few little things about the internal shapes of the letters, to try and explain a bit why some fonts look right together, and some clash.

All along, building up an example page, to try and put all of these into context.

Adam: There were a lot of great questions from our audience, Richard, and there were some that we wanted to revisit. Both through the virtual seminar folks, and people that were following us on Twitter.

There were a bunch of questions or inquiries about the size of the typography. What's your recommendation for a unit to measure type? Em, pixels, percentage, what do you find is the most effective? Are there problems you run into with any of those?

Richard: Nowadays, all the cool kids are using Rems, which is relative ems, and they're backing those up with pixels. My design agency, Clearleft, that's certainly the approach we take now.

It used to be, and I've written quite a lot about this, that pixels, although really easy to use in terms of setting type size in CSS, tended to be frowned up, mostly because of our old friend, Internet Explorer. In Internet Explorer 6 and older, if you set text in pixels, then the native controls within the browser wouldn't let people resize the text.

If someone reading the page needed bigger text, maybe they had a really high resolution screen, or more likely they were short sighted, they want the text bigger. IE 6 wouldn't allow them to change the text size, if you set text in pixels.

IE 6 has somewhat gone out of the equation now, but at the time, the alternative was using ems. Em is a typographic unit. One em is equivalent, roughly, to the width of a capital "M," that's why it's called an "em."

They were used, and they work really well, but they become quite hard to manage because they're all about multiplications and they're inherited. If you have a paragraph, in a list, in a div, inside your body, it all becomes a bit complicated. Text becomes much smaller, and it's harder to work out, basically, the mathematics that you need to start applying in your CSS.

If you're on a big production-scale website with lots and lots of front-end developers, it can be incredibly difficult to manage, which is one reason why pixels never went away.

The rem is a new unit which was introduced, I think, in CSS3. That works like ems, but it's all relative to the root pixel size. That's basically the text size of the HTML element. Typically your HTML element will be 16 pixels. If you have an eight one, and you set that to be two rems, then it will be 32 pixels.

In terms of Internet Explorers, only IE10 I think, possibly IE9, supports rems. So currently in style sheets, one tends to put pixels first and then rems afterward, just as a fallback until those pixel rules can be made to go away.

All versions of Firefox, and WebKit-based browsers worth speaking about, all support rems. They give a best of both worlds, is the idea with those.

Adam: Lots of talk about, in designs, doing the right things for the many varying screen sizes that designers are forced to think about. What do you recommend? Do you recommend scaling text sizes for different screens? What's the best approach for that challenge?

Richard: The fundamental approach, with all responsive design, which is really what you're talking about there, is making your designs respond, adapt, to their different environments. Which would normally be a different-sized screen. Sometimes a different-size resolution as well. The fundamental thing is not thinking about screen sizes, because there are far too many of them. It's about thinking, "When does my design break?"

There's this key thing within media queries, which are these rules within CSS in which you can apply properties and CSS rules specifically to certain screen sizes, for example. Those are called break points. They're called break points, as far as I'm concerned, because they're introduced when the design breaks. When a paragraph gets too long to read, you introduce a break point to say, "The design has broken at this point when the paragraph has got to a certain length, so I'm going to write a CSS rule to shorten that paragraph, to make it easier to read again." That's your fundamental way of thinking.

The same applies with text size. I think about it a little bit earlier on. When you have a small screen, you don't have the scope to have the variation in font size. Often, the most useful thing to do is look at what the browser defaults are for that device. Particularly, small screen smartphones.

The browser default text sizes for h1s, for paragraphs, for h2s, tend to be about right. There's a pretty good reason for that. When you start thinking about bigger screens, where you've got much more space, particularly vertical space to deal with, you'll find that you want to exaggerate the differences between headings and body text.

Not only is there more room for bigger headings, the balance feels better, as well, if you're making your headings. The only way you can do that, again, is with media queries. Looking at it, saying, "When the amount of vertical space in the screen hits this point, the design starts to break. It feels like the headings need to be bigger." So you make the headings bigger. That's the general approach.

You take that for every part of your design, as far as I'm concerned. It can mean that you end up with quite a lot of break points, and lots of break points doing not many things. Whereas, perhaps when you first started doing responsive design, we thought, "OK. I'll do CSS for a phone. I'll do CSS for a tablet, and I'll do CSS for a big screen." You have basically two break points there, in between the three sizes, but I don't think that's the way to do it.

I think it's all about looking at a design. When does it break? Which bits break when? Applying rules at that point. Probably takes longer. Perhaps, arguably, but you get the better result, I would say. Certainly a longer-lasting result.

Adam: Richard, towards the end of the virtual seminar there were a lot of examples you were sharing. You got into some discussions of fonts sitting well together, pairing up fonts. How are you making that judgment? Is it based upon feel and your experience, or are there specific features that you're watching for there?

Richard: To be honest, it's really down to feel. It's down to feel to a point. If you are picking a sans and a serif from a superfamily like, say, Centro or Carmina or Museo or any number of huge families that are available now, where there are sans and serifs designed together, then you know they're going to work together. Then when you're designing with them, you can see that they're working together, and that's the thing.

When you're picking fonts to pair together, it tends to be you have a gut feel as to whether they work together or not. It's like hearing two notes on a piano. You know whether they're in harmony or not. Sometimes, when you press two white keys right next to each other, they clash because they're too close. If you press two keys which are three or four apart, you get a nice sounding harmony.

There's an analogy with type faces, as well. If they're far enough apart, they'll probably sound OK. If they're too close, then they start working against each other. That's trying to examine a reasoning as to why two fonts might not be working, but ultimately, it's what are your eyes telling you?

Like I said, if you don't trust your eyes to do that, then there are ways of getting around it. In the same way that you can come up with color schemes by using all manner of color scheme generators online, which will look at opposite colors, and harmonious colors, and things like that. Mathematically generated, based on algorithms, that we know the colors will go together.

You can pick rules like that with type faces as well. Like said earlier on, from the same font family is a really good start. Looking at individual designers, individual foundries as well, often have a certain feel. They will often, in order to sell more fonts, helpfully tell you, "This type face goes with this type face, so we recommend you buy them both." There's a vested interest with the foundries to do that for you. Of course, it does give you some useful information along those lines as well.

Adam: Richard, before we let you go, one of the reasons why we asked you to do this virtual seminar for us is, you create a wealth of resources for the design audience on typography.

You run a website called webtypography.net. You organize a wonderful conference called Ampersand. I hear there are rumors of a book coming out from you, from the Five Simple Steps folks. Can you share with our audience a little bit about each of those?

Richard: Sure. Webtypography.net is a site I started putting together in 2005, and I'm trying to keep it up to date. It's taking Robert Bringhurst's books, which some people call the "Typographer's Bible." It's called "Elements of Typographic Style," and it's picking up on the guidelines that he writes about there, and explaining how to do them in CSS and HTML, if they're relevant to screen and the Web, which in some cases they aren't, but most of the time they are.

It's not so much a case with that of saying, "This is how you should do it," but it's more a case of trying to show that good typography can be achieved, and here's lots of little techniques that you could achieve it with. That's webtypography.net. Ampersand is in its third year. It's a web typography conference, specifically web typography, that we run in Brighton, that's in the UK. That's on June 28 in Brighton.

For the first time, we're also doing one in New York. That will be on November 2 in New York. We'll be having great people like Jonathan Hoefler talking there. We've got Christian Schwartz who's coming along. Lucas de Groot from Holland is coming over as well, he's a fantastic speaker. It's going to be a really good day, and that's going to be smack bang in the middle of New York.

Then the book, that's quite exciting. I'm writing that with Mark Boulton and John Tan for "Five Simple Steps." We've just started, really, but we've got some great plans for it. Also hoping to do, as best we can, a really nice online accompaniment to it, as well. No date as to when that's going to come out, but sometime in the not-too-distant future, I hope.

Adam: That's all very exciting. Thanks for circling back with us, Richard. We really appreciate the time.

Richard: You're welcome.

Adam: For those listening in, thanks for joining us, and for your support of the UIE Virtual Seminar Program.