0:00:09 - (Matt): Welcome to Podcast Awesome, where we chat about icons, design, tech business and nerdery with members of the Font Awesome team.

0:00:29 - (Matt): I'm your host Matt Johnson, and in.

0:00:32 - (Rob): This episode we delve into the history.

0:00:34 - (Matt): And evolution of icon tech on the web with Rob Madole. From early low resolution images to the rise of web fonts and the emergence of SVG, we cover it all. We discuss the pros and cons of each technology, their impact on performance, accessibility, and use cases. Rob highlights font awesome solutions such as. Such as kits to simplify icon usage, and provide practical advice on deciding between.

0:01:01 - (Rob): Web fonts and SVG for your projects. Okay, Rob, so it's been a little while, maybe a couple years now, but we put out a blog titled Web Fonts versus SVG. Which one should you use? Well, it depends. So I thought it might be good to actually have a conversation about this. So first of all, I wonder if you could give an overview of icon tech and as it changed, and maybe why it changed. And particularly I'm curious about web font technology and why folks started using that.

0:01:39 - (Rob): And then maybe we can talk a little bit about when folks started using SVG and why.

0:01:46 - (B): Yeah, that's a great place to start. Take on the history part of it first and think back to the nineties. And honestly, it was even before then. But when the Internet was really starting to take off, you had people making their own sites on geocities or the old MySpace page. Icons are not new, they've been around since we've had the Internet. When people started using the graphics, first kind of version of the technology was to use images.

0:02:16 - (B): And the images were typically low resolution. It wasn't anywhere close to the retina displays or the high DPI displays we have today. It was, these are old CRT monitors that, you know, they were just low resolution. And these images were, they were JPEG formatted. They were GiF, or GiF, depending on how you want to pronounce that. And the problem, it's Gif. I think it's gif. That's probably, that's probably another podcast, right?

0:02:50 - (B): So you've got these images, and the first downside with them is that you have to have a special program to make these. You know, a long time ago, maybe it was Photoshop or some other program. So you had to have, you had to know how to do them. And I, you decided what size they were going to be beforehand, and you couldn't really resize these things. So it was difficult if you wanted one at a small size, then another one at a bigger size.

0:03:19 - (B): You'd have to make two separate files. Or the really advanced folks would use sprites, like you mentioned, sprites in the intro, sprites were basically a single image, big image with a lot of littler images on it. And you would use some web techniques to just display a part of the image that you wanted.

0:03:41 - (Rob): So tell me if I'm wrong here. When I envision sprites, you're basically putting tiny images together where they need to be, and then the page loads up essentially as one image, isn't that right?

0:03:55 - (B): Yeah, the page loads, it loads that one image. If you just took that big image and there's, let's say there's a thousand different little icons on there, and you threw that on the page, you would see a big image with a thousand icons on it. So the magic of a sprite was, we said, well, wait, go ahead and load the image, but I'm going to give you a tiny window over the top of the image, and we're going to mask out all the rest of it.

0:04:22 - (B): And you can move that window around wherever you wanted to. And you would use a coordinate system, an xy coordinate system, and you can move that window, and your window could be, you know, maybe 30 pixels by 30 pixels, whatever the size is, and the rest of the image, you couldn't see it. You just had this little tiny 30 by 30 window. And that's how those ultra brights worked. And you could do some neat things, that one image would be faster to load than a bunch of tiny, small ones.

0:04:58 - (Rob): So at some point I've heard Dave talk about this, and correct me if I'm wrong, it seems like Dave was at the forefront of this new way of rendering the icons, right, with the font that retina displays became a thing. And then this old tech have these really nice retina displays, but the tech hasn't really caught up yet, and your icons pop up and they look all pixelated and crappy, right? And so what, they're going like, okay, how do we get these icons to look better?

