Deploying Icon Fonts for the Web
Illustration by John Hersey

Deploying Icon Fonts for the Web

with James Williamson

Video: Improving rendering

One of the main criticisms directed at icon fonts is that Okay, here are the same icons in Firefox.

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now
please wait ...
Watch the Online Video Course Deploying Icon Fonts for the Web
2h 4m Intermediate Apr 29, 2014

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.

Topics include:
  • Finding icon fonts
  • Ensuring consistent styling
  • Exploring class-based solutions for deployment
  • Deploying with the data-icon attribute
  • Aligning icons
  • Animating icons
  • Styling multicolored glyphs
Subject:
Web
Author:
James Williamson

Improving rendering

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.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Deploying Icon Fonts for the Web.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.