Web Application Makeover: How to use custom fonts and @font-face | Episode 6

Craig McKeachie: [0:00] On this episode, Chris Coyier discusses how to use custom fonts, and @font-face to makeover your web application. This is Front End Developer Cast, Episode 6.

[0:09] [music]

Craig: [0:20] Welcome to The Front End Developer Cast, the podcast that helps developers be awesome at building ambitious web applications, whether you’re a JavaScript ninja, or you’re just getting started. I’m your host, Craig McKeachie.

[0:33] Hi, everyone. My interview today is with Chris Coyier of csstricks.com, and the creator of codepen.io. Let’s get right into the interview.

[0:42] Hi, today, I’m really lucky to have Chris Coyier, of csstricks and codepen fame on the podcast. We can talk a little bit more about his background. It’s somewhat unclear to me, I’d be interested for Chris to fill in some of the details. I know you used to work at SurveyMonkey, and then SurveyMonkey was bought by Wufoo, if you wouldn’t mind, Chris, welcome to the podcast and give us a little history about yourself.

Chris Coyier: [1:05] Thanks for having me. It’s awesome to be on. It actually worked in that reverse order.

[1:10] It was Wufoo that got bought by SurveyMonkey. That’s the first time that’s happened. I feel like most people…I can grab somebody off the street usually that’s heard of SurveyMonkey, because I feel like they’ve been around forever, and they have market saturation, and teachers use it and stuff like that, whereas, Wufoo is a little more niched to the industry.

Craig: [1:32] It makes sense that SurveyMonkey would be the acquirer, right? Yes, definitely.

Chris: [1:36] Yes. My history is tremendously boring. I don’t know, there’s not much that can be gleaned out of it! I hate to start on a bummer note like that, but it’s like I’m just normal kid who went to normal college in the Midwest in the US, and became a font-end developer.

Craig: [1:55] It’s CSS Tricks, I saw you’re listed as an author for that. Did that start as your blog and is now owned by Treehouse? Can you give me a little [inaudible 0:02:04] ? People are curious about that a little bit.

Chris: [2:03] Sure. That’s probably what most people know me from in this industry, because it’s the thing I’ve been doing the longest.

[2:11] It tends to be one of those sites that people tell me it shows up in search results a lot when you Google a CSS problem or something like that. Google has been good to me in that way. That’s a blog that I started in 2007, it’s a little over seven-years- old now.

[2:30] There’s screencasts on it and a blog post, and a section I call Snippets, where I have little miniature chunks of code that have less explanation attached to them, and there’s a community forums there that’s pretty active, and stuff, it’s this whole site about all things front-end web design. It’s called CSS Tricks, which is a terribly hokey name, but it has brand power over the thing.

[2:54] It’s not owned by Treehouse. Treehouse is a sponsor of mine and I have an interactive ad for them that loads in the header of the site, but that’s a paid sponsorship.

Craig: [3:04] OK.

Chris: [3:05] It’s just a business arrangement between us and I’m the big fan of Treehouse.

[3:08] I think they’re the right people at the right time to having a company that does modern teaching of all the stuff that we talk about all the time. I think they do a good job. I’m happy to have them as a sponsor, but there’s no ownership.

Craig: [3:22] So far, I’ve given away your blog to Treehouse and Wufoo being bought by SurveyMonkey, so I’m…

[3:28] [crosstalk]

Chris: [3:28] No trouble, I’m happy to talk about it.

Craig: [laughs] [3:29] That’s pretty funny. I think it was just that I saw in a bio somewhere that you’re a writer for CSS Tricks instead of the owner of the blog, so it threw me off a little bit.

Chris: [3:41] Oh yeah, it’s funny. CSS Tricks is just me. I have somebody who helps me do administrative stuff and sell t-shirts and stuff.

[3:50] That’s Sarah in Ohio helps me with that, and Rob in the UK helps me moderate the forms and stuff, but theirs are very small part-time jobs, it’s just me, essentially.

Craig: [3:59] Great, a big thanks to you from all the developers including myself over the years who’ve read the CSS Tricks articles, and been gotten out of some CSS hole, or learned something about CSS, I appreciate it.

Chris: [4:12] Good, great.

Craig: [4:13] One thing I want to talk about, we were talking before we started recording here, this question of, what is a front-end developer to you?

[4:21] I started this podcast. I didn’t have a great name. I didn’t want to be yet another Java Script podcast. Most of my content is Java Script focused, but there’s this term front-end developer coming out.

[4:32] I think it can mean a lot of different things. It can be this person who comes from an agency or an interactive media background who’s really, really a Googler with HTML and CSS and perhaps, Java Script that seems negotiable with some people’s skills sets who are really good at CSS and HTML, because that can be a career in itself as you know.