0:05:31 - (B): Right? That's exactly it. Yeah, they look like junk on the retina displays. And about the same time Dave was making this connection, hey, can we make these look better? The custom web fonts were showing up on newer browsers because before, we don't think about it, nowadays, we use whatever font we want to on a web page on a site. You get to pick it and load it however you want. But before browsers were restricted to a finite list of things of web fonts that you could display, and it came bundled with the browser. You couldn't load anything externally and use an external font.

0:06:13 - (B): Well, that started to change. So now you've got the ability to load a custom font, and you've also got these new retina displays coming out. And Dave had that great idea. Well, let's put the two together. So instead of showing the font and paragraphs of text for each letter, instead we'll put an icon in place of a letter. So a became know a pie icon, b became a birthday cake icon, etcetera. So then, uh, then it was just a matter of coming up with the way that you put that on the screen. So Dave, he used a specific HTML tag, and you would type out what you wanted, the name of the icon, and then that thing would show up on the screen.

0:07:00 - (B): And it looked fantastic on retina, it looked fine on the old displays. It was, it was compressed, the file format was compressed, it didn't take up very much space. It was much smaller than an image, than a bunch of images or bitmap images at the same size. So it was like, okay, this is just a bag of win, let's do this.

0:07:25 - (Rob): Yeah, and so, and that's also going to help your page load up faster too, right? I mean, as long as you don't have like tons of icons.

0:07:33 - (B): Yeah. And it does help your page load faster. So, and then back, you know, back then, the first version of font, awesome. There was only a few, few hundred icons in there, and that doesn't take up hardly any space at all. Easily, easily better than any image you could load. The other benefit to using a typeface is most operating systems have a lot of optimizations built in for displaying a typeface anyway, because everything on your computer uses some kind of, there's some kind of a font system, typeface system, so that you can read text on a screen.

0:08:16 - (B): All of that is super optimized. So leveraging that optimization in that system, man, that just makes everything screen, makes it super fast.

0:08:33 - (Rob): So I imagine that the web font kind of had its time in the sun, but at some point folks start using SVG. Why would somebody. Well, maybe you can explain SVG tech, and then we can talk about why somebody would choose one over the other.

0:08:53 - (B): As people used web fonts, they were excited. Finally we had this tool that it worked much better than the old way with bitmaps. The project got really popular, but there was this problem with web fonts and icons that was slightly uncomfortable. It was the fact that you were using a technology cleverly, but you're using a technology that's really meant to display content, not graphics. And icons are typically a decorative kind of, kind of thing.

0:09:34 - (B): The Internet community about this time was starting to become very aware of accessibility, and they were also the idea of this semantic web. So the stuff that makes up a web page, all of that stuff being semantically important.

0:09:58 - (Rob): So the difference being like, you might have icons that are more decorative, maybe fun for your particular design, but a semantic icon would be, it has very specific meaning as far as wayfinding or something on a site. Right. And that needs to pair with, say, accessibility type concerns. Is that about right?

0:10:20 - (B): That's right, that's right. So you had accessibility concerns, you had semantic concerns about using an ITAg and I element to display an icon. These were some kind of knocks against web fonts and Font Awesome. When we launched the Font Awesome five Kickstarter, these things weren't a secret to us. We knew that these were some downsides, potential downsides to using web fonts. We put a stretch goal in there. Part of our Kickstarter rewards was to introduce SVG into the mix.

0:10:57 - (B): So now we wanted to also support SVG. What is SVG? SVG stands for scalable vector graphic. The advantage of this is this is a thing that's made specifically to show you graphics, to show you images or decorations, show you illustrations. It is great for showing you an icon. Accessibility wise, there's a lot of battle tested ways that you handle svgs. And semantically, having an SVG on the page is that's exactly what it's for. So it works semantically.

0:11:47 - (Rob): Sometimes the web font is a good way to go, depending on your project and what you're building. Sometimes SVG is better. When I go online and search some of this stuff up, some people get quite dogmatic about it, but it seems like where we kind of land on it is like, well, it really depends on your project. One can be better over the other, but you sort of pick and choose depending on what you're building and what your needs are, right?

