CODEWITHSUNDEEP
cssfontsfont-awesome
shrewdbeans
shrewdbeans

Reputation: 12549

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

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:

enter image description here

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?

Upvotes: 26

Views: 30534

Answers (8)

kirilclicks
kirilclicks

Reputation: 1677

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

Upvotes: 1

Marco Allori
Marco Allori

Reputation: 3304

Best cross-browser solution is:

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

Upvotes: 3

gterez
gterez

Reputation: 106

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; ?

Upvotes: 6

Paulo Rodrigues
Paulo Rodrigues

Reputation: 33

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.

Upvotes: 2

Ben Taliadoros
Ben Taliadoros

Reputation: 9451

-webkit-perspective: 1000;

Fixed it for me

Upvotes: 1

Kinglybird
Kinglybird

Reputation: 319

Use css font smoothing:

-webkit-font-smoothing: antialiased;

Upvotes: 0

user1519537
user1519537

Reputation:

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?

Upvotes: 21

Alexander Chen
Alexander Chen

Reputation: 1085

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

Upvotes: 13

Related Questions