Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Improving rendering

From: Deploying Icon Fonts for the Web

Video: Improving rendering

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

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.

Show transcript

This video is part of

Image for Deploying Icon Fonts for the Web
Deploying Icon Fonts for the Web

21 video lessons · 1705 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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

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?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

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 preferencesfrom 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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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.