10 ms·

We switched from an icon font to SVG

145 points by kaishiro 13y ago

eridius 13y ago
> We consider a small subset of our icons to be critical to the user's experience but we don’t think that way about our font or the other icons. Why don't you consider your font to be critical? In my experience, with Safari, if you use a custom font, text won't render at all until the font has loaded.
- ianfeather 13y ago
  We consider the system font critical, and we render the page with that because it it will load instantly. The custom font is then loaded after the content and used on the following page. Note: this setup is only used sparingly on our site as it has been waiting for this piece of work to be completed.
  - eridius 13y ago
    Curious, the first time I read your post, I saw exactly what I described, which is all text was missing for a second, and then appeared in the custom font. But when I try now, I get the system font for a second, then it switches over to the custom font.
kaishiro 13y ago
As an aside from the post's content, I really dig the use of counter arguments directly within the article. Not sure if this is a thing or not, but I'm going to start using it.
- ctrl 13y ago
  True strike, it should be a trend.
ward 13y ago
As someone who does not allow his font choice to be overriden, yes please. Fonts shouldn't be used as icons, it has felt wrong to me since wingdings. Document Font Toggle ( https://addons.mozilla.org/en-US/firefox/addon/document-font-toggle/ https://addons.mozilla.org/en-US/firefox/addon/document-font... ) helps for the few sites I use frequently enough that do this, but I still don't like the inconsistency in looks it gives across websites then.
- fit2rule 13y ago
  >Fonts shouldn't be used as icons The problem is that fonts are icons, in that they are arbitrary collections of curves, shapes, and symbols, which communicate meaning only to the end-user, and are highly dependent on the end-users understanding of what the thing is that they are clicking, will do. An icon, a font symbol, a glpyh, a ligature - these are all mere lines in the sand. You want to make another file-format with that, kid?
  - ronaldx 13y ago
    You can use whatever curve, shape and symbol you like, but the unicode U+0079 should essentially represent the letter 'y' (rather than 'umbrella'): that's precisely the point of it. If I don't get your symbol, I should be able to revert to a font that I do get.
    - fit2rule 13y ago
      Symbols are random things that mean nothing until someone says it. If you and I agree that U+0079 is 'y', then so be it. But lets use the other namespaces of the index, too .. and in that regard .ttf has much to offer the aspiring user of the format. Problem is, a shallow look at it, of course, renders the conclusion that it is an investment; but if I know for sure my glyphs render the same way for grandma, no matter if she's using it on some grungy screen, somewhere, then I'm okay with letting the heart-beat monitor screen be composed mostly of cache-able sub-functions derived from somewhere_safe.ttf. On the other hand, using SVG to pre-load values, then modifying the decomposed stack, somewhere appropriate, in order to attain sustainable realtime SVG rendering performance .. seems as if its a matter of principle. Could it be the jury is out until someone says screw it, and bases the entire OS of their new device on SVG, alone, and not much else?
debaserab2 13y ago
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.
peeters 13y ago
It always seemed to me that the benefits of icon fonts would be fleeting. Their popularity has been directly correlated with monochromatic icons being "in-style". Eventually such fonts will inevitably fall out of style. When that happens, will we be left with a useless ecosystem surrounding a fundamentally inflexible core? Or will font rendering engines have evolved to adapt?
- criswell 13y ago
  I yearn for a day when fonts look the same across every OS/Browser/Device.
  - aaronem 13y ago
    I have a strong feeling that you're going to be yearning for a long, long time.
- pyre 13y ago
  > When that happens, will we be left with a useless ecosystem surrounding a fundamentally inflexible core I'm not sure what you're referring to here. Bootstrap's use of font icons? If font icons ever became an issue, they could easily[1] swapped out of such frameworks. Also note that font icons are also useful in places that can only display text, but allow for changes in fonts. You can see people make use of such icons for things like (e.g.) displaying the weather in xmobar or dzen. [1] Might be a bunch of work on the back-end, but I don't see how the interface would change all that much. You get the icons now by just applying a class to an element, just the behind-the-scenes CSS would have to change.