0:12:13 - (B): You very much do. Yes, we get this a lot in support. So we've got, part of our pro subscription is you can talk to real humans and talk to somebody and get support for your project. And we get this a lot. People ask us, which one should I use? And we've tried to explain it depends. Well, it depends. That's exactly what we say. And we use that tone of voice too. Well, it depends. And we've tried to document it. We of course have a blog post that talks about it goes into a decent amount of detail, but that depend part give that answer is not very satisfying, right? But just quickly, maybe we should go over some of the basics of when you choose web font, when you choose SVG.

0:13:01 - (Rob): So why web fonts are awesome? Maybe you can start there.

0:13:05 - (B): Sure. So web fonts are awesome because they're already built into your operating system. They are compressed. The file formats that you make web fonts from are very mature. They've been around for decades at this point. And being able to load all of your icons in one file means that you don't have to make a lot of HTTP requests. Your browser doesn't have to go out and get a bunch of stuff. You can just get one file and there we go.

0:13:43 - (Rob): But web fonts are not always best case scenario, and sometimes they suck depending on what you need.

0:13:50 - (B): Sometimes they do. One example is that because we're using technology that's meant to display text content, actual content from for a page, when we do things like try to animate the icons, the best example I have is, and this was an issue that we didn't solve for, I think it was probably seven plus years after it came up. But we have. You put a spinner on a page, a little thing that indicates something's loading or you're waiting on something.

0:14:22 - (B): And with web fonts, we had the toughest time getting that thing to stay centered so we could make it spin. But getting to center where it's supposed to, that was so hard to do. We finally did solve that, but it.

0:14:36 - (Rob): Took looks sort of like wobbly and not.

0:14:39 - (B): Yeah, it looked like it was drunk. It couldn't, it couldn't stay in trunk icons. That was a problem we didn't have with SVG. Yeah, the first time we tried it with SVG, because it's a, it's made for graphics. That thing was perfectly centered. It did exactly what it was supposed to. But those very optimizations that make web fonts great because every operating system supports them, had actually kind of made it really difficult to get those icons centered perfectly when they were animating.

0:15:11 - (B): So you run across some just weird things with web fonts. Another thing has to do with accessibility. So we've already mentioned that we're using web fonts to display icons. That's not really what the intention was from the beginning. And that means that if you want these to be accessible to screen readers, you have to take some extra steps. You got to know what those are and you got to put the effort in it just doesn't happen automatically.

0:15:40 - (Rob): So a follow up to that, I think the svgs we help out with the accessibility. Is there anything that font awesome provides when folks are using the web font that's accessibility related, so maybe they don't have to do as much legwork, or is that still something somebody has to do on their own?

0:15:57 - (B): Yes. So we do have a product called kits that's part of a part of our fun awesome subscription, or even our free users can use a free kit and we have a little bit of JavaScript that will even make those web fonts accessible. There's a really simple thing you can do that gets you 90%, 95% of the way there. And yeah, that's built into our kits. We have that by default that always runs. So you can get around the accessibility parts if you get a little help from JavaScript. Web fonts are also kind of limited on the things they can do.

0:16:37 - (B): Things like multicolor or duotone icons can be really difficult. Doing additional styling on the icons using CSS is pretty difficult to do. So that's where SVG kind of starts to win out. Because it's a format made for graphics, you can do more graphical crazy stuff with it.

0:16:57 - (Rob): Yep, we go through the same put the svgs through their paces, why they're awesome, and maybe examples where their svgs might suck.

0:17:09 - (B): So svgs can be awesome whenever you use a small number of them and you're willing to put them directly in your page. So with the web font that is a separate file, it's using a separate technology, browser has to support it, it has to know how to use that file format. Svgs are actually just markup. So the same markup that you would use to make a heading or a paragraph, you put it in the body of your HTML page.

