5 ms·

Weird. Citing Opera mini as a reason to switch from icon fonts to svg, despite the fact that IE8 and back does not render SVG's. I'm willing to bet the latter h

Weird. Citing Opera mini as a reason to switch from icon fonts to svg, despite the fact that IE8 and back does not render SVG's. I'm willing to bet the latter has a large audience share. I would add a counter argument to "it feels hacky" because to me, it feels like the perfect solution: icons are symbols that we use to explain things, just like words. The font format in particular seems perfect for this: - One single download to get your entire icon set - Font rendering engines have been around long before web browsers, so they are relatively mature on all platforms - Scales just as nicely as SVG

MatmaRex 13y ago
A good thing about SVG icons is that it's possible to provide a PNG fallback: http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique http://pauginer.tumblr.com/post/36614680636/invisible-gradie... (apparently people in OP's post did this too).
Smudge 13y ago
The article mentions they use grunticon to provide a PNG fallback, so IE8 is not a problem: https://github.com/filamentgroup/grunticon https://github.com/filamentgroup/grunticon
badman_ting 13y ago
> I would add a counter argument to "it feels hacky" because to me, it feels like the perfect solution: icons are symbols that we use to explain things, just like words. Interesting point! But I think where it falls down is that the HTML content used to conjure a given icon is never related to the icon's content. If there was some way of representing words as icons with a font (perhaps using ligatures?), that would be one thing. But as things stand, it's still a hack.
- baddox 13y ago
  I don't think it's a good point. A font is a collection of specific visual representations of existing and known symbols. That is why you can (barring this use case) change the font of text and lose no meaning. To use the old HTML/CSS mantra: text is semantic; fonts are presentational.
fit2rule 13y ago
I've been a huge fan of single-.ttf packages for various industrial applications - i.e. all the symbols of the app are simply custom glyph indices. This sort of stopped being 'a thing', somewhere along the line, but in some quarters, .ttf is just as performant a file-format as a .zip-appended-.exe is to others. Font-rendering is an important science and branch of Human Communication, imho, and a lot of very difficult problems have been forward-solved by fontographers, before us, we must always remember! Those who propose to make new symbols must be compelled not to forget the old!
aaronem 13y ago
Sure, all of those things are true. Then you run into someone like me whose eyes are not as young as they once were, and who doesn't care to be abused with whatever happens to be the stylish designer's font palette du jour, and who therefore uses his browser settings to apply a minimum font size and a set of preferred typefaces which page styles aren't allowed to override, and then everything goes to hell. Can you argue that it's my fault, not yours, that your page doesn't render well under the requirements I impose on the web content I consume? Sure, you can so argue. But every time you have to make that argument with a user, even if you win the argument in that instance, you're still both limiting your potential user base and risking a perception that you're less concerned with your users' needs than with satisfying your own desires.
- badman_ting 13y ago
  Well, that minimum font size wouldn't apply to SVG icons, so you're still not going to see them very well. So, it may be more effective to zoom the entire page overall rather than just font sizes. Also, note that you apparently don't assign any culpability to browser vendors for the state of affairs. I encourage you to revisit that, plenty of blame to go around.
  - aaronem 13y ago
    Sure. But that's an occasional need, while not enforcing a minimum font size means hitting C-+ a couple of times for pretty much every page I ever load. In any case, the icon-font problem has less to do with the minimum font size than with the enforced typeface selections, which necessarily and completely break icon fonts. I'm not sure which portion, of the blame in question here, you contend belongs properly with browser vendors. There are lots of things they might do differently, but I don't see how this is one of those.
- debaserab2 13y ago
  I'm going to go out on a limb and suggest that if you're applying font size minimums and enforcing certain typefaces, you're probably fairly use to a web experience that isn't as the web developer / designer intended. I don't know anyone who QA's their designs with different browser font sizes.

MatmaRex 13y ago

A good thing about SVG icons is that it's possible to provide a PNG fallback: http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique http://pauginer.tumblr.com/post/36614680636/invisible-gradie... (apparently people in OP's post did this too).

Smudge 13y ago

The article mentions they use grunticon to provide a PNG fallback, so IE8 is not a problem: https://github.com/filamentgroup/grunticon https://github.com/filamentgroup/grunticon

badman_ting 13y ago

> I would add a counter argument to "it feels hacky" because to me, it feels like the perfect solution: icons are symbols that we use to explain things, just like words. Interesting point! But I think where it falls down is that the HTML content used to conjure a given icon is never related to the icon's content. If there was some way of representing words as icons with a font (perhaps using ligatures?), that would be one thing. But as things stand, it's still a hack.

baddox 13y ago
I don't think it's a good point. A font is a collection of specific visual representations of existing and known symbols. That is why you can (barring this use case) change the font of text and lose no meaning. To use the old HTML/CSS mantra: text is semantic; fonts are presentational.

fit2rule 13y ago

I've been a huge fan of single-.ttf packages for various industrial applications - i.e. all the symbols of the app are simply custom glyph indices. This sort of stopped being 'a thing', somewhere along the line, but in some quarters, .ttf is just as performant a file-format as a .zip-appended-.exe is to others. Font-rendering is an important science and branch of Human Communication, imho, and a lot of very difficult problems have been forward-solved by fontographers, before us, we must always remember! Those who propose to make new symbols must be compelled not to forget the old!

aaronem 13y ago

Sure, all of those things are true. Then you run into someone like me whose eyes are not as young as they once were, and who doesn't care to be abused with whatever happens to be the stylish designer's font palette du jour, and who therefore uses his browser settings to apply a minimum font size and a set of preferred typefaces which page styles aren't allowed to override, and then everything goes to hell. Can you argue that it's my fault, not yours, that your page doesn't render well under the requirements I impose on the web content I consume? Sure, you can so argue. But every time you have to make that argument with a user, even if you win the argument in that instance, you're still both limiting your potential user base and risking a perception that you're less concerned with your users' needs than with satisfying your own desires.

badman_ting 13y ago
Well, that minimum font size wouldn't apply to SVG icons, so you're still not going to see them very well. So, it may be more effective to zoom the entire page overall rather than just font sizes. Also, note that you apparently don't assign any culpability to browser vendors for the state of affairs. I encourage you to revisit that, plenty of blame to go around.
- aaronem 13y ago
  Sure. But that's an occasional need, while not enforcing a minimum font size means hitting C-+ a couple of times for pretty much every page I ever load. In any case, the icon-font problem has less to do with the minimum font size than with the enforced typeface selections, which necessarily and completely break icon fonts. I'm not sure which portion, of the blame in question here, you contend belongs properly with browser vendors. There are lots of things they might do differently, but I don't see how this is one of those.
debaserab2 13y ago
I'm going to go out on a limb and suggest that if you're applying font size minimums and enforcing certain typefaces, you're probably fairly use to a web experience that isn't as the web developer / designer intended. I don't know anyone who QA's their designs with different browser font sizes.