- justinph 13y ago
  Not to be pedantic, but letterforms are fundamentally chain-able icons and those have been around since written language. More contemporarily, other marks/icons we now would think of as standard are really icons for language control or words themselves. Typographers have been using monochromatic marks and glyphs since the dawn of the printing press. So, not a flash in the pan.
gisenberg 13y ago
SVG rendering performance leaves a bit to be desired: http://codepen.io/adrianosmond/pen/LCogn http://codepen.io/adrianosmond/pen/LCogn
- acdha 13y ago
  That's a fairly extreme outlier, though – other than font/icon preview pages, how many sites want to display hundreds of different icons in rapid succession?
  - gisenberg 13y ago
    In my experience, you can see noticeable performance losses pretty quickly on mobile devices in as few as 9 on-screen icons, especially in cases of animated elements. edit: caveat for animated elements.
    - acdha 13y ago
      That fits with what the Sencha team reported for iOS 7 - big wins for static SVG but bigger losses for animation: http://www.sencha.com/blog/the-html5-scorecard-the-good-the-bad-and-the-ugly-in-ios7/ http://www.sencha.com/blog/the-html5-scorecard-the-good-the-...
  - fit2rule 13y ago
    Look at it this way, everywhere on your screen you see repetition is an opportunity for a new, simple symbol that can be represented with fundamental glyphs.
- fit2rule 13y ago
  SVG rendering should properly be paired with proper use of the dejeur hardware accelerations of choice, and for that I'm personally finding various fringes of the MOAI community of much interest, as it puts SVG into a fabulous playground.
- epmatsw 13y ago
  Interesting. In FF29, there's no perceptible difference.
barrkel 13y ago
I disable third-party fonts primarily because of the poor choices of "designers" out there, but also in case they become an attack vector. As a result, I need to use a combination of guesswork, tooltips and URLs on the status bar when navigating some of the more fashionable sites. Strong vote in favour of SVG from me.
- Smudge 13y ago
  I'm curious. How could web fonts become an attack vector?
  - randallu 13y ago
    They have a lot of tables which are (depending on the browser) interpreted by OS functions, so if there was a buffer overflow bug in the OS font code then you could exploit it with a webfont. Most (all? Not sure about Safari) use the "OpenType Sanitizer" on all webfonts, which parses and validates all of the tables and all of the offsets contained within them. http://code.google.com/p/ots http://code.google.com/p/ots
    - pyre 13y ago
      Is this really any more of a risk than the code that parses and renders the SVG? Or the PNG for that matter (there have been issues with image libraries in the past)?
      - fit2rule 13y ago
        There is some weight in the argument. It goes like this: a) font-file, indexed set of glpyhs. A glyph is any set of line primitives that is associated with the symbol. We load the file of 'sub-routines to draw', and index it .. stupidly .. with some font_glyph_array[]. Which we then index, according to keycode-translation-{NSA-insert}-pipeline. ahem b) SVG. SVG is 'pure math', in that the glyphs and bitmaps aren't there, but rather the CPU is going to be asked to calculate things. For this reason, 'most SVG rendering libs are crap' is true, because SVG is intended to be turned into whatever is useful for your CPU, before then being re-rendered for the next frame. Of course this takes a lot of time .. but at least it prevents buffer sploits. Hmm. What I like about SVG is that for every id="" there is to be found, there could be a unique 'identifier' to the application, at the user level, that abstracts the <g>. So, if I want a 'button', I just wrap everything up in <g id="button">, and off we go. Of course, ymmv, and probably I'm not trawling the DOM per-frame, like you're supposed to, but hey: its a button that can be immediately Cut-/_Pasted by the designer, and I don't have to think about it. So SVG serves the purpose of every graphics file-format, ever, which is to stop the Designer and the Programmer from actually having to talk to each other.