[4:54] Then, there’s some people like myself who might have been more of an enterprise developer in asp.net or Java or Rails. I don’t want to call Rails Enterprise developers, I might get some hate mail for that, but who care about the CSS, HTML, Java Script part of their work and look at themselves as a craftsman in that area.

[5:13] It’s this mixed crowd calling themselves front-end developers and all this interest in Java Script and so forth. What are your thoughts on that?

Chris: [5:21] Yeah, especially, the last part of what you’re saying is interesting to me. I hadn’t put tons of thought in, but this is how I’ve thought about it, in attempted to define it in the past, and I don’t really care all that much.

[5:34] It’s just a title, I don’t know. I think that does benefit the industry a little bit, if we can agree on these things. But I also think that, this is such a hotly debated thing, that I’m not sure, that we’ll ever get to any final agreement. But this how I’ve done it in the past. Front-end developer is HTML, CSS, and JavaScript to me, essentially. It explicitly means that you focus on those things, and not so much the server side things.

[5:58] Of course, everybody had…it lives on a spectrum of what they know. But it means, you’re probably not writing a ton of back-end code. You’re focused on HTML, CSS, and JavaScript. Also, to the exclusion of much designed work either. Because I feel like, if what you do is design, is aesthetic things, and the beaux things, and you can write HTML on CSS, and maybe a very light JavaScript. Then, you’re a Web Designer.

[6:25] Web designer meaning, I can do HTML and CSS. But I also am worrying about, what it looks and acts like. When you’re a front-end developer, then that’s to be exclusion of design. You’re not much of a designer, you’re just focused on the…with the technologies that make those things work on the front-end. Which means you’re heavier in JavaScript, and less so on the design thing.

Craig: [6:47] But I’m sure you see all kinds of people hit your site, and send you emails. Meet up at conferences, and so forth on that continuum all over the spectrum right?

Chris: [6:57] Absolutely, everybody is somewhere on the perspective. What I haven’t thought about what you are saying is that. There are people that probably like spend a good amount of Time and Rails, but aren’t really a back-end developer.

[7:10] They just spend Time and Rails, because Rails is pretty easy, it’s pretty easy to throw out together a little view, and a little controller to give yourself some basic data and stuff. It’s like you’re a back-end developer, or you’re working on WordPress, or something, which is PHP based. You can make a theme like nobody’s business. But does that really make you a back-end developer?

[7:31] I tend to think of server side backend people. People that work in that world, but they have this like programmer background. Like they know about data sanitization and databases. How they might structure data to be related to other data, and security concerns. They know just how they should store a password in a database, and that kind of thing.

[7:52] That makes you more of a back-end developer. I think you can live on that spectrum, where you’re like, you write a good amount of code that happens to be in Ruby. But you’re not really a back-end developer. You’re more of a front-end developer still.

Craig: [8:06] Interesting, particularly like the server side thing, I think is interesting view. Since that’s sort of where I come from, I think the interesting one to me is the designer with “Devs” Skills.

[8:15] Which I’ve definitely met some designers over the years. Who you’re getting into, or getting better and better at HTML, and CSS. That’s another area that I didn’t mention, at first where the line starts to gray there a little bit. Thanks for that, that’s very helpful. The main reason I’m inviting you on the show, was not to get you in trouble by trying to define a front-end developer. But was to talk about the state of fonts on the web.

[8:42] This comes from mostly my own personal curiosity. I’ve been a developer on the server side for years, took an interest in front-end development, and JavaScript in particular. But I’m still not real up to speed on…there’s been a lot of evolution in a last few years, on fonts on the web, and what’s happening with them. I wanted to see, if you could maybe take us through a little bit of history of what you’ve seen.

[9:07] What you think people should, or could be doing out there today to improve the web fonts on their site.

Chris: [9:13] That’s pretty interesting, because your site is funny and that comedy, you can tell by just looking at it right away, that there is a custom font in use. It’s a little unusual looking. I haven’t seen it before.

[9:24] I can open up the web inspector, and just look at it quick, and look at the computed styles. That’s something called “Lato” I think. I’m like I’ve never heard of that. But I can tell that, that’s coming on to your site through technology, essentially, in the web called “App Fontface.” Because that’s pretty much the only way it’s done these days.

[9:43] Back in the way early history, where there was some…there is some other way, as we could use custom fonts on the web. But these days, there’s a 99 percent chance, it is using CSS App Fontface to put that custom font in your site. I guess I’d be interested in, were you messing around with it? And try to figure it out, or is this a template that you downloaded and had it…

Craig: [10:02] This is your WooTheme. This is a WooTheme from WordPress WooTheme, which is a very popular theme company in the WordPress space.

