Responsive Typography

[Music]

Lea Alcantara: You are listening to CTRL+CLICK CAST. We inspect the web for you! Today we are talking about responsive typography with our special guest, Clarissa Peterson. I’m your host, Lea Alcantara, and I’m joined by my fab co-host:

Emily Lewis: Emily Lewis!

Lea Alcantara: Today’s episode is sponsored by Visual Chefs, a versatile web development agency with expertise in content management system and custom web application development. Through partnerships with designers, agencies and organizations, Visual Chefs propels the web forward. Visit visualchefs.com to learn more.

We’d also like to congratulate Pixel & Tonic, our major sponsor, on launching Happy Lager, a personalized Craft CMS demo site. So if you’re planning to test Craft or show Craft to a client, you can use the demo to get a personalized install of the Happy Lager demo site with log-in credentials and basic information. They’ve also open sourced the site on GitHub for those who want a more DIY approach to the demo site. The link to all the info will be in the show notes.

[Music ends]

Emily Lewis: Today we have Clarissa Peterson on the show to talk about responsive typography. Clarissa is a UX designer and web developer and co-founder of the Montreal-based digital agency Peterson/Kandy. She is a frequent speaker and gives workshops on responsive design and user experience. Clarissa is also the author of O’Reilly’s Learning Responsive Web Design: A Beginner’s Guide. Welcome to the show, Clarissa.

Clarissa Peterson: Thank you. Thank you for having me.

Lea Alcantara: So Clarissa, can you tell our listeners a bit more about yourself?

Clarissa Peterson: I live in Montreal. I’ve lived here for about two years, but I had come from the United States. I’ve worked in the web field for about a dozen years.

Emily Lewis: So before we focus on responsive typography, let’s talk about general web typography. Lea, as a designer, what are the main tenets of good typographic design?

Lea Alcantara: Well, the bottom line about good typographic design is clarity, to make sure that what you’re actually wanting people to understand is readable, and, on top of which, is attractive.

Emily Lewis: [Agrees]

Lea Alcantara: So the basics really, like all the rules in graphic design in regards to typography, is to have that balance between clarity and understanding as well as making it look good, but making it look good also means that there’s a voice and a sort of a brand to the actual work.

Emily Lewis: Yeah, it reminds me, I was actually reading an article that’s from Oprah that was talking about that. We all might be familiar with that Flash of Unstyled Text (FOUT) when you’re loading a site on your mobile phone and it’s got a special web font.

Lea Alcantara: Right.

Emily Lewis: And that web font hasn’t rendered yet so it’s like a default fallback, and how people complain about it, but it’s actually a feature.

Lea Alcantara: Right.

Emily Lewis: It’s a feature so that you can still read the content even without the pretty fonts. It’s all about readability.

Lea Alcantara: You know what though, that sounds like a developer term, right?

Emily Lewis: [Laughs]

Lea Alcantara: Like it’s not a bug, it’s a feature. [Laughs]

Emily Lewis: Feature. Well, speaking of development, let’s talk to Clarissa and get her front-end perspective. So Clarissa, what do you think is the most important thing to think about when it comes to typography on a website?

Clarissa Peterson: Well, the most important thing with typography is to keep in mind that what you’re doing is communicating a message to users and/or you’re allowing them to interact with the site.

Emily Lewis: [Agrees]

Clarissa Peterson: So if your text isn’t easy to read, your users won’t stay on your site or they won’t come back to your site. So it doesn’t matter how pretty your typography looks if it’s hard to read because you’re not meeting your goal.

Lea Alcantara: Right.

Emily Lewis: Absolutely. And this to either one of you, have you ever found, I personally haven’t, but any kind of tool that lets you know if something is readable? Is there like a standard or a tool that you can utilize?

Lea Alcantara: I think beyond like the accessibility tools, and I think that’s more about contrast than it is type-specific, and by contrast, I mean colors and those kind of things versus, say, size comparisons. I’m not really sure there’s one were it says, “This is more readable.”

Emily Lewis: This isn’t readable.

Lea Alcantara: Yeah, yeah.

Emily Lewis: I think that’s probably one of the harder conversations that you might have then with like a client who’s like really sold on a particular font that may not be particularly readable.

Lea Alcantara: But you know what, at the end of the day, this isn’t just like if we’re talking about design terms. It isn’t just about the font itself. A lot of it really is layout related. I feel like it’s almost – I don’t know – maybe I’m taking my design understanding for granted, but if the line length is way too long, like if you had a 1024 site layout and you’ve decided that all your paragraphs are going to be 900 pixels wide, that’s just intuitively to me unreadable.

Emily Lewis: I feel the same way, but you and I failed to convince the client of that recently, if you remember. [Laughs]

Lea Alcantara: [Laughs] Yes, that’s true. Although I think there was a bit of a balance there because if I’m thinking of the same client, I think part of it, there was just the intro paragraph and the headline.

Emily Lewis: Yeah, it actually got extended to other pages that they are taking up full line length.

Lea Alcantara: Yeah. [Laughs]

Emily Lewis: But those are the things that are challenges to sort of…

Lea Alcantara: Right, to try to convey.

Emily Lewis: Exactly, but it all comes down to those basic tenets that you and Clarissa just mentioned, it’s about communication. Are you able to communicate that message? Is it readable? So Clarissa, let’s talk about responsive typography. What’s unique about responsive typography that front-end devs and designers too need to focus on?

Clarissa Peterson: Well, the most important thing to think about is that you have to know how your typography is going to look at every screen size.

Lea Alcantara: Right.

Clarissa Peterson: And you can’t assume just because it looks good on your desktop, that it’s going to look good on smaller screens or larger screens or different types of screens.