0:17:45 - (B): SVG is just markup. So one of the most performant ways you can use svgs and icons is just to put it directly in your page. There's no additional requests that have to go, we don't have to go fetch another file, there's no additional technology needed. The accessibility is a lot easier to accomplish with SVG. There's lots of great documentation and examples of how you do that, and they're graphical by nature.

0:18:16 - (B): So doing the animation that I talked about earlier, where you were spinning an icon, that just works. Other advantages of using SVG is, and I mentioned with web fonts, you're limited as to what you can do with those. SVG, because it's a graphical format, lets you do additional things one of those is we have a feature we call power transforms, and it allows you to move an icon up or down, left or right, scale it up or down by just very small increments so that you can perfectly position the icon where you need it to be. Sometimes you're going to run into a design that you really need that kind of control.

0:19:00 - (B): You can do that with SVG, you can do that with phone. Awesome. That is not super easy to do with a web font, right?

0:19:08 - (Rob): Yeah.

0:19:08 - (B): And we do have some other features that are SVG dependent. Things like masking, where you can take two different icons and composite those together. And then there's also some other kind of added features with layers, putting text over icons, putting counters or badges on icons, all that's done through SVG. Now, if you don't need those, you don't need them, that's fine. But those are SVG specific features that we've got with one. Awesome.

0:19:39 - (B): Yeah, but there can be downsides. So with SVG we can suck. Because if you embed an SVG on your page, you are responsible for styling and presenting that in a way that you, however, you need to use that. Web fonts are a little easier. They show up at a size that's kind of reasonable. They size themselves according to the other content on your page. But if you just throw an SVG on a page, you have to do something with it, you have to style it, you have to give it a width and height and make sure that it's useful for what you're doing.

0:20:17 - (B): Also, if you're putting them directly in your page, it can muddy your HTML page up. If you've got a bunch of icons in there and they're all in the page, well, all of a sudden now you've got a page full of mostly icons. So reusing them and managing them when you put them directly in the page can be a little cumbersome. Let's take a moment and say, okay, well, I don't want to put them directly in the page.

0:20:42 - (B): What if I were to just load them as a file and then put them on the page? You can do that, but then you're back into a situation that we were a long time ago where you're loading individual things on the network and that's going to take additional time. So now you've got all these requests happening to load each individual icon. That can sometimes not be so great.

0:21:17 - (Rob): We want to set font awesome up in a way to where we work the way that you do, like our tech and our icons are going to work in whatever way that you choose. And obviously we're not going to cover every single way somebody might use icons, but if there's a group of people out there that like to build things a certain way, we're going to do our very best to try and provide those tools so that they can do it how they want to do it.

0:21:44 - (B): That is exactly it. We want to meet people where they're at. Let us, especially if you're going to buy a subscription and give us money, let us do the hard work and let's give you something that's easy for you to use. And that's a little bit of a strange thing because there is, there does seem to be a rivalry between web fonts and SVG, and I've never really understood it. That's like, that's like, you know what, hammer a screwdriver.

0:22:12 - (Rob): What do you think, Matt?

0:22:13 - (B): Which one? Like, well, I mean, it depends. It depends on what you're doing and what you're going for. Performance is often brought up a lot when we talk about web fonts and SVG. And the first thing that I ask people, because we get this in support, as I say, well, how many icons are you gonna have on your page? And if they have that answer, I'll probably end up having 2000 or so icons on the page. And I'm like, okay, well, if you got that many, you probably want to start with web fonts, because there's some advantages to the way that that works.

0:22:47 - (B): If they say, well, I really only need three icons and performance is my number one thing, then I say, okay, what if you're doing it? If that's your number one thing, then do it this way. So, yeah, you're exactly right. We, we don't want to declare a winner or declare one is better than the other because honestly, they're both really great technologies. They have their pros and cons, and we want to help our customers get the best thing for them in their situation.