[10:11] I looked through all their themes. I liked this one, in particular. It was pretty sparse and so forth, I picked it. I have no idea. For the sales page for my book, thejavascriptframeworkguide.com, also has some very nice fonts.

[10:25] I, with permission, borrowed those from Nathan Berry. I was like, “Maybe I should tweak these a little bit, it doesn’t look so much like his page.” I got into, “Gosh, but I really don’t understand it at a low enough level now to make sure that it works in all the browsers.” Questions started coming up in my head, like how far back, browser-level-wise, will this work?

[10:49] Why do I need these three different…I need an SVG file and a WOFF file and a TIF file. What’s going on here, basically?

Chris: [10:59] You know that those are quite literally files. They’re resources, just like a CSS file or a JavaScript file or image file. They’re just font files. The frontrunner these days is WOFF, W-O-F-F. Thank God everybody has agreed on one format.

[11:19] As you know, in the world of front-end, we need to support older browsers when we can, or we might be mandated to, or might just all agree that it’s a pretty good idea to serve as many people as we can. If they’re running older browsers, they may not be supporting WOFF. There might be some other formats that we need to serve those fonts in to get them to work.

[11:37] I’m not sure if that’s already a little too far down the rabbit hole, if we should keep it higher level.

Craig: [11:42] No, I like this rabbit hole. Maybe it’s only my personal rabbit hole. I think people wonder.

[11:47] Let’s say I’m working on an internal app at an enterprise, but I just don’t want to use Arial for the thousandth time or some font stack that looks good on a PC, but doesn’t look good on the Mac, or for the person at home, that sort of thing. I really want a unique font to make the app stand out, look more professional, impress my end users. What would you suggest for someone in that?

Chris: [12:10] That’s the idea behind this whole thing is that the web is a visual medium.

[12:15] For so long, we were stuck with what were, I guess, generally, referred to as the web-safe fonts, which were Arial, and Lucida Grand, and Veranda, and Trebuchet, or whatever. There was a handful of them. That might be 75 percent of them, right there.

[12:32] There were so few that just happened to be installed on cross-platform, Mac versus PC versus Linux, usually, and looked OK and worked on the web. If you picked something else, let’s say you really liked some cool, scripty font that happened to be installed on most Macs, in CSS, there’s a property called “font family” and you could make it happen.

[12:54] You could make it look like it looks like if you happen to be on your Mac or whatever. Then, if you looked at that same website in another browser, it’s just wouldn’t work. And people would be like, “Why does your website look broken?” or whatever, we didn’t do that. We always picked ones that worked consistently, cross-browser.

[13:11] That’s what @font-face brings to the web, then, is that you can load these font files as a resource, and then they do, for the most part, look consistent across all browsers. That’s the point of it, is we can now use these fancy fonts and do it in a consistent way.

Craig: [13:26] I think you have a good article on CSS tricks on some of the more low-level details about it.

[13:31] The point is, if you want to support back-level browsers, WOFF’s becoming the standard, but you probably have to throw an SVG file in there to support the older versions.

Chris: [13:40] That one’s the first ones to go. That one’s an old iPad one, but there’s true-type or something…

[13:46] [crosstalk]

Chris: [13:48] You know what the beauty of it is? Most of us never even thought about it.

[13:52] There was tools that came along to help us with the best practice there, because who wants to think about this stuff? It’s like prefixing things in JavaScript or prefixing things in CSS. It’s just a bummer. It’s just not a fun time.

[14:08] There was tools like Font Squirrel that came along. I don’t know if you’ve heard of that one, but it was like, “Pick a font or upload your own font, if you happen to have it around, and it’s legal or whatever. Click a button, and we’re going to process it into all the different font formats that you’re going to need, and then give you a little chunk of CSS that is the best practice of how to use it.”

[14:27] Very few people actually thought about it all that much. They just used some kind of best practice tool to get it to work. No doubt, even on your theme, someone did that, probably.

Craig: [14:37] Right. It’s so interesting. I had heard podcasts on Font Squirrel and so forth.

[14:42] I never quite put all the pieces together. What others sites? Is Font Squirrel the one that most people go to, if you have a Photoshop license and you want to keep…there’s this legal side of thing. Where can I go on the web? Let’s say, I want to pick my font for my thing. The Font Squirrel sounds like a good resource. Is there other places that…

Chris: [15:02] That would be the one, if you wanted to host your own. I’d have to dig into your site, specifically, but if you’re going to perhaps sell a WordPress theme or sell a theme, you would probably use something like Font Squirrel.