orthecreedence 13y ago
How about switching the font on the blog too? It's barely legible.
quarterto 13y ago
Sidenote: Chrome Canary and Beta were hit with a fairly horrible font bug recently. If you haven't yet noticed the bug, fonts have been unloading and reverting to a system font after the page has experienced a period of inactivity. Holy shit, I just assumed it was something borked in my setup (especially since I've been messing with fonts and font paths a lot recently).
- alptrv 13y ago
  Yeah, I have this issue too, though I'm using stable Chrome, I thought that if this is a bug it must be already reported, the funny thing is that I tried to google it and all I got was some articles about web-fonts and icon fonts rendering problems.
- crazygringo 13y ago
  Yup, not just canary/beta -- my up-to-date 31.0.1650.63 on OSX has had it for at least a couple of weeks now. It's actually the most obvious browser bug I think I've seen in years, and seems to particularly affect Wikipedia.
  - jackweirdy 13y ago
    I just flicked away from this page to wikipedia and noticed exactly what you described on the same version of Chrome. Weird!
- whyme 13y ago
  Yeah, I notice this using the light table IDE all the time. Didn't know it was a chrome thing till now.
- lambda 13y ago
  Yep, that's one that I've been seeing for a while, but never quite got around to filing a bug report, since it was a bit hard to characterize, and for some reason I got a blank screen when I tried to do a screen recording of it. Mostly hit Wikipedia, but occasionally saw it in other places too.
- VMG 13y ago
iconfinder 13y ago
Icon fonts have always been kind of a hack. SVG is the right formats for many reason - the primary reason: it's XML. We just need better browser support.
aaronem 13y ago
An excellent article. I've never been really fond of icon fonts, but they've appeared to have some pretty compelling advantages not easily obtainable otherwise; I'm glad to see such a well-reasoned article describe a means of replacing them which has most of the same advantages and what looks to be a considerably narrower range of drawbacks.
smackfu 13y ago
>We use a custom font on lonelyplanet.com... Does anyone know why exactly the font they are using on Lonely Planet looks so terrible in Windows Chrome? Is this because it's not hinted? Screenshot: http://i.imgur.com/8W40ns4.png http://i.imgur.com/8W40ns4.png vs. Safari on OS X: http://i.imgur.com/Gk9Bfg2.png http://i.imgur.com/Gk9Bfg2.png Edit: Ah, this blog post discusses it: http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/ http://www.dev-metal.com/fix-ugly-font-rendering-google-chro... I'm surprised people don't consider this a dealbreaker, considering the market share of Windows Chrome nowadays.
- tdj 13y ago
  It's a horrible thing indeed, especially when trying to use a print-optimized font. Luckily the canary version uses the fancy Windows font rendering pipeline so it's merely a matter of time. We ended up applying a text shadow of 0.15px to smooth out the eaten-by-mice effect. It's a bit softer, but a good compromise. Fonts with good hinting seem to work better.
- badman_ting 13y ago
  Yes, I was just dealing with this for my job. Windows Chrome renders web fonts very jankily, even the fonts provided by Google Fonts! (Fittingly, the current "solution" involves serving an SVG version of the web font to Chrome, instead of WOFF or whatever.)
