Viewers: in countries Watching now:
Icon fonts are a fast, effective way to feature scalable vector artwork on websites. James Williamson shows you how to properly deploy icon fonts on your own site in this short course. Learn how to find an icon font that's right for you and style it so it appears exactly the way you want. Then learn about deployment options that will make your icons accessible and display consistently across multiple browsers and devices. James also introduces advanced styling options such as animated and multicolored glyphs.
Want to create your own icon fonts? Check out James' companion course, Creating Icon Fonts for the Web.
One of the main criticisms directed at icon fonts is that the icons will sometimes look blurry or sometimes overly pixellated usually this is due to either the icon font being displayed at a size other then one that's a multiple of its base grid or. It's more commonly due to anti-alias settings within the browser itself. Now often, you can improve the appearance of your icon fonts just by controlling the browser's anti-alias settings. So, I'm looking at the rendering. That it changed for from 0 to underscore 04 in my exercise files.
If I scroll down I can see that I have a series of three icons, three versions of them each, on the page, and right now they all look the same. They look a little bolder that they probably should? Yeah, a little bit, they do. So this is in Chrome, which is a WebKit browser, and I want to show you the same icons in Firefox. Okay, here are the same icons in Firefox. And again maybe a little overly bold. I mean, they don't look bad, but they can certainly look a lot better. So I'm gong to go in my code editor and open up the same page rendering that HTM just to kind of show you guys what's going on down here.
I've got 3 paragraphs and inside those three paragraphs I have spans that are displayed as inline blocks with each of the three icons. So I'm going to go into the _CSS directory Open up the base.css and scroll all the down towards the bottom. Here we go. And you can see that I've three classes down there for us, .none, .anti, and .sub. Right, now the reason I showed you both Chrome and Mozilla is because we have a couple of properties that can help us in webkit base browsers and in gecko based browsers as well. So for none Which would be no anti-aliasing whatsoever.
I can assign the webkit-font-smoothing and I can set that value to none. Now there's no Mozilla or Gecko equivalent of that one. Alright now, anti, we're going to take the same property. And you know, I'm terrible typist. The chances that I'm going to type that incorrectly the second time is. Woeful. So, I'm going to go ahead and add the same property, webkit font smoothing. There are three values, essentially, to webkit font smoothing. There's none, anti-aliast, and sub pixel outside aliast.
So, I'm going to do anti-aliast for the anti one, obviously. And what's really interesting about this is I've been reading through a lot of the Mozilla developer bug report forums. And they claim, and well I believe them, that basically this is kind of a misnomer because essentially what's happening is, is where either turning anti aliasing off altogether, where using sub pixel anti aliasing, which is where you take the actual device pixels which are typically much smaller Then the CSS pixels and anti-alias, which is to kind of smooth and blur the edges, for that, and then there is this one, antialiasing which is actually what Mozilla refers to as gray scale.
So, lets set that property. I am going to do dash moz dash osx dash font. Dash smoothing. So it's very similar, and this one is going to be called gray-scale. So, there you claim this is grayscale, anti aliasing like the basic, sort of standard, the anti aliasing thing, now if you're not familiar with anti aliasing is, one of the problems we're having, text monitor, is that obviously pixels are square. So if you form characters of fonts with just squares you get a really pixellated really bit mapped image.
So what they came up with was the ability to basically blur those edges so that the pixels along the edges of the letters were indistinct, they were various shades of black and gray. And that causes you know, you zoom far enough out your eye sort of blurs them into this nice, smooth, curved shape. Well that's great for fonts but not so great for icon fonts all the time. And so finally for sub let's do the same thing Imma paste that in, and instead of none I'm going to do subpixel-antialiased and then for my Mozilla font smoothing, copy that Here I'm going to turn this to auto.
And auto is sub-pixel. By the way, sub-pixel anti-aliasing is what we were viewing earlier when we were looking at the defaults, so if we don't choose anything we get sub-pixel anti-aliasing. Sub-pixel anti-aliasing is really, really Find detailed anti aliasing and it makes text look awesome but for icon fonts it can tend to make them look a little bolder or thicker then they should be because its edges are really in distinct and it can also cause curves in certain fine detail to look fuzzy so I'm going to save that so I'm going to go back out to my browser and this is chrome which is my web kept browser.
And I think if you look at them in order, you'll see none on the left, anti-alias in the middle, and subpixel anti-aliasing on the right hand side. You can see a huge difference in between none and just normal anti-aliasing, but take a close look at the icons in the middle column and the far right column. This is subpixel versus antialias. Antialias being in the middle, subpixel being on the right. It is most notable say in the pencil icon. You can see it looks a lot bolder on the right-hand side than it does in the middle. Same thing for the detailed microphone.
In the book it's not as distinct, but you can kind of see it, so you really see a quality difference in all three of these. All right, let's take a look at it in Firefox and you can definitely tell a little bit of the difference between the columns Remember there is no none equivalent in the Mozilla font smoothing. So what you're seeing is the far left column and the far right column are the same. They have auto applied which is sub-pixel. And then the grayscale anti-aliasing is in the middle. You can definitely see the difference in say, the microphone quality and the quality of the pencil and the book as well if you take a real close look at it.
It certainly looks A little crisper, a little bit more distinct. So what should you take away from this? Well, whenever you normalize your fonts, you want to use these values right here. I'm going to copy those. I'm going to up to my normalization block and I'm going to paste them. And then I can get rid of these guys. So in addition to normalizing our fonts like we did in the last exercise I also recommend adding these anti aliasing values to your normalize selector as a way of ensuring consistent rendering for your icons.
There are currently no FAQs about Deploying Icon Fonts for the Web.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.