[15:15] You want to make it self-contained, probably. All those resources, you would want to come along with the theme. I think that’s becoming somewhat less and less common, as things like Google Fonts become more and more prevalent. I’m sure a lot of people have heard of that. If you haven’t, just Google “Google Fonts,” [laughs] and you’ll find their resource. It’s pretty darn nice, to be honest.

[15:40] You can just browse through a collection of lots of different fonts, and then, click one to show you what it looks like and test it or whatever. Then, it just gives you a little chunk of CSS that you can put on your page. It’s either a piece of HTML that you can put in the head of your document or an import statement you can put in your CSS.

[15:57] Then, that font becomes available for you to use, and Google handles the serving it in the correct formats and all that stuff that needs to happen. That’s a great resource, if you want to use a custom font on the web, just because they handle all the heavy lifting for you, and the font is ultimately on a CDN. You don’t have to worry about hosting it and that type of stuff.

[16:20] If you’re like, “I want to pick out a cool font and use it,” that’s probably the easiest go-to place to start playing around with custom fonts, I would say.

Craig: [16:28] At least, in my experience, designers are famous for “Myriad Pro this,” “Myriad Pro that.” Lately, I think that PCs are starting to come installed with Myriad Pro, but let’s say, I get a comp from a designer, and it’s got Myriad Pro on it, or I decide I want to use Myriad Pro. In that case, that’s a pretty well-known font, not an open font. Or, is it?

[16:50] How do you handle situations like that, where it’s a more common font, but not one supported across the web?

Chris: [16:56] That font, you won’t font it on Font Squirrel, just because there’s licensing restrictions for these fonts.

[17:04] A designer created this font, and they decided that you can’t just do whatever you want with it. You have to pay for it in which to use it, which is a reasonable thing. But you want to use it, let’s say.

[17:16] An illegal way to do that would be to take it, anyway, and send it through Font Squirrel and use it. I’m sure people do that, unwittingly, quite often, because the tool is so easy, and despite Font Squirrel doing a fairly good job of making sure that that doesn’t happen. They might even look at file names and block you from doing that, in some cases.

[17:35] I’m not sure how it all works, exactly, but I’m assuming they try to stop you from doing it, but you could get it done. You could rename the file or try to get around it in some way. Or, maybe it just lets it through and whatever. That is a lot of time spent on something that you shouldn’t do. You’re breaking the law, essentially, if you do that.

[17:52] There’s other services that you can sign up for, things like Typekit, that is probably the largest industry standard one, as far as I know, but what are the other ones. There’s Fontdeck and MyFonts. There’s a number of services that have came up to make this easier and legal.

[18:13] Typekit is a paid service. If you want to use Myriad Pro, Myriad Pro is on Typekit, you sign up for Typekit which costs you a few bucks. I think they have some free plan for it. If it was just totally a low-traffic personal site you could probably get it for free. But then, most low-price plans you pay some monthly fee depending on how much usage you’re going to have.

[18:35] Is it a large app or is just a medium-size site. Like any paid services in the world they have different plan levels. Then, they give you, in their case of Typekit, a little chunk of JavaScript that you put in the head. It just does some stuff in the background, loads the proper CSS and font files from Myriad Pro to work, and then you can use it. If you need and wanted to use it, Typekit is probably the way to go for you, for those particular fonts.

[19:01] Goes hand in hand with this, it should be said that that’s a great font. It’s going to look really good. It costs money for a reason, because it was well constructed and there’s maybe a lot of weights, and there’s lot’s of characters. It’s a full robust collection of fonts. Care was taken to make sure that it renders across browser and across platform properly and stuff.

[19:24] When you pay for a font like that there’s exceptions on either side, but chances are it’s going to be a higher quality font. Whereas, if you just snag something for free off Dafont or whatever, and sent it through Font Squirrel and use it, there’s going to be display problems.

Craig: [19:40] Right. And so when you say…I don’t want to prolong the illegal way, but I want to understand the flow of how these things are used.

[19:49] It’s not just this magic JavaScript. Let’s say, you had something legal that was legally an Open Source font or something like that and you wanted to run it through Font Squirrel, what would you be putting in? You’d be putting in the font file, basically. There’s a definition…

Chris: [20:01] I think it takes whatever, yeah exactly. I think it will take just about anything. It will take the TrueType one or the WOFF one. I forget what the other formats are. I probably should have…

Craig: [20:10] It turns it into all of them plus the snippet you need. I’ve got it. OK.

Chris: [20:14] Exactly, yeah.

Craig: [20:15] You could take it from anywhere but the problem is you want to be legal which is…and it doesn’t seem like these fonts are that expensive.

[20:22] But I think, in some ways it’s been made such a dark art right now on the web, it’s easy to do something illegal unknowingly, basically. It’s what I thought.

