Using an icon font (Font Awesome) looks a little blurred and too bold

Question

I'm using Font Awesome to create icons on my site, and while they look fantastic on the iPod Touch with Retina display, on my iMac they looks a bit blurred and less defined.

Here's an image to demonstrate:

As you can see, the font looks really nice and crispt on the Retina Display iPod Touch, but on the iMac, it's kind of crappy.

What is causing this? Is this to do with anti aliasing? Is there something I can do about this?

Raveaux

Answer 1

Problems like this are likely related to anti-aliasing or hinting. Fonts need to be aligned on a grid of some sort if they hope to look good at smaller sizes. The GitHub guys wrote a great blog post on how they managed cleanliness in their custom font.

I would try to align it on a grid and follow in the GitHub people's footsteps. They did a good job on their icons.

Also: are the icons different numeric sizes between the iPod Touch and the iMac, or is that a side effect of different DPI settings? That may also be a concern with font rendering.

If possible, play around with your DPI settings. I don't use Macs, so I don't know how to change those settings on one. It still won't fix the underlying grid issue, though. Are you able to edit the font(s) in question?

Brooking

I think it's a side effect of the DPI settings as you said, as they are both the same font size. What are your thoughts on this? – Raveaux

I have a designer working on the font, so I've forward the GitHub article to him. I'm hoping we can mimic this technique. – Raveaux

Github recently moved to SVG icons, and published another good blog post about it. github.com/blog/2112-delivering-octicons-with-svg – Supernumerary

Answer 2

Adding to @sporkbox's answer, if you are particularly concerned about Webkit browsers, there are the following CSS options you can choose to use:

font-smooth: auto | never | always | <absolute-size> | length | initial | inherit
-webkit-font-smoothing : none | subpixel-antialiased | antialiased

Asphyxiant

Answer 3

I've found that some browsers try to emulate a bold font face when there's no bold weight available by making the lines thicker, resulting in something like the situation you're describing. Are you sure this appears somewhere where you have font-weight: normal; ?

Irrawaddy

Answer 4

Best cross-browser solution is:

.your_font_class{
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

Appointment

Answer 5

there's a strange trick that works sometime, try:

-webkit-transform:rotateZ(0);
-moz-transform:rotateZ(0);
-o-transform:rotateZ(0);
transform:rotateZ(0);

if you have a block centered, try to check if left offset is an integer. You can use Javascript to check and fix it. I can help you if you want.

Auriga

I had centering implemented with transform(-50%), and this was the reason of blurry icons. Replaced with margin: auto - now icons are sharp. Thank you. – Angadreme

Answer 6

-webkit-perspective: 1000;

Fixed it for me

Offal

Answer 7

Some of the solutions mentioned before kinda/sorta did the trick but what fixed it for me was removing (commenting out) the font size inheritance of the "fa" class inside font-awesome.css (and font-awesome.min.css):

font-size: inherit;

The final result of the class looks like this:

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  /* font-size: inherit; */
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
} 

In addition to this, I had to adjust the large icons because they were getting pushed down too far by commenting out this line from the "fa-lg" class:

vertical-align:-15%

The class looks like this

.fa-lg {
  font-size: 1.33333333em;
  line-height: 0.75em;
  /* vertical-align: -15%; */
}

I'm using Font Awesome 4.7.0

Ungrateful

Your final font size worked for me when nothing else did. How did you arrive at that size? What other values might work? – Thwart

Answer 8

Use css font smoothing:

-webkit-font-smoothing: antialiased;

Gobbledegook