

Trello uses an icon font and so can you - mxk
http://blog.fogcreek.com/trello-uses-an-icon-font-and-so-can-you/

======
latitude
I just went through a process of @font-facing a website for one of my projects
and I have several things to add:

1\. Don't bother with direct font editing. Instead use a vector editor like
Inkscape [1] to save your icons as SVG and then convert them to a complete
font-face kit with IcoMoon [2].

2\. IcoMoon will also let you cherry pick icons from a large number of both
free and commercial icon packs. This is a great starting point, especially at
the sketching phase.

3\. A better way to _browse_ icon packs though is with Fontello [3]. Same
packs, snappier interface.

4\. FontSquirrel font-kit generator is really good, because it does a great
job (re-)hinting TTFs so that they come out looking better in smaller sizes
(10-14px)

    
    
      -- but --
    

There are fonts that FontSquirrel generator doesn't process correctly. It
would happily spit out an @font-face kit, which will look normal most of the
time. However on selected Windows boxes the font will render _without_ anti-
aliasing, naturally making it look like butt. It doesn't appear to depend on
the Windows version (saw it happen on XP and W7) nor the browser (saw it on IE
and Firefox). Also, same machines will render all other font-face kits just
fine. I spent a couple of days chasing the cause, but then gave up because I
found a simple workaround.

The workaround is to serve OTFs. Instead of specifying .eot, .woff, .ttd, .svg
in your CSS, list .eot, _.otf_ , .woff, .ttf, .svg. OpenType files are
generally heavier, but they also compress better, so it's a wash in terms of a
I/O hit if served over gzip'd HTTP.

In other words -

    
    
      +----------------------------+
      | Make sure to test the hell |
      | out of your font-face kits |
      +----------------------------+
    

To that effect, Adobe Browser Lab [4] includes a version of Firefox that
exhibits above behavior. _However_ , the Lab also includes a version of Chrome
that pixelates _all_ fonts, because it appears to run on a machine with anti-
aliasing disabled at the OS level (yes, it doesn't make any sense, must be
some sort of an inside Adobe joke).

So, the testing strategy is to get a proven font-face kit, like Open Sans, and
check that both your font and this litmus font render well. If both look
aliased, then it's the OS issue. If only yours does, then it's a problem with
the font-face kit.

[1] <http://inkscape.org>

[2] <http://icomoon.io>

[3] <http://fontello.com>

[4] <https://browserlab.adobe.com>

~~~
bobbygrace
Awesome. This approach can definitely work for lots of people. We default to
WOFF because it's essentially just a slightly more compressed OTF file, it's
something all browser venders seem to agree on, and it just seems like The
Right Thing To Do for the web. We serve raw TTF files for the stock Android
Browser. I had so much trouble hinting the raw OTF font for Chrome on Windows
that I gave up and used SVG. As I mentioned in the article, SVG fonts don't
get mangled by the browser's font rendering engine or ClearType.

Also, I never had any problems with FontSquirrel.

~~~
latitude
WOFF is a result of font foundries and online font services pressuring W3C to
produce a browser-only font format. Something that cannot be save-as'd and
dragged into the C:\Windows\Fonts. It is indeed somewhat optimized for the web
use, but that wasn't the primary design goal behind it.

> _I never had any problems with FontSquirrel._

Neither have I. Until 4 days ago :)

~~~
bobbygrace
Ah, well copy protection is definitely not a concern for us, since we serve
the raw TTF alongside the other formats. The fact that the WOFF file was about
30% smaller than the TTF was more of a deciding factor.

------
taylorfausak
I'm a huge fan of icon fonts, but I have a nit to pick with the HTML they
chose.

    
    
        <span class="icon-sm icon-org"/>
    

That is not valid HTML. The <span> element is not a self-closing tag, so the
slash is essentially ignored [1]. Fog Creek's blog is XHTML, so the tag makes
sense there, but Trello is HTML5.