Chris: [20:30] I suspect that happens quite a bit. Although, credit to our industry, I don’t see it all that often.

[20:36] Because I feel like if you are designer by trade, or there’s probably a designer by trade that works somewhere in your company, that if they see your company doing that they would speak up, I think, because they are trained in the industry that they know that that’s bad news.

[20:51] It’s not just bad news just because it’s illegal, which is bad enough, but it’s really in…you’ll get called out for it. It’s in bad taste such that it’s just a really not-cool thing to do. These days people will be naming and shaming you on Twitter, all right and left.

Craig: [21:08] Right. Is this like DRM where enforcement of it is really hard, as far as your understanding? Let’s say, I unknowingly do it, is there ever any point where my site stops working or there’s a license involved?

[21:23] Like with the TrueType fonts, let’s say, someone went through the legitimate means of using a Typekit font, and I happen to borrow from the design, let’s say, and use it on my site but I don’t realize…unknowingly, I’m thinking, “Oh this just looks like Arial to me. I’m not a designer guy.” Will it stop working?

Chris: [21:46] OK. Let’s say you’re self-hosting some fonts, because you want the Font Squirrel route and I looked around on your site, I could find that resource and download it, because it’s just a font file that lived somewhere.

[22:00] I could open up my web inspector and find that resource it’s linked to. It has to be public for it to work on the web at all. I could steal that font from you, essentially. You can’t just View Source on a site that’s using Typekit, grab the JavaScript that they’re loading to make that font work, and put it on your site and expect it to work. It won’t work, because Typekit specifically locks that stuff down by URLs that you whitelist on their site.

Craig: [22:29] Oh, by domains basically, I see.

Chris: [22:31] By domain, right.

Craig: [22:32] That’s why it’s very legitimate and that makes a lot of sense. OK.

Chris: [22:37] But still, even though just the JavaScript and stuff is locked down by domain, if I’m viewing a site which is on that whitelist, you would suspect that it still needs to download some kind of public resource to work, right?

[22:51] I should be able to dig in and find that resource, which does load, I can get a copy of it if I really tried to. But you can’t steal somehow, and I’m not totally up-to-date how that works, but they do some stuff to the fonts that still make that, perhaps not impossible, but nearly. I forget exactly how it works. I know, for example, Cloud.typography, the Hoefler Fonts thing, which I also use. It’s a Typekit competitor but just for a single font foundry that’s fairly popular.

[23:29] They break the fonts into lots and lots of different little pieces and then they essentially…it’s not encryption but it’s like…you know how if you looked at the source of a jpeg it doesn’t make any sense? They just turn it into a chunk of a data URI. A jpeg, that’s still useful, because it’s still a jpeg. But it’s like imagine if you took a jpeg and then you broke it apart into independent parts, and then, you weren’t really sure how those parts fit back together. That jpeg becomes useless.

[24:01] I’m not sure if I’m explaining this exactly right, but they take a font file, they turn it into a data URI and then they split it up into lots of different chunks, and then, something smooshed them back together before they’re used. Even if you wanted to steal one of their fonts, you’d have to be on a whitelisted domain, then, you’d have to download each individual one of these chunks…

Craig: [24:22] Piece them together in the right order…

Chris: [24:23] And then, figure out how…yeah, and then somehow, un-data URI it. I’m sure it’s possible somehow, but it’s so weird and so specific and stuff that people aren’t unwittingly stealing fonts from their website.

Craig: [24:38] At that point, pay the $2, or the couple dollars. OK. I think I just want to stress, most of this questioning is not to give people this idea, hey, here’s the ways to get round it.

[24:50] It’s more just to understand what’s going on and how to be legal. If people don’t understand things or it’s too difficult for them in approaching this, they’d either just won’t do it and they’ll stay with the standard Arial font or Times New Roman or whatever the case may be or they’ll unknowingly do something wrong. I think most developers in this…

Chris: [25:11] It’s getting a little more rare because Google Fonts is so good and you can’t do anything wrong with Google Fonts. It’s all Open Source and legal. Just do whatever you want with them. That type of thing is proliferating it on the web a bit.

Craig: [25:25] Thanks. I think we’ve beat that one to death. Thanks again.

Chris: [25:28] I should say that, I think it’s worth mentioning that they’re really cool and it’s done great things for typography on the web, but you really do need to be really careful.

[25:38] What my thinking is these days is, it’s really got to be worth it to use it. There’s plenty of sites that are going too heavy on it. My thinking on this is not complete yet, but it’s, I’m so tempted on most of my sites to get rid of them, because they’re very often the slowest and heaviest thing on the whole site.

