Icon font appears blurry/pixelated in recommended size

[xdghcnt]

I used this implementation before https://github.com/FezVrasta/bootstrap-material-design/tree/0.4.4/fonts Font-size is 18px Also described here with more examples https://stackoverflow.com/questions/36342329/material-design-icons-googles-recommended-font-sizes-look-bad-on-desktop-scree

[jossef]

I'm also experiencing this with the circle icons

[lipedeitos]

I know that this is not the best way to test something, but this blurry/pixelated problem with material is realy upsetting me. If you open the code in material page: https://material.io/icons/ Change the font-size, width and height to 18px, a lot of the icons there will get blurried and pixelated. Ex.: search, check_circle, and so on... Anything we can do to use material icon font in small sizes?

[abriginets]

Same for me. When icons has their default font-size: 24px, they looks normal, but when downscaling them changing font-size property they becomes pixelated.

[adamreisnz]

They also look blurry for me in 36px, which is a recommended size. I would have hoped to avoid blurriness at least for the common sizing ratio's, e.g. 0.5x, 1x, 1.5x, 2x

[adamreisnz]

Looking at the source, it appears there's some icons which actually have a 36px size, but a lot of them don't. That maybe has to do with this problem.

[MiChAeLoKGB]

Same here. I actually need them a bit smaller (14-15px) but even at 18px some icons (info_outline etc.) become pixelated.

To somewhat fix this issue and completely fix #679 you can use: transform: rotate(0.03deg);

To test this, you can go to http://google.github.io/material-design-icons/#sizing and add this style to the 18px face icon.

Its the same issue as FA icons had: https://github.com/FortAwesome/Font-Awesome/issues/4296

Just do not close this, because the rotation is just a hack and is not considered as a fix. I want to replace all icons in our CRM with Material Icons, but some of them, like info bubbles next to some fields, are small (15px) and Material icons just look horrible at such sizes. Some of them, like sync icon, look pixelated even at 18px recommended by Google.

[adamreisnz]

I have tested this with your rotation "hack", but I don't see any difference. It has no effect whatsoever. Maybe it's browser dependent? I tried on OS X Chrome.

[MiChAeLoKGB]

I am testing it on WIN 10 Chrome and there is a difference for me.

Here are the screens:

It really seems like the same issue FA had if you read that thread, there are some really good explanations why its happening.

[adamreisnz]

Well, I think the issue you are experiencing is the same FA has/had, but it's not the same issue I am having. The icon in your screenshot doesn't look blurry, it looks distorted with pixels sticking out of it.

What I am experiencing is actual blurriness, e.g. blurred lines of the icon. I will get some examples to show.

[adamreisnz]

Here's some examples at 36px vs 48px (both are "recommended" sizes):

Notice the bottom right side of the square in the calendar and see how blurry the lines became, vs how sharp the 48 pixel icon looks.

Same problem with the edges of the home icon:

The rotation transform doesn't fix this, it just seems some icons don't scale well to certain sizes, even though they should as vector graphics...

This is a problem on smaller LCD displays where I need to use smaller icon sizes, they all become blurry even though it's a crisp HD LCD display. It looks horrible and amateuristic.

[jestelle]

Our icon font is only optimized for the default size of 24px. These types of blurry issues are expected at other sizes.

For the time being, we'd recommend using SVG or PNGs for sizes other than 24px.

Long term, we may be able to do some tricky things with the font to better support multiple sizes, but I cannot guarantee this is something we'll be able to get to quickly.

[adamreisnz]

Would you be able to release another font variant (perhaps with different font weights) which are optimised for different sizes?

That way we could keep using the font, just specify a different font-weight CSS value for different sizes.

[xdghcnt]

@jossef Other implementation I shown was somehow OK on both sizes with the same original font, so maybe you should tweak converter instead or just switch to another one.

[byman64]

Same here. I actually need them a bit smaller (14-15px) but even at 18px some icons (info_outline etc.) become pixelated.

To somewhat fix this issue and completely fix #679 you can use: transform: rotate(0.03deg);

To test this, you can go to http://google.github.io/material-design-icons/#sizing and add this style to the 18px face icon.

Its the same issue as FA icons had: FortAwesome/Font-Awesome#4296

Just do not close this, because the rotation is just a hack and is not considered as a fix. I want to replace all icons in our CRM with Material Icons, but some of them, like info bubbles next to some fields, are small (15px) and Material icons just look horrible at such sizes. Some of them, like sync icon, look pixelated even at 18px recommended by Google.

THANKS HERE WORKED FINE!

note: caps to highlight it's a good hack!

[tphinney]

When rendered from the fonts, the Material Icons are only expected to look super crisp at 24 px. This is the “design size.” 48 px of course is still pretty crisp because it is an even multiple of 24. But 36 is not. Unfortunately, one can’t blow something up by 1.5x and have it fit evenly on the same pixel grid.

In theory they could use hinting to improve crispness at a range of sizes. Even autohinting might help. However, it would also increase the font file size.

[tphinney]

Actually, thinking about this more, and noting that people felt a tiny rotation helped... I think the behavior could be improved by better 'gasp' table settings. Indeed, I suspect the discussion on #855 would improve things.

I suspect gftools-fix-nonhinting.py would do the trick. I will need to fire up a Windows VM to test the output...