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”
I’m getting more and more excited recently about the possibilities CSS 3 offers in combination with web fonts. There are a lot of cool demos floating about out there on the web, so I created a tumblr blog on which I’ll try to link to the noteworthy ones.
It’s not about linking to websites using beautiful type and typography, I leave that to others. This one is more about what you can do from a technical perspective. Often this will result in something beautiful too, but it’s more about demos rather than real websites.