[26:04] If you load a one, big font, a good, robust font in a couple of different weights, maybe even two fonts, that’s so huge. If you dig into what are the heaviest, weightiest things at the site, often, I see that that’s the font. And it is the case on a couple of my sites. And I’m just, “I love these fonts, but they slow it down.”

[26:26] In some cases, my attempts at speeding it up…for example, you could load it at the footer of your site instead of the header, but then, you get a flash of…it’s tricky to do correctly and even when you’re doing it correctly it’s such a huge weight that you really got to want it.

[26:44] I don’t think the default for building a site with custom fonts on it is design a site, pick out the custom fonts you want to use and use those. It’s not a required part of the design process these days. I would definitely consider not using them as a default, unless you really need it.

Craig: [27:00] That’s really interesting man. It makes a lot of sense to me. One public site I’ve worked on the last year or so, that we were accidentally loading the font file two times, or loading way more of the font than we actually needed.

[27:15] I think it was a case of the famous Myriad Pro thing. It made a significant performance improvement, more than all the tweaks we could do to multiple HTP requests, the normal type of run-in tweaks you could do.

[27:30] That one blew them all the way as you’re saying. I definitely can relate to that. What would you do in the stead of that? If you’re trying to stay away from that or not default to it if you will, what would you suggest as an alternative, and simply…or browser supporting more and more fonts natively on the web or just…?

Chris: [27:48] That’s a good question. Is it just go back to the Sans Serif stack? I have about two options, make Verdana or the Helvetica Arial or the Lucida Grand thing work for you.

Craig: [28:04] Clearly, it’s worked on iPhones for years and this sort of thing. It’s not…

Chris: [28:11] I know. It’s a little sad. My thoughts are not complete on this subject, but that’s where I’m leaning towards…or in some cases, for example, a really popular font these days is Open Sans on Google Fonts. It’s tiny. Use it and use one weight of it or pick maybe just the bold and use it just for headlines or something.

[28:32] If you’re worried that you’re going to look stodgy and not up-to-date and gross, A, I think there’s plenty of ways to look modern without using custom fonts. But if you absolutely need to use the custom font, maybe pick one based on performance.

Craig: [28:49] OK. You know any good resources to find those?

[28:51] Let’s say, you spend your time, like I do, getting deep into JavaScript so you don’t always see a single article, as designers do, on fonts and you don’t have the same knowledge and appreciation. What’s a quick tip…you mentioned Open Sans which is very useful to people.

Chris: [29:09] Google does a good job when you’re using that anyway. I suspect there’s tons of people using Google Fonts.

[29:13] When you pick one from Google Fonts there’s a little speedometer. For example, you just pick one weight and the speedometer will go up a little bit. Then, you’re like, “Well, this is body copy so I’m going to need bold and italic too.” And as you turn those things on the little speedometer fills up and I’ll tell you, it fills up really fast.

[29:36] I know this is a weird abstract concept, but imagine a Serif font versus a Sans Serif, Serifs have little extenders on the ends of characters, terrible ad.

Craig: [29:47] Most people have heard that one, I think you’re in good shape.

Chris: [29:52] OK. You can imagine that fonts are made from vector artwork, they literally are. A font file, if you were to dig into it, there’s vector instructions and how to draw those shapes.

[30:03] Now, image the vector instructions for drawing a lower case L in a Sans Serif font. It’s just a rectangle. There’s very little information there on how to draw that. But now, imagine that L in a Serif font. It’s not just a rectangle anymore. It has a little curve at the bottom that hangs out, and then, a little straight part, and then it goes over, and then, another little curvy part.

[30:25] You can see the information to draw that L has gotten a lot more complicated. Now, imagine a Script font while little swirls and stuff all over the place. There’s quite literally a connection between the weight of a particular font and how complex the characters are.

Craig: [30:41] Interesting, OK.

Chris: [30:42] “Open Sans” is, I think drawn in such a way that it was intentionally simple. It looks good, but it’s so small because the shapes of it are so simple.

[30:51] There’s other stuff involved as well. If you find that you’re accidentally loading tons of Arabic characters as well, and maybe that’s great because your site needs to support those languages, but maybe it doesn’t. Don’t load them. Maybe load a kind of subset, where you’re like, “hey, we’re only going to use this for titles, so we don’t even need numbers,” or something like that. There’s ways that you can reduce the size of them.

Craig: [31:14] For years, like back when it was “sIFR” which was like a flash plugin, and “Cufon”, it seemed like people were only using these unique fonts for headers, and so forth.

[31:25] You just mentioned, maybe a sort of medium ground might be to stick with a normal font like “Helvetica” or something for the body text, and use something a little more unique for your headers on your pages, or something like that.

[31:41] I don’t know if that’s good advice, but curious what you think of that idea.

