Layout problems with the two Facebook icons

[GermanKiwi]

I've noticed some very significant problems with the two Facebook icons (fa-facebook and fa-facebook-square) since updating Font Awesome to version 4.1.0 from 4.0.3.

This screenshot shows the two Facebook icons at various sizes. There is a single space character between each icon. The sizes displayed here are: 10px, 12px, 14px, 16px, 18px, 20px, 22px.

You can see in my screenshot that the 4.0.3 versions look nice and clear and distinctive, and also very consistent across the sizes. But the 4.1.0 versions do not. (These screenshots were taken with Firefox 28 on Windows 7, but they're also identical on IE11).

Looking at these two icons one at a time, here is what I see:

First, the fa-facebook icon:

At much larger sizes (eg. 50px or more), this icon looks identical between 4.0.3 and 4.1.0. But at smaller sizes, there is a clear degradation with 4.1.0. The icon - at the smaller sizes shown in the screenshot - look "squished", like someone has squished them downwards so they're not as tall as they should be.

Additionally, the 4.1.0 versions are not all sitting flat at the bottom of the row, as you can clearly see in the screenshot - I've drawn a red line underneath them to illustrate this. Some of the 4.1.0 icons are sitting a couple of pixels higher than the others. But with 4.0.3 they are all sitting nice and flat on the red line.

Lastly, there is a significant increase in the horizontal spacing between the 4.1.0 icons. As you can see, the row of icons is much wider than the 4.0.3 icons, with more spacing between them. Why is that? I think the spacing should remain the same as before.

Secondly, the fa-facebook-square icon:

With 4.1.0, the letter 'f' inside the square looks clearly out of shape. Eg. with the largest version I have here - 22px - the horizontal crossbar in the middle of the letter 'f' is noticeably thicker than the rest of the letter. And the smaller versions of this icon also look out of shape.

Compare that with the 4.0.3 version, where the letter 'f' is nicely in shape and uniform across the sizes, even with the smallest 10px size.

I've also included the blue "official" logo from www.facebookbrand.com for comparison. Clearly the letter 'f' inside the 4.1.0 icon is quite different.

Anyway, I don't know why these icons have changed in this way, but I hope you can fix them please! I know that the fa-facebook-square icon was modified to align the letter 'f' to the bottom of the square, in accordance with the official logo - which is certainly a good thing! But that shouldn't result in the 'f' becoming distorted like this.

And I don't know why the fa-facebook icon has changed at all - there shouldn't be any need to update that icon in terms of the official Facebook guidelines, because it already looks correct in the 4.0.3 version - right?

Cheers!

[tagliala]

refers to #3440

[tagliala]

added to milestone 4.1.1 so Dave will eventually take a look

[GermanKiwi]

Thanks!

[davegandy]

I wonder if there's something funky going on with the hinting. I'll look into it a bit more. Not sure why they're aligning differently, too. Very odd.

[tagliala]

@davegandy I checked the .svg files and the square shape is identical... I don't know if there is a misalignment with the grid inside the software you are using to make glyphs...

https://github.com/FortAwesome/Font-Awesome/issues/3440#issuecomment-50344240

[davegandy]

I think I found the issue, which should actually touch a good number of issues. When I exported via Font Squirrel, I let them override the hinting from the .otf. I did NOT do that with 4.0.3. So this could cause all sorts issues around pixel perfection, just like this one.

Still digging.

[davegandy]

Should be quite a bit better in 4.2.0-wip branch. But keep in mind, FA is designed to be used at 14px and multiples of 14px. Windows does VERY harsh anti-aliasing, which makes it almost impossible to get this to work well at in-between sizes.

If it's not better, we can discuss and I'll consider re-opening.

[GermanKiwi]

Good to know, thanks! I'll check it out. If it at least looks the same as it did in 4.0.3 (as per my screenshot above), that's good enough for me! :)

[tagliala]

@GermanKiwi do you mind to give a try and post a new comparison?

[tagliala]

http://jsfiddle.net/tagliala/1rf32u7y/ (fiddle based on 4.1.0)

[GermanKiwi]

Okay I've just been playing around with this on my client's website, with mixed results.

I've created three test pages, each one loading a different version of FA. They are otherwise identical in every regard.

Here are the results - showing 4.0.3, 4.1.0 and 4.2.0-wip respectively:

The first two are loading the font from maxcdn, while the last one is using 4.2.0-wip which I downloaded just now from https://github.com/FortAwesome/Font-Awesome/archive/4.2.0-wip.zip and uploaded to my site.

