I just came across Simon Foster’s dingbat love story demo page. It shows how dingbat fonts can be used with @font-face to create a graphic design basically using just fonts and clever positioning.
More and more people are using dingbat web fonts for things like this. And while visually this is a great example there is a big problem semantically with this approach.
Looking at the page with CSS turned off it becomes very obvious:
The icons that the dingbat font contains are randomly mapped to letters. So when the visual presentation is taken away all that’s left is a string of random letters devoid of any meaning.
I’ve been thinking about this for a while and Simon’s example just was a good example to use for a blog post. By no means am I trying to pick on him individually as he’s a great designer. I’m aware that his page is a proof of concept on not really a real website.
But using this technique is problematic in terms of accessibility, SEO considerations and general semantics. Using WAI ARIA there is a role=”presentation” that should make the use of dingbat fonts less harmful to assistive technologies. But it doesn’t give back any meaning lost and WAI ARIA is not supported by all screenreaders yet.
And sticking with our example for search engines and other text based user agents the love story will simply be “qMpRRRRRRFwMJpFJpeMsrFttMppprFpppypMFuBBB”
[Update:] When searching for the string “qMpRRRRRRFwMJpFJpeMsrFttMppprFpppypMFuBBB” you actually get the dingbat love story as the search result: http://www.google.co.uk/search?sourceid=chrome&ie=UTF-8&q=qMpRRRRRRFwMJpFJpeMsrFttMppprFpppypMFuBBB&qscrl=1