pornel 13y ago
I often see font icons that are done poorly. It's not a problem with the concept, but implementation: * Irrelevant/meaningless characters used without textual label, which is total crap from accessibility perspective. * Icons littering text copied to clipboard. * Awful loading performance. Browsers optimize image loading very well: preload scanner, async loading, fetch priority, multithreaded decoding, but custom fonts almost always only start downloading after CSS is fetched, parsed and applied to the document (in order to avoid loading unused fonts), which delays loading by a network roundtrip + CSS processing time and either delays rendering or causes extra reflows. I hate seeing 99%-loaded websites with hidden text so much that I've completely disabled support for Web Fonts in my mobile browser. That's a huge improvement overall, but makes font icons a collateral damage.
51Cards 13y ago
Is it just me or is the OP's page font very difficult to read? On my system it seems low contrast and blurry, almost out of focus. I had to abandon reading the post by the 3rd paragraph, ironically because my eyes couldn't handle the font choice.
- bane 13y ago
  It's fine. On my screen (Windows 7, latest Chrome) it's a readable serif font with decent contrast. Text is sharp, though I personally don't favor serif fonts for main text. I always wonder at all these HN comments about impossible to read sites, is it the computer, the software, the display or the thing that sits between the keyboard and the chair?
  - 51Cards 13y ago
    Win 7 here, Latest FireFox, LCD monitor at 1680x1050. Just looks blurry to me, but by comparison reading HN (or dozens of other sites today) hasn't been an issue.. nice and sharp. Don't think it's a case of PEBKAC... but maybe. :) This is what I see pixel scaled 200%: http://i.imgur.com/62y2Gye.png http://i.imgur.com/62y2Gye.png
    - bane 13y ago
      Wow that looks terrible. Here's mine at 200% http://i.imgur.com/602XxWY.jpg http://i.imgur.com/602XxWY.jpg Better question, how does one test for this kind of thing?
- airencracken 13y ago
  It isn't just you. It's hard as hell to read. Blurry and it seems stilted in several ways, as if alignment is off.
  - fdavison 13y ago
    Same here. Tried latest FF, Chrome and IE and all looked blurry. Win 8.1 with a 1080p monitor.
csense 13y ago
Please, please kill icon fonts. Redefining special font characters for graphics is just asking for all kinds of cross-platform browser compatibility trouble.
smoser 13y ago
I don't know if this is related to blog post but the 'Sign in' button just showed 'Si' until I hovered over it. I'm using the latest Safari.
mrottenkolber 13y ago
Thank you. I think icon fonts are the worst web-trend since a while. (Because I disable external fonts for readability.)
ahoge 13y ago
> As we were just duplicating the same icon multiple times within the same file, it compressed down to the size of just one icon SVG allows you to create clones with the `use` element. Any style which wasn't set by the original can be set by the clone. E.g. if you don't set `fill`, the original will be filled with black and the clones can be filled with some other color.
- ianfeather 13y ago
  Does this work when you reference svgs within css though? Or do you need to have access to the svg nodes?
  - ahoge 13y ago
    You do that inside the SVG. Instead of having a yet another path or a group of paths, you just have that `use` element (which just references some other node). Basically, it lets you reuse something, but you can transform it and set some styles. http://kaioa.com/svg/chemicalzen3.svg http://kaioa.com/svg/chemicalzen3.svg http://kaioa.com/svg/chemicalzen3_parts.png http://kaioa.com/svg/chemicalzen3_parts.png The "master" shape is used to create the outline and it's also used to clip the "interior" layer. http://kaioa.com/svg/armyofclonesani.svgz http://kaioa.com/svg/armyofclonesani.svgz There is just one dude. Then there is a row of clones. And then there are transformed clones of that row. Only the original dude is animated. Edit: A big benefit of clones is that they are always in sync. If you change the shape of the original, the clones follow suit.
    - ianfeather 13y ago
      That's awesome. Very very cool. Will look into it, thanks!
  - car 13y ago
    You can reference SVG documents or elements within those in HTML. More here: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/x... Here an example, where a whole svg document is linked to from another svg element (scaled with viewBox): <div> <svg viewBox="0 0 500 500" width="200" height="75"> <g> <use xlink:href="#BaseQuality-svg"></use> </g> </svg> </div>
wernah 13y ago
Just throwing it out there: are paint times effected by the implementation of svg's? I don't remember exactly but I do recall a situation where svg was causing jankiness. Probably not wholly responsible, but I want to know if anyone else ran into this.
ZeroGravitas 13y ago
I noticed one of the icons he refers to was a tick/check mark. But those are present in Unicode: http://en.wikipedia.org/wiki/Tick_%28checkmark%29#Unicode http://en.wikipedia.org/wiki/Tick_%28checkmark%29#Unicode Does that make it an exception compared with say, the icon for facebook?