So what I note is this:

Firstly, on the 4.2.0 page, you can see the top of the fa-facebook icons have been chopped off! I have no idea why - I can't see anything in the CSS that would cause this. I'm using the exact same ".bordered" div that tagliala used in his jsfiddle to get that red line. Any ideas?

Have a look at the three icons in the very top-right corner of the page (envelope, facebook, rss). On the 4.2.0 page, the icons move up by several pixels, which causes the top of the facebook icon to get chopped off (and none of them are centered inside the black square anymore, as a result). Again, there isn't any difference in these pages regarding CSS or anything else. The only page difference is the Font Awesome .css file which is called in the head section of the page. So why is 4.2.0 moving those icons up like that, compared to the previous versions?

4.2.0 is definitely better in terms of sitting nicely on the red line, compared to previous versions. So that's good. And the 'fa-facebook-square' icon is great with 4.2.0 - it's shape is consistent across the font sizes, it looks like the official Facebook logo, and no distortion of the 'f' like with 4.1.0. So I have no problems with that icon.

The 4.2.0 'fa-facebook' icon seems to be distortion-free (unlike 4.1.0), as far as I can tell (although having the tops chopped off doesn't help!), which is also great. 4.2.0 is not squished down and distorted the way 4.1.0 was, especially the crossbar of the letter 'f'. With 4.2.0 it's back to normal.

My only concerns with 4.2.0 now (with the 'fa-facebook' icon), are these:

1) The vertical spacing increased significantly from 4.0.3 to 4.1.0 and remains increased with 4.2.0. You can see what I mean when you toggle back and forth - and also in tagliala's screenshot above. 4.1.0 and above have a lot more vertical space between each letter. Why is that?

2) For some reason, the 4.2.0 fonts look a little "blurry" around the edges compared to the previous versions. I magnified the largest two letters in my screenshot above, for 4.0.3 and 4.2.0, and you can see that there's a big difference around the edges. With 4.2.0 it has light-grey pixels around the edges, which make it look blurry, whereas with 4.0.3 it has a bolder bluish tinge around the edges which make it look sharper. Why is that? And you can see the same effect with the envelope icon in the top-right of the page - with 4.2.0 it looks different - blurrier. And also with the 'fa-facebook-square' icons too.

3) As mentioned above, the 4.2.0 icons have all jumped up by several pixels compared to previous versions.

Anyway, if either of you can help me figure out the cause of the chopped-off tops of those letters, that would be a great start! :) Cheers!

[tagliala]

@GermanKiwi you are using the .otf file used by Dave for development

@font-face{font-family:'FontAwesome';src:url('../fonts/FontAwesome.otf') format('opentype');font-weight:normal;font-style:normal}

You should fix this, using the proper font declaration:

@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.2.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}

I just tried on your website:

[GermanKiwi]

Ah, right you are! I didn't know that the .css file had to be modified like that, with the 'wip' version - I just used it as-is, directly from the zip file. :) I've edited it now and it looks much better.

(The 5th 'fa-facebook' icon - at 18px - looks like it's a little bit flat at the top of the letter 'f', but I imagine that's coz it's something other than 14px? Not a biggie anyway).

So that takes care of the 2nd and 3rd points in my previous message. The only question remaining for me is why the vertical spacing has increased with that icon - and will that have any effect on the layout of webpages that are using that icon? :)

[tagliala]

@GermanKiwi I'm not sure I got the point 1...

vertical spacing = horizontal?

I only see the horizontal space increased, Probably because of #3440

facebook icon was updated in 4.1.0 to better meet facebook's brand guidelines and now it is 2 pixel wider

Moreover, brand icons are not guaranteed to be pixel perfect at 14px: brands are taken in (almost) as is... I.e. reddit is a mess at 14px

[GermanKiwi]

Good grief - yes, I meant horizontal spacing, not vertical - I can't believe I made such a mistake! {shakes head}

Okay well if the icon is 2 pixels wider (I guess that means the spacing around the letter 'f', coz the letter itself is obviously not wider) - then that must be the reason for the extra horizontal spacing. :)

The facebook-square icon is not any wider than before (that is the one mentioned in https://github.com/FortAwesome/Font-Awesome/issues/3440) - it's only the regular facebook icon that is wider. But in any case it doesn't seem to make any negative difference with how I've used it on my website. :)

Thanks for your help with checking all this out!