Chris: [31:45] Sure, that’s pretty common I think. Just pick one, and use it for something prominent. Pick something that fits your brand. For body copy, stick with something more normal.

[31:55] The advantage there being that, body copy you’re going to need more than one weight very likely. It’s very likely that you’re going to need bold or italic, if not both…and a bold italic. That is weighty. That’s an entirely different set of…like I was saying, there’s vector information to draw those characters.

[32:16] There isn’t some cool, programmatic thing that happens where the browser knows how to fatten up a letter. It’s just using a completely different set of vector information to draw a bold version of a “p” instead of a regular version of a “p”. It literally doubles the size of the font, just by also needing the bold version.

[32:36] If you’re like, “I’m just going to use it for headlines!” Maybe all your headlines are always bold, you only need the bold variant. It’s smaller, and that’s the idea. Maybe you just use it for the logo of your site. Then, don’t load a font at all for that, because you’re just using it in one place.

[32:57] You would never load an entire font to use like one word. That would be like SVG territory. This is a vector word, so I’m going to use SVG to draw it, and not load this entire font. The less you use a font…I guess it’s a bell curve. [laughs]

Craig: [33:14] Right, but I think you’ve brought up a good point. I was like, “Hey, let’s go nuts! We’ve got these, these fonts now and they seem to be more well supported, let’s just figure how to do this legal.”

[33:24] And you’re like, “Let’s not throw caution to the wind here Craig.” Again, I think that’s a really good thing for the listeners to hear about, I think that’s great.

[33:33] One last point about that, is I’ve heard from people, “Oh well, I’ve got a license to this font because, you know, I’ve got such and such Photoshop license, and so forth…you know, software, and it comes with these fonts.” Do you have any insight into…if you have a designer on your team, is there a set of fonts that are already available to you, that sort of thing? What’s your understanding?

Chris: [33:52] Yes, that gets complicated, doesn’t it? You were saying “Myriad Pro.” I think if you buy a Mac these days, it just comes on there. Does that mean you can use it on your website? No. I don’t know why I know that, I just know that for some reason.

[34:09] There’s probably somewhere on your computer a license file that explains what you can do, and it’s probably in terrible legalese that will make it very complicated to know if you can or not. God, I wish I had better advice for you. Just know that…

Craig: [34:23] You don’t see that as a common route, where people just use some fonts that Adobe has released with the latest version of “Illustrator” or “Photoshop”?

Chris: [34:33] It means that you can use it on your computer, and thus, it means that I think that if you’re designing a print brochure or something, you’re more than welcome to use that in a design of that.

Craig: [34:42] But on the web…

Chris: [34:44] It’s just different on the web, because the source file comes along with it. That’s what they’re trying to protect.

[34:50] There’s so many weird gray areas, right? If you designed a logo in Photoshop with those fonts that came…and put it on the web as an image, I think that’s fine. I’m pretty darn sure that it is fine. It’s just when you put that source file up there somehow, to use it in that way.

Craig: [35:05] Very, very helpful.

Chris: [35:06] It’s tricky too. Let’s say you’re working with a designer, and they have a font, but you’re working with them as a developer. Can they like send you that font? Because they own it, you’re working together to build the thing.

[35:18] I just don’t know where the gray area starts and ends with this stuff, but just use your mental alarm for things that seem sketchy and assume that they’re illegal I guess.

Craig: [35:30] Right. That makes a lot of sense. We’ve talked about fonts more than I thought we could fill up time with, so I’m going to let you go here. I think you clarified a lot of things for me.

[35:40] It was nice to have somebody to say, “Well, what about this,” and, “well what about Photoshop,” and that sort of thing. I hope the listeners get something out of this, and I definitely think they will. I appreciate your time. It’s css-tricks.com, right?

Chris: [35:54] That’s right. That’s right.

Craig: [35:56] CodePen.io. Maybe we could talk about that for a little bit?

Chris: [36:00] Sure, that’s just a place for playing around with front-end technology. We spend lots of time here just talking about CSS, and how you can use fonts and JavaScript and stuff.

[36:09] You can play with Google Fonts right on CodePen if you want. If you wanted to play around with some typography, you could go pick out a font from there, and then, you click the little “click to use” button, and it’ll give you a little app import chunk.

[36:22] You can go right to CodePen, and CodePen has a little editor for HTML, CSS, and JavaScript right in the browser, and then, a preview of those things all smooshed together in a live preview.

Craig: [36:34] Right, it’s really, really great. I love these sites. Most people do, right? [laughs]

Chris: [36:38] Yeah, it’s neat. It’s just a neat kind of thing. The twist to CodePen is that you sign up, and you have this account. You have a profile there, and other developers can follow you, and you can follow them.

