TwitterPictos is an interesting concept in web icons, which has been released by Drew Wilson.
Instead of the traditional method of using images to display icons on web pages, Pictos uses a font, in the style of Dinbats or Webdings, which can be implemented using @font-face.
It’s an interesting concept. The main advantages appear to be improved speed and better scalability (the icons will scale just like any font). But there are some serious accessibility flaws. Since the font characters appear to be mapped to the standard alphabet (i.e. the “refresh” icon is mapped to the letter “C”), using this technique is a horrendous headache for anyone using a screen reader, and will be very bad for your SEO. One of the examples shows an example using CSS :before selector to prepend an icon to content, which kind of gets around those problems, but still feels a bit clunky to me: the whole HTML/CSS stack seems to be broken.
A good effort, but I’m not sure this technique is ready for the mainstream.
UPDATE: The guys at Filament Group have done some casual testing of the accessibility of this technique with a range of proposed solutions. Sadly, the results aren’t promising – even the “:before” technique breaks things. My gut feeling is that this still isn’t a particularly graceful technique, and the only viable fix is to map the Pictos “alphabet” to appropriate unicode characters. But, even then, the implementation would be tricky for anyone who lacks a rudimentary grasp of unicode.
UPDATE 2: Looks like the very talented Jon Tangerine has come to similar conclusions: the only way this can really work is by mapping the icons in the font to sensible Unicode code points. But identifies still more problems with the technique, even if the semantics discrepancies were dealt with: more accessibility gripes, the reliance on @font-face support and the difficulties of a graceful fallback.
Drew suggests you can kind-of wrangle the markup into something sort-of semantic. However, it starts to fall down fast. For example, a check mark (tick) is mapped to ‘3’. There’s nothing semantic about that. Clever replacement techniques just hide the evidence. It’s a hack. There’s nothing wrong with a hack here and there (as box model veterans well know) but the ends have to justify the means.
Jon explains things far more eloquently than I can, so I suggest you read his balanced and reasoned post.
Aug 18, 2010 @ 13:22:47
I agree.
This is the typical backward thinking of font fanciers.
It’s amazing that such a 56k solution could be suggested in an age where internet speeds are getting faster and faster.
I don’t even both looking at ‘save to web’ on photoshop any more, no on even notices.