Controlling font rendering - jQuery Tutorial

For the most part we don't have a lot of control over how our fonts are rendered within the browser. Most browsers have default antialiasing that they apply to text that helps improve readability. Now, each browser differs slightly so it's really not unusual to see some differences in how fonts render from one browser to another. Well recently WebKit based browsers began supporting font smoothing which is a WebKit only property that allows you to control which rendering the browser should use when displaying text. So, let's go ahead and check out how it works and when it's appropriate to use. Now, you can see I'm in Chrome right now and I'm previewing the file that we're going to be working on. And I've got three main columns of text and then another set of text below that. And you can tell I think by looking at them sort of what's going on here. The first one is going to have no antialiasing applied to it. The second one is going to have subpixel antialiasing and the third one is going to have just the normal antialiasing. Now, currently right now we're not using the font smoothing property at all, so we're giving the default antialiasing that Chrome uses. And, as we start to use this property a little bit you'll kind of see what type of antialising the WebKit based browsers do by default. Okay, I'm going to switch over to my code editor and again, if I just scroll down into the html. You can see that we have a couple of sections down here and those sections have some classes applied to them that identify the type of rendering that we're going to be working with. So, the file that I'm using here is the smoothing.htm file from the 01_02 directory and if you're doing this along with me, just go ahead and find the selectors down here for none, subpixel and anti. And we'll just go ahead and tackle none first. So what I'm going to do. I'm going to go inside that none selector there and I'm going to use the WebKit. since this is a WebKit only property we're going to use the WebKit vendor prefix. So we're going to do webkit-font-smoothing. And I'm just going to go ahead and set the first one to none. All right I'll save that. Switch back to the browser and you can see in this first column of text here exactly what's happening. Antialiasing is being turned off and we're just seeing the font with no antialiasing at all. Now this is actually the way text on the web used to look by default and you can see how much better antialiasing is making the text look. In certain instances for example when you're using really, really small text on screens and you're using sort of pixel font, sometimes it's really helpful to be able to turn this off. So the none value does give us the ability to turn it off when it's appropriate. You're not going to use it most of the time day to day but for smaller mobile screens or things like that you may want to switch it off and approve readability especially for smaller pixel based fonts. Now for subpixel antialiasing again we're just going to use the same property. So I'm just going to do webkit and we'll do font smoothing again. And this time, we're going to do subpixel and then a dash, and then antialiased. Alright, I'm going to save that and switch back over, now it doesn't really look like anything has happened and that is because subpixel antialiasing is the default font rendering for most WebKit based browsers. Now what subpixel antialiasing does for us and if you are not familiar with the term antialiasing in terms of what it does. You can sort of see here in the word" none" how the edges of the text here are really sort of blocky and very sharply defined. Whereas the edges of, say the" e" here is a little bit more blurry. And that's essentially what happens. It's blurring the edge pixels of the type. To sort of smooth it out a little bit. Now with subpixel antialiasing we get on to the subpixel level. Most displays nowadays have what they call a device pixel versus a CSS pixel. In the device pixels are almost always smaller. So the subpixel antialiasing actually allows us to apply antialiasing or blurring around the edges at a very, very small level. Which really helps make the text render a little bit more smoothly. So that's the default. So let's go ahead and compare this with antialiasing. I'm going to go back into my code editor and here again I'm just going to use the same property so -webkit-font-smoothing. And here we're just going to do antialiased. Alright. So we're going to save that and then we go back out to the browser. Now, the difference is subtle. But there is a big difference. I want you to pay particular attention to the white text on the dark background. You can see how much bolder it looks in the subpixel antialiasing versus the regular antialiasing. The whole way around you can see it doesn't look quite as bold. I've actually had people say before that as they're previewing the websites that we're working on. They're like well, my text looks great every where else but you know, for whatever reason in Chrome and Safari it looks really, really bold. And typically what's happening there is the subpixel antialiasing is giving it a little bit of additional weight. So in those instances it's okay to turn subpixel antialiasing off by using this feature. Now I want to also point out that I have seen several frameworks that go ahead and turn off subpixel rendering by default and I really don't recommend doing that unless you have a very good reason. In most cases you know, I'll go in the boiler plate CSS and it'll actually have a comment on it that says you know, improve font rendering in WebKit browsers. And, that's really not what you're doing. You're turning off the default, subpixel antialiasing and if you don't have a really good reason to do that, I don't recommend doing it. I like the fact that within WebKit browsers, we have that amount of control over the font rendering. But, I just want to remind you, use this capability wisely.