Emily Lewis: Is there something that you have done yourself for client projects to kind of test that out, how tight it looks on different things? I know for myself, I use BrowserStack really often to take a look at how sites look in different devices, in different sizes of viewports. Is there something you do?

Clarissa Peterson: Well, you really need to be able to use actual devices because if you’re using something like BrowserStack, you’re still really looking at it on your desktop screen.

Lea Alcantara: Right.

Emily Lewis: [Agrees]

Clarissa Peterson: So it might not be an accurate picture of how it’s actually going to look on a certain type of screen.

Emily Lewis: Good point.

Lea Alcantara: But in regards to that though, there’s a practical end in regards to that. Unless you are a giant firm, design firm or whatever, a full fledged device lab is not really financially viable. How do you get around that?

Clarissa Peterson: You don’t need to test on every possible device, but you at least need to test on some phone and some tablet. You can’t just change the size of your browser window and think that’s all you need to do.

Emily Lewis: [Agrees]

Lea Alcantara: Do you think that there’s a specific, the top five devices that you must have physically, or top three, like is there a specific ones that you always make sure that you test physically?

Clarissa Peterson: I know that a few people have written about this, and I don’t actually know the answer myself, but there are people, but there is an answer to that.

Lea Alcantara: What do you personally do?

Clarissa Peterson: I don’t do a lot of site development, but I mean, I test on my own phone and my own tablets, so I don’t have a lot of devices.

Lea Alcantara: What devices do you have?

Clarissa Peterson: I have an iPhone and an iPad and an Android phone and Android tablet.

Emily Lewis: That probably is going to cover a fair amount of bases. It’s kind of what we do, Lea.

Lea Alcantara: Yeah.

Emily Lewis: Between the two of us and our partners… [Laughs]

Lea Alcantara: Yeah, yeah.

Emily Lewis: We have a lot of different devices that we can test on.

Lea Alcantara: Yes, essentially, and we also rely on our clients. At the end of the day, they’re testing their site on their devices so making sure we know what device that they even have. I do believe I read somewhere, it might have been Ben Callahan, who suggested to just go to your local AT&T if you must test and you have like a low budget, just go to your local AT&T and just check all the devices while they’re out there.

Emily Lewis: I think that’s a good idea. It would be kind of….

Lea Alcantara: [Laughs]

Emily Lewis: You know, kind of awkward. [Laughs]