145 points by kaishiro 13y ago

> We consider a small subset of our icons to be critical to the user's experience but we don’t think that way about our font or the other icons. Why don't you consider your font to be critical? In my experience, with Safari, if you use a custom font, text won't render at all until the font has loaded.

ianfeather 13y ago
We consider the system font critical, and we render the page with that because it it will load instantly. The custom font is then loaded after the content and used on the following page. Note: this setup is only used sparingly on our site as it has been waiting for this piece of work to be completed.
- eridius 13y ago
  Curious, the first time I read your post, I saw exactly what I described, which is all text was missing for a second, and then appeared in the custom font. But when I try now, I get the system font for a second, then it switches over to the custom font.

kaishiro 13y ago

As an aside from the post's content, I really dig the use of counter arguments directly within the article. Not sure if this is a thing or not, but I'm going to start using it.

ctrl 13y ago
True strike, it should be a trend.

ward 13y ago

As someone who does not allow his font choice to be overriden, yes please. Fonts shouldn't be used as icons, it has felt wrong to me since wingdings. Document Font Toggle ( https://addons.mozilla.org/en-US/firefox/addon/document-font-toggle/ https://addons.mozilla.org/en-US/firefox/addon/document-font... ) helps for the few sites I use frequently enough that do this, but I still don't like the inconsistency in looks it gives across websites then.

fit2rule 13y ago
>Fonts shouldn't be used as icons The problem is that fonts are icons, in that they are arbitrary collections of curves, shapes, and symbols, which communicate meaning only to the end-user, and are highly dependent on the end-users understanding of what the thing is that they are clicking, will do. An icon, a font symbol, a glpyh, a ligature - these are all mere lines in the sand. You want to make another file-format with that, kid?
- ronaldx 13y ago
  You can use whatever curve, shape and symbol you like, but the unicode U+0079 should essentially represent the letter 'y' (rather than 'umbrella'): that's precisely the point of it. If I don't get your symbol, I should be able to revert to a font that I do get.
  - fit2rule 13y ago
    Symbols are random things that mean nothing until someone says it. If you and I agree that U+0079 is 'y', then so be it. But lets use the other namespaces of the index, too .. and in that regard .ttf has much to offer the aspiring user of the format. Problem is, a shallow look at it, of course, renders the conclusion that it is an investment; but if I know for sure my glyphs render the same way for grandma, no matter if she's using it on some grungy screen, somewhere, then I'm okay with letting the heart-beat monitor screen be composed mostly of cache-able sub-functions derived from somewhere_safe.ttf. On the other hand, using SVG to pre-load values, then modifying the decomposed stack, somewhere appropriate, in order to attain sustainable realtime SVG rendering performance .. seems as if its a matter of principle. Could it be the jury is out until someone says screw it, and bases the entire OS of their new device on SVG, alone, and not much else?

debaserab2 13y ago

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.

peeters 13y ago

It always seemed to me that the benefits of icon fonts would be fleeting. Their popularity has been directly correlated with monochromatic icons being "in-style". Eventually such fonts will inevitably fall out of style. When that happens, will we be left with a useless ecosystem surrounding a fundamentally inflexible core? Or will font rendering engines have evolved to adapt?

criswell 13y ago
I yearn for a day when fonts look the same across every OS/Browser/Device.
- aaronem 13y ago
  I have a strong feeling that you're going to be yearning for a long, long time.
pyre 13y ago
> When that happens, will we be left with a useless ecosystem surrounding a fundamentally inflexible core I'm not sure what you're referring to here. Bootstrap's use of font icons? If font icons ever became an issue, they could easily[1] swapped out of such frameworks. Also note that font icons are also useful in places that can only display text, but allow for changes in fonts. You can see people make use of such icons for things like (e.g.) displaying the weather in xmobar or dzen. [1] Might be a bunch of work on the back-end, but I don't see how the interface would change all that much. You get the icons now by just applying a class to an element, just the behind-the-scenes CSS would have to change.
justinph 13y ago
Not to be pedantic, but letterforms are fundamentally chain-able icons and those have been around since written language. More contemporarily, other marks/icons we now would think of as standard are really icons for language control or words themselves. Typographers have been using monochromatic marks and glyphs since the dawn of the printing press. So, not a flash in the pan.