0:23:20 - (Rob): We want everybody to be a winner. That's right, everyone's a winner here at font awesome. Okay, so we've got a basic overview on when it might be a good idea to use a web font versus SVG. We're not playing favorites, however, it best suits their needs. But we also have some tech behind the scenes that will help people to get over the hurdles that are inherent to each method, which is the font awesome kit. Can you tell us a little bit about that, how that works and how it can help folks?

0:23:55 - (B): Absolutely. As we've talked about already. There are pros and cons. Some of the things suck about web fonts, some. Some things suck about SVG. So what we've done is we've tried to solve as many of those sucky things as we can. So the first thing that kits will help you with is that accessibility push. If they're using a screen reader, if they've got a vision impairment, they use your site, you're using a kit.

0:24:28 - (B): We just want that to work out of the box. We don't want you to have to think about it a whole lot. Let's just use a kit, use a little bit of JavaScript and make your icons accessible, whether you're using web fonts or SVG. And that's exactly what a kit does. The other thing that a kit can help with is one of the downsides to web fonts or even SVG, is loading icons that you're not using. So at this point, we have over 30,000 icons available through font awesome.

0:25:06 - (B): Our icon designers are overachievers, and honestly, they need to stop making icons, but they won't. And if you had to load all of those icons through a web font, because it has to be single file, and even though, even if it's compressed, that thing can be huge. So with our kids product, you can go in and you can pick just the ones that you want to load. You can pick individual styles, or you can even get down to the individual icon that you need and just load those in.

0:25:38 - (B): So kits will solve that problem. The other issue is both with web font and with SVG, it can be difficult to get it integrated into a website. You have to worry about some pretty technical things with web fonts and the way that those things load, HTTP headers, things like that, cores, cross origin policies, we want to solve that as okay, we'll host it. We have our own CDN, we know all those tricky bits, so we give you a URL, you put that on your site, it's going to be loading for Mars CDN and we've got all that stuff taken care of. The other thing is whenever we release a new version of Phone awesome, which we do, we tried to fairly regularly. The last one we released was Sharp Duo tone, which is a pretty big released for us because it was our first duo tone style, other than the first original one, we want you to be able to automatically upgrade.

0:26:40 - (B): So if you weren't using a kit which automatically gets you to that latest version of font awesome, you'd have to go and download or install or somehow do the upgrades yourself. And maybe that's not a huge deal. We try to make that as easy as possible, but you got to spend some time on it. You probably have to deploy a new version of your side or hit a publish button. So kit, you can just automatically get the latest version.

0:27:05 - (B): And the last great thing about kits, and especially with this context of web fonts versus SVG, is we've got a little toggle in there and you can switch between them with the click of a button. So if you want to try one out of and see how that works with your site, see how it performs, you can do, you can do that, switch to the other one and see how it performs. And nowadays we have a lot of great tools built into browsers in every browser that will help you measure performance.

0:27:36 - (B): So you can jump right in here and two clicks, you'll be able to change that kit and make it load one or the other.

0:27:46 - (Rob): Nice. Well, I'm glad that we're talking about kits, and we are aware, folks, that we don't always communicate well what a kit is. We're always doing our best to articulate this better. So it helps to actually go through particular situations and say like, well, how would it apply here? You know? So glad that we could talk about that. Rob, I appreciate you taking some time to explain this to us, and we're really just covering some information that we wrote up on a blog. If I folks need to slow down and consider whether they would use SVG or web font, you can go to our blog and we actually have a handy dandy little printout that will help guide you through how to make that decision process.

0:28:27 - (Matt): And that wraps up our discussion on svg versus web font.

0:28:33 - (Matt): And we hope you found our deep dive both informative and helpful in making the right decision for your project. And a big thanks to Rob Madole for sharing his expertise with us today.

0:28:46 - (Matt): And if you found this episode helpful. Maybe pass it on to your friends. This podcast episode and all episodes of podcast awesome are produced and edited by yours truly, Matt Johnson. The fun, awesome theme song was composed by Ronnie Martin, the musical interstitials were created by Zach Malm, and audio mastering was done by Chris Enz at Lemon Productions.