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.

Adobe and Typekit are teaming up to bring some of the world’s most popular, recognizable, and respected fonts to the web. Starting today, you’ll be able to use classics like Adobe Garamond, News Gothic, Myriad, and Minion plus many more on your website — all of them newly optimized and hinted for the screen.

Although there are only twenty-six fonts being added to the collection, they include some of the most popular and elegant fonts in use today. The fact that Adobe have taken the effort to ensure they are properly hinted for screen use is another bonus:

We’ve been using these fonts internally here at Typekit for a few weeks and the quality is simply amazing. These are the original cuts of the celebrated typefaces you’ve been waiting for, not reproductions or knockoffs of their designs. That means you can use them with the assurance that your creative work is being presented with all the accuracy and technical detail the print world has known for decades.

I’ve been watching the evolution of Typekit for a while now, but haven’t used it in any production work yet. This may just be the tipping point where many people take a second, serious look at Typekit as a viable tool for bringing elegant typography to their web designs – $49 per year is a pretty good deal, particularly when you compare the cost of the average font license.

That happened this morning when I was thinking about organising fonts (I know – my lifestyle is sooo rock and roll).  I use fonts a lot – more so in recent years as I’ve develop a deeper appreciation of good typographical design.  So I’m always toying with new fonts, and working with lots of variations for different projects.

The built-in OS X Font Book is a very lame beast which doesn’t really do much for me – not enough intuitive font management in there.  At the other end of the scale Suitcase never really got me hooked because it just felt too over-powering and feature-driven – font management should be really simple, particularly since these programs are fiddling with system-level stuff (I remember a case a few years ago where a colleague accidentally deactivated one of his system fonts using Suitcase, which rendered his notebook useless since OS X wouldn’t boot – luckily that can’t happen in more recent versions of the OS).

For the past six months or so, I’ve been using FontExplorer X.  Although it’s not perfect, it has proven to be the best fit for me, with a good balance between simplicity and functionality.  But it’s still painful to use when you want to browse and select a set of fonts to experiment with for a particular project – the endless list of font families doesn’t tell me anything about the visual appearance of the fonts themselves – I have to sift through and endlessly click around to find something suitable.

What I want is an application which does three things.  Firstly, it should allow me to easily install and uninstall fonts – that’s a given.  Secondly, activation and deactivation should be a cinch – something FontExplorer does very well.  And thirdly, I want to be able to browse my fonts the way I want – I want to see the fonts themselves, not just a dry and meaningless list of font names.  Is that too much to ask?

Well, apparently not, because sitting in my RSS feed this morning came news of Fontcase, which is currently in beta.  And it looks like just the application I was imagining!  The UI design looks gorgeous – simple but functional – and the visual representation of each font is an absolute godsend.

I can’t wait to see the final, finished product.  And if it lives up to my (very demanding) expectations, then I’ll be eagerly adding this to my arsenal of design tools.

As a sidenote, the homepage for this app is a brilliant example of clean and intelligent design.  There’s no need for superfluous words to sell it – a picture of the interface tells you all you need to know.