gisenberg 13y ago

SVG rendering performance leaves a bit to be desired: http://codepen.io/adrianosmond/pen/LCogn http://codepen.io/adrianosmond/pen/LCogn

acdha 13y ago
That's a fairly extreme outlier, though – other than font/icon preview pages, how many sites want to display hundreds of different icons in rapid succession?
- gisenberg 13y ago
  In my experience, you can see noticeable performance losses pretty quickly on mobile devices in as few as 9 on-screen icons, especially in cases of animated elements. edit: caveat for animated elements.
  - acdha 13y ago
    That fits with what the Sencha team reported for iOS 7 - big wins for static SVG but bigger losses for animation: http://www.sencha.com/blog/the-html5-scorecard-the-good-the-bad-and-the-ugly-in-ios7/ http://www.sencha.com/blog/the-html5-scorecard-the-good-the-...
- fit2rule 13y ago
  Look at it this way, everywhere on your screen you see repetition is an opportunity for a new, simple symbol that can be represented with fundamental glyphs.
fit2rule 13y ago
SVG rendering should properly be paired with proper use of the dejeur hardware accelerations of choice, and for that I'm personally finding various fringes of the MOAI community of much interest, as it puts SVG into a fabulous playground.
epmatsw 13y ago
Interesting. In FF29, there's no perceptible difference.

barrkel 13y ago

I disable third-party fonts primarily because of the poor choices of "designers" out there, but also in case they become an attack vector. As a result, I need to use a combination of guesswork, tooltips and URLs on the status bar when navigating some of the more fashionable sites. Strong vote in favour of SVG from me.

Smudge 13y ago
I'm curious. How could web fonts become an attack vector?
- randallu 13y ago
  They have a lot of tables which are (depending on the browser) interpreted by OS functions, so if there was a buffer overflow bug in the OS font code then you could exploit it with a webfont. Most (all? Not sure about Safari) use the "OpenType Sanitizer" on all webfonts, which parses and validates all of the tables and all of the offsets contained within them. http://code.google.com/p/ots http://code.google.com/p/ots
  - pyre 13y ago
    Is this really any more of a risk than the code that parses and renders the SVG? Or the PNG for that matter (there have been issues with image libraries in the past)?
    - fit2rule 13y ago
      There is some weight in the argument. It goes like this: a) font-file, indexed set of glpyhs. A glyph is any set of line primitives that is associated with the symbol. We load the file of 'sub-routines to draw', and index it .. stupidly .. with some font_glyph_array[]. Which we then index, according to keycode-translation-{NSA-insert}-pipeline. ahem b) SVG. SVG is 'pure math', in that the glyphs and bitmaps aren't there, but rather the CPU is going to be asked to calculate things. For this reason, 'most SVG rendering libs are crap' is true, because SVG is intended to be turned into whatever is useful for your CPU, before then being re-rendered for the next frame. Of course this takes a lot of time .. but at least it prevents buffer sploits. Hmm. What I like about SVG is that for every id="" there is to be found, there could be a unique 'identifier' to the application, at the user level, that abstracts the <g>. So, if I want a 'button', I just wrap everything up in <g id="button">, and off we go. Of course, ymmv, and probably I'm not trawling the DOM per-frame, like you're supposed to, but hey: its a button that can be immediately Cut-/_Pasted by the designer, and I don't have to think about it. So SVG serves the purpose of every graphics file-format, ever, which is to stop the Designer and the Programmer from actually having to talk to each other.

orthecreedence 13y ago

How about switching the font on the blog too? It's barely legible.

