.mindgarden is the digital playground of marc tobias kunisch

.opinions on this website are in not necessarily those of my employer

.send an email to info 'at' mindgarden 'dot' de

.follow the mindgarden on twitter @mindgarden_de or @tobestobs
.occasional guest bloggers are @lwsrc, @dheeva and @idrathernot

Mar 06 2011 by tobs

The problem with dingbat web fonts

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

  1. 5166 Simon Foster

    Hi there, I’m glad you are making these points, I should perhaps have (and probably will) added a disclaimer to this page saying that it’s just a bit of fun and shouldn’t be used in the "real world". I wouldn’t recommend using dingbats as web fonts for anything other than self-indulgent silliness (something of which I am quite fond). Check ot the comment at the end of the css http://dingbats.simonfosterdesign.com/style.css. It’s all very tounge-in-cheek :)

  2. 5168 tobs

    Thanks for clarifying, Simon.

    I want to stress again that I really didn’t mean to pick on anyone personally. Your experiment is really nice visually and technically as a demo.

    I’ve come across this topic frequently recently so your demo was just a good example for the problematic.

    Print and graphic designers have been using dingbats for their projects for a long time. And in print there is absolutely no harm in doing so because print is exclusively visual. With the possibilities that web fonts offer now more and more typographers get excited about web usage.

    But they don’t know all the implications of techniques like this one so I felt it was important to do some education.

    Sorry for misusing your doodle for the sake of getting my point across…


  3. 5171 Simon Foster

    No apologies needed at all, you make a good point, and if my little experiment helps people understand that it’s bad (from a semantic and usability standpoint) to use dingbats as web fonts "in the wild" then I’m happy for that :) I reiterate that I would NEVER recommend using dingbats as web fonts for any client work only for playing around with for fun :)

  4. 5180 Eben Sorkin

    I am keen to see what can be done within the existing dingbat slots in unicode for web fonts. There are not enough to do everything one might want – not by a long long shot. But there may still be things very much worth doing. If web font providers provide an easy access UI in front of the dingbat fonts then using semantic mismatch for the sake of easy keying will sing a less siren-like song. I hope that Typekit WebType WebInk Google Web Fonts etc will all make that UI piece happen.

Leave a Reply