[1]: [http://dev.w3.org/html5/spec-author-
view/syntax.html#syntax-...](http://dev.w3.org/html5/spec-author-
view/syntax.html#syntax-start-tag)

~~~
bobbygrace
It's true that self-closing, non-void elements are not valid. With gzip, it's
probably not even worth the savings in size. I know it's bad and we shouldn't
do it and it will probably blow up in our face one day, but it doesn't seem to
matter in practice and I just like the way it looks.

~~~
OGC
Somewhat related, i'd really like to see if all this minimizing actually has a
notable effect. It strikes me as over-optimising, I mean, i see it all the
time, but never _why_.

~~~
toast0
Save a couple of bytes here and there, and you may save a whole packet; saving
a packet when your packet count is small can make a big difference in download
times, since TCP slow start means lots of round trips in the beginning of a
connection. Also, less data transfered is good for people with data caps, and
lets your server do less work. That said, you'll probably get more out of
making sure your images are optimized, and apparently changing from sprites to
fonts (if your target audience supports it).

------
joshstrange
We use icon fonts on my current side project and it is wonderful to work with.
We use font awesome (<http://fortawesome.github.com/Font-Awesome/>) which
works well with (or without) twitter bootstrap.

It had greatly improved our UI and sped up development.

~~~
minimaxir
As another example of Font-Awesome in production: I've incorporated Font-
Awesome _very_ heavily on my own blog, and it works very well:
<http://minimaxir.com>

~~~
angry-hacker
And have you seen how ugly it looks with Chrome on Windows 7? Which should be
the most popular browser + most popular OS. So I disagree with you and the
blog author you should use fonts as icons.

They look ugly with Chrome + if fonts are not supported they don't show
anything. At least if the image is missing you see X.

~~~
WickyNilliams
It doesn't look great that's for sure, but you can still tell what the icons
are i.e. it's good enough.

If you're designing things such that a missing icon causes the UI to be
incomprehensible, you're probably designing it badly

------
J_Darnley
What happens when I force my browser to use font "X"? Answer: I won't get to
see your fancy trick, use an image!

~~~
TazeTSchnitzel
What happens when I browse in Opera Mini, which uses the same font for
everything?

Answer: I see nothing, meaningless letters or blocks, use an image!

------
peeters
Isn't there a massive unspoken constraint: you can only have monochrome icons?
The sprite they show is impossible to reproduce: look at the "locked" icon,
e.g.

It's great now that minimalistic design is in style, but in a year when that
fad has passed and my designer wants color again, I'm going to have to
completely rewrite my infrastructure back away from using icon fonts.

------
nirvanatikku
Nice write-up. As a developer who has a keen design eye, but prefers not to
actually deal with Photoshop (particularly icons!), this approach has been a
huge relief for me.

I know there are many out there, but if anyone is looking for a nice font-
pack, I use pictos (<http://pictos.cc/font/>). That said, it's $50.

------
Andrex
I'm using the Batch icon font[1] in a prototype web app right now and it's
literally the best thing to happen to my workflow in years.

No redoing the icons in Photoshop or Gimp to get them in a different color, or
shadow, or emboss, or _size._

No messing with background position and constantly updating your sprite file,
being careful not to place anything in the wrong place.

Just... data-icon="&#whatever;" It's incredibly beautiful and useful and I
know it's going to be hard to go back whenever I end up having to.

[1] <http://adamwhitcroft.com/batch/>

------
Aissen
Now that got me thinking. Fonts are basically a vector format. But with one
thing added: hinting, that allows beautiful rendering at low resolutions. Why
is there no support for hinting in SVG ? I hear media queries are coming, will
they solve this problem ?

~~~
jahewson
Fonts have dosens of things added: Unicode to glyph mapping, horizontal
writing metrics, vertical writing metrics, kerning, hinting, bitmap fallbacks
for small sizes, metadata for aligning baselines and justification, grid-
fitting and scan-conversion data, glyph substitutions (e.g. ligatures, old
style numbers, contextual, chained), glyph positioning (e.g. diacritics,
Arabic diagonal baseline, contextual positioning).

Hinting is probably the most complex feature. TrueType implements hinting as
special instructions in an impressively complex stack-based drawing language.
SVG fonts are already bloated, and adding hinting may have been a step too
far, or perhaps it was because at the time some of TrueType's hinting
instructions were patented.

------
Poiesis
What are the benefits of using an icon font compared to just using svg icons?
As far as I can tell, the only thing that a font can do better is get served
in a single http request. I'd love to know what other differences are.

------
atesti
Does Trello support IE8 now? Or why do they have special code for that?

~~~
bobbygrace
Trello does not support IE8. That line is not in production. I just wanted to
show you how to add support if you needed it.

------
pla3rhat3r
©∞∫¡

------
mmhd
I'm not entirely sold on icon fonts. They look good at large sizes, but as
they get smaller they become blurry. I'll stick to creating pixel perfect
icons at different sizes.

~~~
gavinballard
I'll agree that the sort of pixel perfection you're after at smaller sizes
isn't quite there yet (although well-hinted icon fonts are getting pretty
close).

However, I think the advantages of icon fonts (packaged as a single file,
automatically scalable, automatically retina-ready, colour-adaptive) are
pretty compelling.