Clarissa Peterson: [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: But it probably would completely work. We’ve gotten in the habit here in this household where I used to recycle my phones.

Lea Alcantara: Right.

Emily Lewis: When we upgrade, we just keep them.

Lea Alcantara: Right.

Emily Lewis: Like I have a box and that box is called my device lab. [Laughs]

Lea Alcantara: Yeah. I always think about that because we sold Rob’s iPhone 4S, because it’s one of the shorter ones, and I thought, “Okay, do I really want to just keep this or should I get rid of it?” It’s just like everyone is going to end up with a hundred devices, that’s a bit weird.

Emily Lewis: Yeah. It definitely increases the amount of time. I do want to bring this up before we move on to the next question. I do think this is one of those reasons why it’s a good idea to begin your design deliverables being web based early on.

Lea Alcantara: Right.

Emily Lewis: Just like Clarissa was saying, it’s so important to actually see something on a device, not necessarily relying on BrowserStack or things like that.

Lea Alcantara: Right.

Emily Lewis: And that’s one of the reasons why one of the deliverables you put together for clients before you get to actual comps is what we call “element collage,” but it’s really like Samantha Warren’s Style Tiles, and we’ve seen a couple of other ones out there. There was one called Web Styles, but basically, it’s a way to present some font options or type options to a client and have them actually look at it on the web on their browser, on their devices as opposed to a perfect perfect Photoshop anti-alias comp for sure.

Lea Alcantara: Yeah.

Emily Lewis: So Clarissa, what do you think has changed over the years now that responsive and mobile is so important in terms of how people design texts from what we used to do?

Clarissa Peterson: Well, the way that people used to design websites is you’d use Photoshop and you have a specific fixed width and your design would always be that width no matter what device it was displayed on.

Lea Alcantara: Right.

Clarissa Peterson: So with responsive design, you’re creating a design that can be viewed at different possible widths, so you have to make sure that your type and the other parts of your design look good at all these possible widths, and that doesn’t mean just on a phone width or a tablet width, you have to think you have phones that are 320 pixels wide, but you also have some that have 345 pixels wide or 380 pixels wide that are all going to look slightly different. So you have to be able to have texts and other design elements that respond to the width of the screen and still look at all these different possible widths.

Timestamp: 00:10:11

Emily Lewis: Is there anything that you do in your agency or that your team does to create examples or before it gets into an approved design, those are early stages of the design deliverables to ensure that it sort of hits all of the points it should? Like something that comes to mind for me, for example, is the actual content you’re displaying in a web-based comp. It might look good because the length of those words happens to look good. Do you cycle through different content? Do you do special deliverables?

Clarissa Peterson: I guess what we do in my agency is we don’t actually do responsive prototypes. We’ll just have a couple of different screen widths and then when I do the development, I go in and figure out what it’s supposed to look like between those screen widths. So it’s really not the best way to go about it, but sometimes that how you have to work.

Emily Lewis: I mean, that’s kind of how we have done it. We’re trying to adjust our processes to find the sweet spot. If you could pick your ideal situation, especially as a developer, what would you want to receive from a designer to make sure that you can develop efficiently?

Clarissa Peterson: I think the easiest thing for me is to be able to have a mobile first design because I develop that way. I start with a narrowest screen width and then in media queries to work up to wider screen.

Emily Lewis: [Agrees]

Clarissa Peterson: And I found that it’s really hard. If I get comps that weren’t designed from a mobile first mindset, it’s a lot harder to develop them that way.

Emily Lewis: I feel that way too, but I do think, and Lea, chime in, I think it’s also, because Lea and I work together, I have to be flexible to what works for her.

Lea Alcantara: Right.

Emily Lewis: And Lea, what works for you these days?

Lea Alcantara: To be honest, I’m still struggling between a desktop versus mobile mindset. With one of our current clients, I’ve been just doing like mobile stuff first these days, which I really enjoy, but now we’re moving into the next phase for this particular deliverable. He’s already approved all the mobile views. I’m like, “Okay, how do I make this expand?”

Because I think what some people struggle with when they just first get into responsive design is you still are in that fixed width mindset, and the other thing is it’s like responsive design isn’t just making everything into percentages and it’s just going to be a larger version of the smaller version, because that’s going to be disaster. You might actually need to change the layout of what you did in the mobile view to make it work in the larger screen because it isn’t just something where you just proportionally expand. You also have to think about like how people are interacting with the content in a desktop versus how they’re interacting in a mobile view.

So I definitely enjoy doing a mobile first, but I still have to think way harder when I’m trying to expand it into other layouts. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: And I think one of the things that’s a bit harder for me too is that that in between, I think, which I’m going to try to do a little bit better because sometimes I can see the widest view and I can see the smallest view, but then the in-between is where you’re like, “Okay, should I just proportionally expand the smallest view and the in-between or is it going to be like a hybrid between that, plus what I did in the widest view?” That’s where I’m like still struggling, and at the same time, it’s just with responsive typography, what proportions need to make sense in that view, and sometimes just choosing a font that works in mobile, I’m trying to figure out like, does it make sense to keep that size the same throughout if possible, or does everything need to change?

Emily Lewis: Well, so Clarissa, let’s talk first about the basics of that, the sizing of typography. So what kind of unit should we be working with for responsive typography and responsive em units, percentages. I’m guessing pixels are a definite no-no. [Laughs]

Clarissa Peterson: Right. You don’t want to use pixels because they’re not responsive at all. They can’t change ems and rems or what you use for fonts which are relative units, and you start out with a face font size of em for your body texts like paragraphs and lists and that sort of thing and then go from there.

Lea Alcantara: [Agrees]

Clarissa Peterson: And it’s pretty simple if you’re starting with one em, you want a headline to be twice as big, you make it two ems. So it’s pretty simple to do the math on any of that, and the difference between ems and rems, ems are a little more complicated because they’re sized in relation to their containing element.

Lea Alcantara: Right.

Clarissa Peterson: So if you have, say, a paragraph inside a div and you give a font size to each of them, those actually multiply, so you might not get the expected results that you’re looking for. It’s kind of hard to explain that without showing.

Emily Lewis: I know exactly what you’re talking about, I’ve done it.

Lea Alcantara: Yeah, yeah.

Emily Lewis: And I’ve been like, “Why is this this size?”

Lea Alcantara: Like why is this much smaller than I expected?

Clarissa Peterson: Right. The key to getting around that is to use sensible CSS and think about how you’re writing your CSS which you should do anyways and keep things as simple as possible and try font sizes to elements rather than containers to reduce the number of conflicts.

Lea Alcantara: [Agrees]

Emily Lewis: [Agrees]

Clarissa Peterson: So rems work a little bit differently in that they all relate back to the root element, so you don’t have this issue with conflicts, which in some ways is good because it makes it a lot easier, but you don’t have the same power that you have with ems because with ems, sometimes you actually do want to apply a font size to containing element and change, say, everything inside a div all at once, which a responsive site gives you a lot more ability to change things in different places.

Lea Alcantara: Right.

Clarissa Peterson: So with rems you can’t do that. It’s more straightforward, but the downside with rems though is that they’re not supported in every browser such as IE 8 and older or Opera Mini, so you have to add a fallback in pixels for those browsers or other types of fallbacks to make sure that those browsers are covered, which adds a lot of extra work.

Emily Lewis: You mentioned a fallback in pixels. Is that what’s recommended or could you do a fallback in just ems?

Clarissa Peterson: You could do a fallback in ems and use the same number, but then you’d have this problem with nested elements and things multiplying.

Lea Alcantara: Right.

Emily Lewis: Right, right, okay.

Clarissa Peterson: If you’re going to do the fallback in ems, you might as well just use the whole thing in em.

Lea Alcantara: Right, right.

Emily Lewis: Is there any place for percentage values?

Clarissa Peterson: You use the percentage value for fonts only in one place, and that’s where you set the font size for the entire document, the entire web page. So generally, you’re going to start out with a font size of a 100%, and what that means, if you’re trying to figure out what font size is that really, by choosing a 100% sets the font size of one em, your base font size to the most appropriate reading size for body text on that particular device. So it’s not always the same size.

Lea Alcantara: Aha!

Emily Lewis: [Agrees]

Clarissa Peterson: And usually on desktop computers and a lot of tablets and phones now, it works up to 16 pixels, but on some other devices like e-readers, it might be 20 pixels or another number that it works out to because those screens need a larger text size to be easy to read.

Lea Alcantara: Right.

Clarissa Peterson: And especially as we come forward in the future, as there are different device types in the interaction models, we don’t know how those are going to work so they might have different text sizes altogether. So by using that a 100%, you’re ensuring that in these future devices, that’s still going to work out to a good reading size no matter how that device works.

Emily Lewis: This may seem simple to – I don’t know – maybe some of our listeners, but I’m actually not doing this now, and this is the first time it’s been explained to me why I shouldn’t specify that base font unit in ems. So I’m literally making a note on a sticky note right here for me to implement later today. [Laughs]

Lea Alcantara: [Laughs] Yeah, I know it totally make sense, although as a designer, it’s like, “Oh God, how much more complicated how we just made our lives?” [Laughs]

Emily Lewis: [Laughs]

Clarissa Peterson: To me it seems a lot simpler. I mean, if you’re used to pixels, obviously, you’re used to them.

Lea Alcantara: Sure.

Clarissa Peterson: But this way all you do is start with a 100% and then make your paragraphs and body text one em and then have everything go up or down from there, so it’s pretty straightforward.

Lea Alcantara: Right.

Emily Lewis: It’s just a shift, and I think those are the things that are hardest for both designers and developers. You get comfortable doing things the way you’ve always done them and doing something new just inherently feels uncomfortable to start with, and so it’s getting past that comfort level thing. It’s kind of, Lea, what you were talking about earlier, how you’re trying to adjust how you design.

Lea Alcantara: Right.

Emily Lewis: Having particularly like the middle place in between the smallest and the largest view port.

Lea Alcantara: Yeah.

Emily Lewis: So Clarissa, kind of with that in mind, you as a front-end developer, if someone is coming to you from a mobile first perspective, does that mean that you just get a comp for a mobile view or do you get comps for a couple of different sizes?

Clarissa Peterson: Well, how I work in my agency is we’ll have comps for a couple of different sizes, but I won’t necessarily follow those exactly when it comes to typography or sizes of different things.

Lea Alcantara: Aha! Right.

Clarissa Peterson: Which I know is designers think you’re going to do exactly what they tell you to do… [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: [Laughs]

Clarissa Peterson: But what I do, I just start with one em for the smallest screen size because I want the text to be at least that size, you know?

Emily Lewis: Right.

Clarissa Peterson: And then I use the proportions from the comp, but then for the larger screen sizes, you can actually make your type bigger since you have so much empty space that you can use. So while I might have one em for my paragraph texts on the smaller screen. On tablets, it might be 1.1 em. On desktops, 1.2 or 1.3 depending on what looks good on the screen.

Emily Lewis: And that’s just something you’re gauging while you’re desiging in the browser?

Clarissa Peterson: Right. Because unless you’re doing responsive prototypes, you’re not having a picture of how it looks at every screen size, so you’re having to make little tweaks in between at different sizes. With typography, you don’t need to just have a couple of media queries, like I know a lot of designers do this or all have, like a main break point for phones and one for tablets and one for desktop. But with typography, you actually want to add a lot of different media queries where they fee most appropriate even if it doesn’t follow those main break points.

Emily Lewis: [Agrees]

Timestamp: 00:20:14

Clarissa Peterson: Because your text needs to look good at all the in-between sizes too.

Emily Lewis: Have you ever been in a situation where you need to kind of communicate those choices back to a designer who may have had different font sizes specified?

Clarissa Peterson: Not really, I guess.

Emily Lewis: Lea, how would that conversation go without it being a “No, this is how I designed it” versus “This is how it should be experienced.” [Laughs]

Lea Alcantara: [Laughs] I think if you’re taking that perspective that this will be more readable in other devices, I think that make sense. What this does seem to bring up is more and more front-end developers need to put the designer hat on, right?

Emily Lewis: [Agrees]

Lea Alcantara: Because even if you give all these different comps for the different sizes and you have that perspective, designers seem to need to move away from pixel perfection and have that communicated to the developer and the developer should also make choices to say like, “Okay, well, I tried to go as close as possible, but it doesn’t really necessarily work, so I’ll have to adjust it this way.”

Clarissa Peterson: [Agrees]

Lea Alcantara: So I think maybe the way the conversation goes is that everyone understands that there needs to be tweaks.

Emily Lewis: Yeah, I think one of the flip of that is that I often, at least in our earlier projects together with Lea, is that I get your comps and I would try and make them exact.

Lea Alcantara: Right.

Emily Lewis: You know?

Lea Alcantara: Yeah.

Emily Lewis: I would try and give you exactly what you gave me. [Laughs]

Lea Alcantara: Yeah, yeah, yeah.

Emily Lewis: And I felt there were times like where I’m designing for the squishy middle, the various break points that pop up that my gut is like, “I think something needs to be adjusted.”

Lea Alcantara: Right.

Emily Lewis: And I would sort of like push back on myself and say, “No, don’t.”

Lea Alcantara: Lea gave you this. [Laughs]

Emily Lewis: Exactly, so it’s definitely more collaborartion, it sounds like or feels like, at least that’s where we’re going.

Lea Alcantara: I think so. I think so, and I think that makes the most sense. At the end of the day, I think I read this article somewhere where the web was never meant to be fixed width.

Emily Lewis: [Agrees]

Lea Alcantara: Like it never was even at the dawn of time, and I don’t remember who invented it, but was it Ethan Marcotte?

Emily Lewis: Yeah.

Clarissa Peterson: Right.

Lea Alcantara: I think so, like he was way ahead of his time with, “Let’s make all these layouts and all these other things variable. Don’t use pixels,” and we were all like, “You’re crazy, you know?” [Laughs]

Emily Lewis: [Laughs]

Clarissa Peterson: [Laughs]

Emily Lewis: Well, I remember even before Ethan was talking about the responsive web design, but just trying to embrace liquid-based layout.

Lea Alcantara: Oh yeah.

Emily Lewis: That was hard for me.

Lea Alcantara: Yeah, I resisted that for like the longest time, [laughs] and now it’s like, “Oh, I should have listened.” [Laughs]

Emily Lewis: [Laughs]

Clarissa Peterson: [Laughs] Yeah, exactly.

Emily Lewis: I should have gotten used to this sooner.

Lea Alcantara: Sure.

Emily Lewis: So Clarissa, let’s talk about getting text to look at it in every screen size. You talked about not having a fixed mindset of what your break points will be for type, but instead responding to what you’re experiencing on the actual site or the deliverable or whatever. Is there anything else that you should adjust with text beyond the em values to make sure that text looks good at every screen size?

Clarissa Peterson: Yes, one of the most important things with responsive typography is your line length, which is how many characters on each line of text, and that has a really big impact on how readable the text is, and they’ve actually done studies to figure out the best line length and it’s 45 to 75 characters.

Lea Alcantara: Oh.

Clarissa Peterson: So you don’t even need to guess or look at it and try to figure it out. You can just know that exactly those number of characters within that range is going to be a good readable line length. So this is especially complicated though on responsive sites because your line length is going to change since all your page elements are flexible, so you have to look at your site at different screen widths and make adjustments so that it stays within that 45- to 75-character range no matter what the width of the screen is,and you can do that using media queries to change the margins or change the font size, and you can also use max-width to make sure your lines are never longer than 75 characters.

Emily Lewis: Does line-height have any impact on any responsive experience? Should it be factored in beyond the actual font size, but the – what’s that called – letting between lines?

Lea Alcantara: Yeah.

Clarissa Peterson: Yeah, the line-height, it’s not as important, but it can affect readability, and you want to have, in general, an average line-height of about 1.4, but also can be flexible depending on the width of the screen. So on a small screen, you can have a little less line-height like 1.3 and then maybe for a wider screen as your font size gets bigger, you might also want to adjust the line-height proportion to maybe 1.5 or 1.6 to give everything a more open look since you have so much extra space on the screen.

Lea Alcantara: Yeah, I would say that in practice I found this to be true. Working for one of our clients, I was designing his blog for mobile and desktop, and initially, he just kind of tried to translate what I had already told him to do in desktop to mobile when we first started, and it looked really odd, even though like it looked totally fine, like the 1.4 looked fine in desktop and all those things, and in the end, I was like, “No, no, no, we need to change the spacing here, the line-height here in my iPhone because it looks weird.”

It’s interesting that just intuitively, I feel like design really is like both an art and a science. There are rules to help make things look good, but once you are a designer for several years, you just kind of that gut reaction when things just look bad.

Emily Lewis: So aside from these font, let’s just call them properties like line-height, is there anything with like letter-spacing, like between characters? I know letter-spacing is an available attribute for CSS. Is that something that should come into play when you’re adjusting screen sizes?

Clarissa Peterson: I never heard of that having to do anything with responsive design, but that’s more of a design thing, so maybe I just don’t know.

Emily Lewis: Yeah, I mean, on occasion, when I’ve gotten comp from Lea and I’m working in a browser and how the browser is rendering the font versus what she had given me, I sometimes will throw letter-spacing in there just to open it up a little bit because it’s tight.

Lea Alcantara: Right.

Emily Lewis: But I agree, Clarissa, I’ve never had an actual that’s related, that’s specifically responsive. It’s more just viewing it on a browser versus a comp.

Lea Alcantara: Well, there are some like traditional print typography rules for the letter-spacing and typography, it’s called like kerning.

Emily Lewis: [Agrees]

Lea Alcantara: That’s the space between the letters, and there is a general rule, if you’re going to do small caps and it’s going to be a small, small font, that you want to have a little bit wider letter-spacing because when it’s all caps, it looks like it’s jumbled squished together, so like a 1.0 letter spacing or like adjusted kerning might make it look more readable. So that’s something that I always consider too when just in general typographic design.

Emily Lewis: So aside from those kind of properties, what about the actual fonts? Clarissa, how does font choice affect responsive design?

Clarissa Peterson: For font choice, one thing to think about is a font that looks good at a large size might not look as good as at a small size.

Lea Alcantara: Right.

Clarissa Peterson: So for example, something you’re using for headlines that looks good on a desktop because you can put it in really big letters, on a mobile phone-sized screen, you might have that headline in much smaller letters and that font might just not look good at that small size.

Emily Lewis: Right.

Clarissa Peterson: So in that case, you would be best off by maybe switching it into different font for the smaller screen size using a media query.

Lea Alcantara: Right.

Clarissa Peterson: And the other thing with font choice is just to think about performance because if you’re using web fonts, obviously, however many you use will to the download time of your site, so you don’t want to use tons of fonts if you don’t need them because that’s going to make your site smaller to some extent.

Emily Lewis: [Agrees]

Clarissa Peterson: And most sites can get by with only two to three fonts, and you should think about, if you’re adding an extra font, “Do I really need this on here? Is it worth the expense in the loading time?”

Lea Alcantara: And I just also wanted to note that it’s not just the different fonts, the different weights of the same fonts.

Emily Lewis: On styles.

Lea Alcantara: Yeah, exactly. So Clarissa kind of mentioned how you could have a font that’s fantastic for a headline in a desktop because it’s large and beautiful, and then you tried to put it in a mobile, and then it looks really weird and also maybe it’s a huge hit because it’s like a headline font. It might be better to use like, let’s say, there was extra bold weight that you’re using for the desktop, you can possibly get away with just using the bold weight in the mobile while using the same typeface, so you don’t even have to change the font. But on the flipside, adding a new weight adds some speed considerations and weight considerations to that whole page.

Emily Lewis: Yeah, and this is not expert talking here, this is just me messing around with some things in the past. So let’s take, for example, a third-party service like Fonts.com. There’s another one called TypeKit. There probably are more, but those are two that come to my mind. So these are ones where you actually pay for the right to use a particular font on your site.

Lea Alcantara: Right.

Emily Lewis: So Fonts.com, we’ve been using a lot lately because they just happen to have the typefaces that we’re using a lot.

Lea Alcantara: Yeah, right.

Emily Lewis: And when I’m picking the font and assigning it to the server, if I choose the extra bold, the bold, the italic, the italic bold, like all of those add to the size of the file that I’m downloading.

Lea Alcantara: Yeah.

Emily Lewis: So it’s not another font, but it’s another, like Lea was saying, more weight to what’s being downloaded for that particular file.

Timestamp: 00:30:01

Lea Alcantara: For sure.

Emily Lewis: Before we talk a little bit more about typography, I wanted to talk a little bit about these sort of services. Lea, you and I have been using it for clients.

Lea Alcantara: Yeah.

Emily Lewis: And it has not been a particular – I don’t know – drawback to them, except we do have one client right now who’s very performance aware.

Lea Alcantara: Very much.

Emily Lewis: Which is awesome.

Lea Alcantara: Yeah.

Emily Lewis: It’s rare to have a client appreciate it that much.

Lea Alcantara: Yeah.

Emily Lewis: And he’s always questioning why we’d a choice to use a given font or like we used FontAwesome often for icon, vector icons.

Lea Alcantara: Yeah.

Emily Lewis: So what are your thoughts, Lea, about using a service like that versus installing something on his server and having him just call the font directly from his server?

Lea Alcantara: Well, I think a lot of that is dependent on what is this client’s budget and bandwidth, because like with this particular one, he gets like a million hits, so he’s got a lot of pages to serve and a lot of fonts to download into cache and all those kinds of things. So sometimes when you think about third party or your own server, downloading into your own server, a lot of it is whether you can handle that download. Part of the benefit of using any sort of third party, and for front end, this is like regardless whether this is for fonts, some people decide to download the jQuery library versus citing the Google or Microsoft repository which is fine. But the pros and cons of that is, well, if it’s like right on your server, then your server can call it immediately. If it is a third-party server, then you have to rely on their reliability, and most people tend to use like a third-party service because they’ve got massive amount of servers and power. So if everything works, and most likely another website has already cited that third-party service, then most likely, that library or that font or whatever might have already been downloaded into their cache so there’s no speed hit whatsoever, right?

Emily Lewis: Right.

Lea Alcantara: Like it just seems like it’s always been there because it’s so ubiquitous using a third-party service. However, if you’re doing a speed audit of your site, you have to look at all the external calls as well, like you have to kind of balance, like how many external calls and internal server assets do you have, and sometimes some internal assets are better if it’s spread out into the “Cloud” and into other services and other times, it’s not. The thing is it sounds like everything is perfect when everything works on Google, but on occasion, let’s say Google is having some sort of high load, then your site will suffer.

Emily Lewis: Right.

Lea Alcantara: Even if it’s not your server, not your fault, if Google is low and you’re using the Google free fonts, those kind of things, then your site might like hang for a little bit.

Emily Lewis: And your client won’t care that it’s Google’s fault. [Laughs]

Lea Alcantara: Yeah, yeah. It’s just like, “Why is this slow?” And then the thing about that is there’s nothing you can do about that because it’s a third-party service. If there’s something that like you download it yourself, then you can figure out what you can do in your own like tweaking of files and compression and whatever kind of like add more hardware to your particular thing, hosting situation to make it work or not. So a lot of it really, I know this is like the most annoying answer, but it’s the most honest answer, is it depends.

Emily Lewis: You mentioned Google’s free web fonts.

Lea Alcantara: Right.

Emily Lewis: And I mentioned Fonts.com, which is paid.

Lea Alcantara: Right.

Emily Lewis: In my opinion, and this is not that educated of an opinion, but to me it really comes down to the costs.

Lea Alcantara: Right.

Emily Lewis: Does the client want to pay for a subscription or they want something free?

Lea Alcantara: Right.

Emily Lewis: Do you have a different opinion? Is the one better than the other or one better suited for different scenarios?

Lea Alcantara: A lot of it I think is a question about branding.

Emily Lewis: Oh.

Lea Alcantara: Because part of the reason why someone would go with the free service, which is great, like there’s a lot of equivalent fonts. The thing is with the free font means that it was free service, that means it might not have been a font that’s been anti-aliased properly. It might have missing characters. It might not have the proper kerning, those kind of things, because I could make a Google web font and upload it, and it’s free, but it could be full of character flaws that it might just look good on desktop, but then it’s just all messed by in mobile, those kind of things.

Emily Lewis: [Agrees]

Lea Alcantara: So that’s like one of the cons of like a free service perhaps. You’re kind of like hedging your bets whether a professional actually created this versus a hobbyist, those kind of things. I’m not saying that free fonts are bad because there’s a lot of super, super professional quality free fonts that we use and have our clients use, but you kind of have to search through them. The benefit of Fonts.com or TypeKit in regards to these types of things is you do have professionals working on your fonts.

Emily Lewis: [Agrees]

Lea Alcantara: There are full time type designers and developers that are making these and they’re constantly tweaking them to be more and more compatible with various devices. They’re doing all the testing for you, right?

Emily Lewis: Right, and I think it’s probably also worth mentioning because this has come up a couple of times, but if you’re paying for a service, you have support.

Lea Alcantara: Oh, right.

Emily Lewis: So if something is going wrong, you’d send an email and there will be someone on the other end to advise you. That has happened to me a couple of times with Fonts.com, and I needed some assistance because it was user error on my part, but it wasn’t obvious to me.

Lea Alcantara: Yeah, and I just wanted to touch on something that I mentioned earlier is the branding thing is that when you pay for something, you’re actually going to get the real font, not the equivalent. So like if you really want to use Adobe Garamond, you’re going to get Adobe Garamond. You’re not going to get Rando Fake Garamond or inspired by Garamond. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: You’re going to actually get the original typeface that’s been professionally anti-aliased for the screen, those kind of things.

Emily Lewis: [Agrees]

Lea Alcantara: So that’s what you’re paying for. That’s why you’re paying for that quality. It’s kind of like if you’re the New York Times or if you are The New Yorker, for example, which I think they use custom web fonts, you can tell because they’re using custom fonts, like it’s not a font you can get anywhere else, and that’s because branding is important for that particular site.

Emily Lewis: So Clarissa, we’ve talked about some third-party services, and honestly, I can’t say right or wrong personally. I’ve not had actual experience with serving your own fonts versus using a server, that one is better than the other. They both come with their own things to consider. But in general, regardless of how you’re serving your fonts, is there anything that we can do as developers to make our web fonts behave more efficiently?

Clarissa Peterson: As I mentioned earlier, using less fonts so there’s less fonts to download is the best place to start, and think about really whether you need to use all the different fonts that you might have in a design. In some cases, if you’re using a font for something specific like a tag line, you can only download the few letters you need instead of the whole character set. There are ways to do that. So there are different tricks you can do like that to maybe decrease how much you’re downloading.

Emily Lewis: Oh, that’s an excellent suggestion. That didn’t even occur to me, just the characters you need.

Clarissa Peterson: And another option is you can use system fonts that are already installed on the device.

Lea Alcantara: Right. The classic.

Clarissa Peterson: But then you just have to be aware that the different fonts available on different browsers and different devices so make sure you figure out one for each device and have them all in your font stack.

Lea Alcantara: Yeah, like you mentioning the “use the system fonts,” that kind of reminded me how far we’ve gotten with web fonts and even the fact that we’re discussing this. A few years ago, this wasn’t even an option, like it was system fonts.

Emily Lewis: Right. [Laughs]

Lea Alcantara: Just everyone is going to use Times New Roman and Arial. [Laughs] So Clarissa, while I was looking at your presentation on responsive typography, I saw the hyphenation is now part of CSS, and it’s totally news to me. I’m curious to know like what other traditional typographic options that used to just be print only, what’s new coming up for fonts and CSS?

Clarissa Peterson: Hyphenation is available in CSS, but it’s not supported in other browsers yes.

Emily Lewis: [Agrees]

Clarissa Peterson: You can use it in Firefox, Safari or IE with the vendor prefix, but not in Chrom or Opera.

Lea Alcantara: Oh.

Clarissa Peterson: But that’s okay to do that because hyphenation is an example of progressive enhancement, which means there are things that might not be avalable to every browser or device, but you can add them on for those where it’s available.

Emily Lewis: Right.

Clarissa Peterson: So with hyphenation, if you’re on a device that doesn’t have hyphenation, that’s okay, you’re not missing content, you’re not missing part of the site experience, but for the browsers that can do hyphenation, it just makes your text look a little bit better.

Lea Alcantara: Yeah, I know. Definitely, as a designer, that was the exciting thing for me to see because I feel like the web is finally catching up to print options that we’ve had for years, and definitely there is a difference. I think in that article you mentioned, Emily, earlier on, The State of Web Type from Opera, they have an example of how dramatic it looks to have hyphenation versus not with all these kind of like empty spaces when you don’t have hyphenation, if you decided to justify a paragraph, and then once you add hyphenation, then you don’t have those weird extra spaces, you just have a nice flowing character, and it looks like a more even looking block.

Emily Lewis: And when you were first asking about hyphenation, you were also saying, “I didn’t even know that was available.”

Timestamp: 00:39:54

Lea Alcantara: Right.

Emily Lewis: This is just a little shout out to one of my favorite resources, CanIUse.com.

Lea Alcantara: Oh.

Emily Lewis: It is my favorite. If I’m needing to know if I can use something on the web, this is HTML or CSS, it may even have JavaScript stuff, but I never pay attention to that personally, but CanIUse.com, you could type hyphenation in there and it will come back to you with what the attribute is that you would use in CSS and where browser support, including mobile device browser support falls on that particular attributes.

Lea Alcantara: This is the first i’ve heard of this site. It’s pretty awesome.

Emily Lewis: Are you kidding me?

Lea Alcantara: Yeah, no, this is the first time I’ve heard of it, and it’s like live searching too.

Emily Lewis: [Agrees]

Lea Alcantara: So I just put HY and it found the hyphenation. [Laughs]

Emily Lewis: It’s pretty nice. Another resource that I just came across this week when we were getting ready for this conversation with Clarissa, and I found it through that Opera dev article on The State of Web Type, it’s from Bram Stein who wrote the The State of Web Type article. He also has a site, stateofwebtype.com and basically, it breaks down what type and typographic features are supported on the web, and you can do a search or you can just select from the various ones and again, it’s kind of like CanIUse.com, but it gives you your browser and version support.

Lea Alcantara: Yehey! The web is on its way to become prettier.

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: All right, so before we finish up, Clarissa, what would be your best advice when considering typography for responsive web design?

Clarissa Peterson: I think the top priority is making sure that your text is readable in every device, and like as I said, if it looks good, but it’s hard to read, you’re not going to do a good job of communicating with users, and then also make sure you’re testing on actual devices to see how your text looks and it works in most devices.

Emily Lewis: Actually, while we were talking, I was doing a quick search just to see if there were any tools that could tell you if some text was readable. I haven’t used this yet, but I’m just mentioning it for our listeners, read-able.com. We’ll make sure it’s in our show notes. It looks like it’s at least recommended by some pretty well known, respected publications in our industry, so it’s at least worth checking out.

Lea Alcantara: Very cool.

Emily Lewis: Lea, what about you? From a designer’s perspective, what’s your best advice for good typographic design in general? Is it the same thing, be readable? [Laughs]

Lea Alcantara: Since Clarissa took that, I’m going to go with a different answer. I think most designers and developers will agree with this, if you can test using final content or close to final content, that’s the best tip I can get, because if you’re going to be doing any typographic design and you’re just using “Loram ipsum” or whatever, then you’re not really understanding what the correct proportions and correct ways to style things are going to be. Because how much content you’re going to have, what size the headlines need to be, all change if you’re going to have super large headlines or if it’s going to be one-word headlines or if it’s going to be multiple paragraphs versus one paragraph. You make different font choices if that’s the case. You make different spacing and sizing choices if that’s the case. So if you can get closest or most appropriate content to test your typography with, I think that’s my best advice.

Emily Lewis: I got to throw a follow-up question in this. Does that change at all with all these people making these versions of “Lorem ipsum”?

Lea Alcantara: Yeah.

Emily Lewis: Like “zombie lorem ipsum” and “cupcake lorem ipsum,” does that change it because those have different words in the mix that are generated, or that’s still not the best option?

Lea Alcantara: I would say it’s still not the best option. It makes it more fun for you as a designer.

Emily Lewis: [Laughs]

Lea Alcantara: Like it’s less boring because everyone sees the “lorem ipsum” and things like that, but we’ve had, I feel like, enough conversations with clients who are like, “What does that mean? It’s in a foreign language.” You know? [Laughs] To know that, well, let’s just avoid that conversation altogether. Now, this is not always ideal like, for example, when were just in our element collage stage or the style tile state, then I am just going to be using “lorem ipsum.”

Emily Lewis: “Lorem ipsum dolor.”

Lea Alcantara: Yeah, yeah, exactly, and that’s just so they can see the type first and foremost, and it might not necessarily be in the right context quite yet, but I feel like the more you understand the content you’re going to be designing for, the better choices you’re going to make in general. Not just for readability, but for design, like because type has a voice. Type has a feel.

Emily Lewis: [Agrees]

Lea Alcantara: So figuring all those kinds of things out in context based on the content will give you better tools to work with.

Emily Lewis: Absolutely, it just does sort of present the challenge that comes up every single time where the client is like, “Oh, but I don’t want that word. Let’s change the word.” We’re like, “We’re in that in that phase right now. We’re focused on design, so can you ignore that please.”

Lea Alcantara: Yeah, yeah. Well, because even adding one word or removing a word can change the headline. So for example, a very, very common thing is, “Okay, we design this so the headline will stay on one line, not two, because it pushes the paragraph lower, so now you’ve got a three-column design where one column is longer than the other, those kinds of things.

Emily Lewis: [Agrees]

Lea Alcantara: But if you decide like ahead of time or you know what the content is ahead of time and you know there’s going to be a two-line headline, then that’s what you’re going to design for.

Emily Lewis: Well, I think that brings us to the end of our questions about responsive typography.

Lea Alcantara: And that leads us to our rapid fire 10 Questions, so our listeners can get to know Clarissa a bit better. So are you ready?

Clarissa Peterson: Okay.

Lea Alcantara: All right. So the first question is, Android or iOS?

Clarissa Peterson: It’s iOS.

Emily Lewis: If you are stranded on a desert island and can only bring three things, what would you bring?

Clarissa Peterson: Oh, I really have no idea.

Lea Alcantara: All right. What’s your favorite TV show?

Clarissa Peterson: I don’t watch a lot of TV. I’m sorry, I can’t think of anything.

Emily Lewis: All right, what’s your favorite dessert? [Laughs]

Clarissa Peterson: Chocolate.

Lea Alcantara: Good, good answer. What profession other than your own would you like to attempt?

Clarissa Peterson: I used to be a restaurant manager. I really like doing that.

Emily Lewis: Is there a profession you would never want to try?

Clarissa Peterson: I think I would do pretty much anything. I don’t think there’s anything I’m opposed to.

Emily Lewis: [Laughs]

Lea Alcantara: What’s the latest article or blog post you’ve read?

Clarissa Peterson: I read a lot of stuff. I like to read A List Apart. I try to read all the articles on there.

Lea Alcantara: Okay.

Emily Lewis: It’s a great resource. It’s a great resource. If you could have a super power, what would it be?

Clarissa Peterson: I don’t know. I think I would like to be able to fly.

Lea Alcantara: What music do you like to work to?

Clarissa Peterson: I like it to be very, very silent when I work. Having any noise in the background, I just can’t get anything done.

Emily Lewis: And last question, cats or dogs?

Clarissa Peterson: Dogs.

Lea Alcantara: All right. So that’s all the time we have for today. Thanks for joining us, Clarissa.

Clarissa Peterson: Thank you for having me.

Emily Lewis: In case our listeners want to follow up with you, where can they find you online?

Clarissa Peterson: My website is clarissapeterson.com.

Emily Lewis: Okay, great. Thanks again, Clarissa, this was a fun topic.

Clarissa Peterson: Okay, thank you.

[Music starts]

Lea Alcantara: We’d now like to thank our sponsors for this podcast: Visual Chefs and Pixel & Tonic.

Emily Lewis: And thanks to our partners: Arcustech, Devot:ee and EE Insider.

Lea Alcantara: We also want to thank our listeners for tuning in! If you want to know more about CTRL+CLICK, make sure you follow us on Twitter @ctrlclickcast or visit our website, ctrlclickcast.com. And if you liked this episode, please give us a review on iTunes, Stitcher or both!

Emily Lewis: Don’t forget to tune in to our next episode when we’ll be talking about fighting CMS spam with Greg Aker. Be sure to check out our schedule on our site, ctrlclickcast.com/schedule for more upcoming topics.

Lea Alcantara: This is Lea Alcantara …

Emily Lewis: And Emily Lewis …

Lea Alcantara: Signing off for CTRL+CLICK CAST. See you next time!

Emily Lewis: Cheers!

[Music stops]

Timestamp: 00:47:52