quarterto 13y ago

Sidenote: Chrome Canary and Beta were hit with a fairly horrible font bug recently. If you haven't yet noticed the bug, fonts have been unloading and reverting to a system font after the page has experienced a period of inactivity. Holy shit, I just assumed it was something borked in my setup (especially since I've been messing with fonts and font paths a lot recently).

alptrv 13y ago
Yeah, I have this issue too, though I'm using stable Chrome, I thought that if this is a bug it must be already reported, the funny thing is that I tried to google it and all I got was some articles about web-fonts and icon fonts rendering problems.
crazygringo 13y ago
Yup, not just canary/beta -- my up-to-date 31.0.1650.63 on OSX has had it for at least a couple of weeks now. It's actually the most obvious browser bug I think I've seen in years, and seems to particularly affect Wikipedia.
- jackweirdy 13y ago
  I just flicked away from this page to wikipedia and noticed exactly what you described on the same version of Chrome. Weird!
whyme 13y ago
Yeah, I notice this using the light table IDE all the time. Didn't know it was a chrome thing till now.
lambda 13y ago
Yep, that's one that I've been seeing for a while, but never quite got around to filing a bug report, since it was a bit hard to characterize, and for some reason I got a blank screen when I tried to do a screen recording of it. Mostly hit Wikipedia, but occasionally saw it in other places too.
VMG 13y ago

iconfinder 13y ago

Icon fonts have always been kind of a hack. SVG is the right formats for many reason - the primary reason: it's XML. We just need better browser support.

aaronem 13y ago

An excellent article. I've never been really fond of icon fonts, but they've appeared to have some pretty compelling advantages not easily obtainable otherwise; I'm glad to see such a well-reasoned article describe a means of replacing them which has most of the same advantages and what looks to be a considerably narrower range of drawbacks.

smackfu 13y ago

>We use a custom font on lonelyplanet.com... Does anyone know why exactly the font they are using on Lonely Planet looks so terrible in Windows Chrome? Is this because it's not hinted? Screenshot: http://i.imgur.com/8W40ns4.png http://i.imgur.com/8W40ns4.png vs. Safari on OS X: http://i.imgur.com/Gk9Bfg2.png http://i.imgur.com/Gk9Bfg2.png Edit: Ah, this blog post discusses it: http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/ http://www.dev-metal.com/fix-ugly-font-rendering-google-chro... I'm surprised people don't consider this a dealbreaker, considering the market share of Windows Chrome nowadays.

tdj 13y ago
It's a horrible thing indeed, especially when trying to use a print-optimized font. Luckily the canary version uses the fancy Windows font rendering pipeline so it's merely a matter of time. We ended up applying a text shadow of 0.15px to smooth out the eaten-by-mice effect. It's a bit softer, but a good compromise. Fonts with good hinting seem to work better.
badman_ting 13y ago
Yes, I was just dealing with this for my job. Windows Chrome renders web fonts very jankily, even the fonts provided by Google Fonts! (Fittingly, the current "solution" involves serving an SVG version of the web font to Chrome, instead of WOFF or whatever.)

pornel 13y ago

I often see font icons that are done poorly. It's not a problem with the concept, but implementation: * Irrelevant/meaningless characters used without textual label, which is total crap from accessibility perspective. * Icons littering text copied to clipboard. * Awful loading performance. Browsers optimize image loading very well: preload scanner, async loading, fetch priority, multithreaded decoding, but custom fonts almost always only start downloading after CSS is fetched, parsed and applied to the document (in order to avoid loading unused fonts), which delays loading by a network roundtrip + CSS processing time and either delays rendering or causes extra reflows. I hate seeing 99%-loaded websites with hidden text so much that I've completely disabled support for Web Fonts in my mobile browser. That's a huge improvement overall, but makes font icons a collateral damage.

51Cards 13y ago

Is it just me or is the OP's page font very difficult to read? On my system it seems low contrast and blurry, almost out of focus. I had to abandon reading the post by the 3rd paragraph, ironically because my eyes couldn't handle the font choice.