[36:48] You’re hearting each other’s Pens, and it becomes this kind of social place to see what each other are working on, but because everything is kind of public and viewable there, you can also search for things.

[37:00] You really like “Lato”? That’s a nice font. Maybe you could just search for Lato on CodePen and see how other developers have used that in the work that they’re doing. Search and browsing around CodePen becomes a big part of it, because there’s so much stuff there for kind of inspiration and learning.

Craig: [37:17] I was kind of wondering for myself coming from the JavaScript side, what’s the difference between CodePen.io and JSFiddle, or JS Bin, or Plunker, or these other alternatives which are somewhat similar?

[37:30] The one thing that I was just complaining to a friend of mine about the other day was, at least that I’ve found, I don’t find things very discoverable on some of these other services. I don’t know if that’s how you’re trying to sort of differentiate yourself, or if you’re trying to be a tool that’s more friendly to the CSS/HTML practitioner.

[37:46] How would you compare and contrast CodePen to the JavaScript sort of focused alternatives?

Chris: [37:53] I guess that’s the biggest deal, is that we’re kind of a community where those aren’t really…and they’re great tools too. We got the idea from JSFiddle, and Remy does a great job on JS Bin. They just released pro accounts there too, that they’re trying to make a business out of it.

[38:08] Of course, we support that. It’s a good market I think. You can have an account on JS Bin too, but how do you look in the past and see things that you’ve created? It’s not like a very visual place, whereas, when you’re browsing around CodePen there are all these little miniature iframes showing you the things that you’ve built.

[38:27] How do you go back two months ago and look for something? On CodePen that’s really easy. You can just paginate back in time through the things that you’ve created, or the things that you’ve hearted, or your friend’s work, or searches that you’re running. It’s just very easy to find things on CodePen.

[38:43] For example, every single Pen that you create on CodePen has a comment thread attached to it, as well, you can go back and forth and discuss the things that you do.

Craig: [38:51] That helps me clarify where one of these tools has strengths and where one of them doesn’t. That was a little confusing to me, so thanks a lot.

Chris: [38:58] Yeah, no problem. We try to make it the best tool as well. We’re not like spending so much time on these other things that the editor itself sacrifices. I think it’s also the most powerful editor, if you ask me too, but you know… [laughter]

Craig: [39:14] But you’re slightly biased, right?

Chris: [39:16] Yes.

Craig: [39:17] I think people are agreeing with you I think, out there, so…

Chris: [39:19] I hope so, and we’re going to keep at it big time. It’s a business for us.

[39:23] But just for example, you’re writing some SASS or something and you have an error. You screwed up, so it doesn’t compile. We’ll show you an error like right on the line that that error happened. I think it’s a nicer place than that…even when I’m writing in “Sublime Text”. Of course it’s not really meant to be an alternative to your desktop IDE, but still there’s little things that are nicer to use that I like, and I prefer to that.

[39:48] We have new features in CodePen, like you can write a blog post. Just being a member of CodePen, you have a blog there as well. You don’t have to use it, you can do whatever you want with it. It’s just nice. It’s just a nice little place, where you can publish a post really quick.

[40:02] You get for free syntax highlighting, and you can embed Pens really easily. You can write in Markdown, and you get a comment thread, and you have an RSS feed. You have all this stuff, for free in two seconds. That’s kind of the thing that…

Craig: [40:16] It’s much more community oriented. I’m getting the differentiation there, and that’s not to say that some of the other sites aren’t trying to do the same thing, but it seems that you guys are leading the charge in that community area, with your communities.

[40:30] Where can people go to find out more about you?

Chris: [40:33] Those two sites are great. I mean I have a personal website, as well that’s just my name, chriscoyier.net, that kind of links off to these other things. I don’t write there a ton, although, I did just publish a post today.

Craig: [40:46] Surprise, right? There’s content going up there.

[40:49] Again, thanks for your time. I’ll put plenty of links to all the stuff we talked about in the show notes, including over to your personal blog, and css-tricks, and codepen.io. Again, thanks, Chris, and I appreciate you taking the time.

Chris: [41:03] Yeah.

Craig: [background music] [41:03] Thanks for listening to the “Front-end Developer Podcast.” Please subscribe to the podcast by going to the iTunes store on your phone or desktop, then searching for Front-end, or via RSS by going to frontendcast.com, where you’ll also find show notes and a full transcript of each episode.

[41:21] If you haven’t already, please take the time to check out my book, “The JavaScript Framework Guide, Angular JS, Backbone, Ember | Confidently Choosing and Quickly Learning” by going to javascriptframeworkguide.com.

[41:35] Thanks. We’ll see you next time.