bane 13y ago
It's fine. On my screen (Windows 7, latest Chrome) it's a readable serif font with decent contrast. Text is sharp, though I personally don't favor serif fonts for main text. I always wonder at all these HN comments about impossible to read sites, is it the computer, the software, the display or the thing that sits between the keyboard and the chair?
- 51Cards 13y ago
  Win 7 here, Latest FireFox, LCD monitor at 1680x1050. Just looks blurry to me, but by comparison reading HN (or dozens of other sites today) hasn't been an issue.. nice and sharp. Don't think it's a case of PEBKAC... but maybe. :) This is what I see pixel scaled 200%: http://i.imgur.com/62y2Gye.png http://i.imgur.com/62y2Gye.png
  - bane 13y ago
    Wow that looks terrible. Here's mine at 200% http://i.imgur.com/602XxWY.jpg http://i.imgur.com/602XxWY.jpg Better question, how does one test for this kind of thing?
airencracken 13y ago
It isn't just you. It's hard as hell to read. Blurry and it seems stilted in several ways, as if alignment is off.
- fdavison 13y ago
  Same here. Tried latest FF, Chrome and IE and all looked blurry. Win 8.1 with a 1080p monitor.

csense 13y ago

Please, please kill icon fonts. Redefining special font characters for graphics is just asking for all kinds of cross-platform browser compatibility trouble.

smoser 13y ago

I don't know if this is related to blog post but the 'Sign in' button just showed 'Si' until I hovered over it. I'm using the latest Safari.

mrottenkolber 13y ago

Thank you. I think icon fonts are the worst web-trend since a while. (Because I disable external fonts for readability.)

ahoge 13y ago

> As we were just duplicating the same icon multiple times within the same file, it compressed down to the size of just one icon SVG allows you to create clones with the `use` element. Any style which wasn't set by the original can be set by the clone. E.g. if you don't set `fill`, the original will be filled with black and the clones can be filled with some other color.

ianfeather 13y ago
Does this work when you reference svgs within css though? Or do you need to have access to the svg nodes?
- ahoge 13y ago
  You do that inside the SVG. Instead of having a yet another path or a group of paths, you just have that `use` element (which just references some other node). Basically, it lets you reuse something, but you can transform it and set some styles. http://kaioa.com/svg/chemicalzen3.svg http://kaioa.com/svg/chemicalzen3.svg http://kaioa.com/svg/chemicalzen3_parts.png http://kaioa.com/svg/chemicalzen3_parts.png The "master" shape is used to create the outline and it's also used to clip the "interior" layer. http://kaioa.com/svg/armyofclonesani.svgz http://kaioa.com/svg/armyofclonesani.svgz There is just one dude. Then there is a row of clones. And then there are transformed clones of that row. Only the original dude is animated. Edit: A big benefit of clones is that they are always in sync. If you change the shape of the original, the clones follow suit.
  - ianfeather 13y ago
    That's awesome. Very very cool. Will look into it, thanks!
- car 13y ago
  You can reference SVG documents or elements within those in HTML. More here: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/x... Here an example, where a whole svg document is linked to from another svg element (scaled with viewBox): <div> <svg viewBox="0 0 500 500" width="200" height="75"> <g> <use xlink:href="#BaseQuality-svg"></use> </g> </svg> </div>

wernah 13y ago

Just throwing it out there: are paint times effected by the implementation of svg's? I don't remember exactly but I do recall a situation where svg was causing jankiness. Probably not wholly responsible, but I want to know if anyone else ran into this.

ZeroGravitas 13y ago

I noticed one of the icons he refers to was a tick/check mark. But those are present in Unicode: http://en.wikipedia.org/wiki/Tick_%28checkmark%29#Unicode http://en.wikipedia.org/wiki/Tick_%28checkmark%29#Unicode Does that make it an exception compared with say, the icon for facebook?