/ log / 18th Aug, 2010 /

Web Fonts, Dingbats, Icons, and Unicode

Yesterday, Cameron Koczon shared a link to the dingbat font, Pictos, by the talented, Drew Wilson. Cameron predicted that dingbats will soon be everywhere. Symbol fonts, yes, I thought. Dingbats? No, thanks. Jason Santa Maria replied:

@FictiveCameron I hope not, dingbat fonts sort of spit in the face of accessibility and semantics at the moment. We need better options.

Jason rightly pointed out the accessibility and semantic problems with dingbats. By mapping icons to letters or numbers in the character map, they are represented on the page by that icon. That’s what Pictos does. For example, by typing an ‘a’ on your keyboard, and setting Pictos as the font-face for that letter, the Pictos anchor icon is displayed.

Other folks suggested SVG and JS might be better, and other more novel workarounds to hide content from assistive technology like screen readers. All interesting, but either not workable in my view, or just a bit awkward.

Ralf Herrmann has an elegant CSS example that works well in Safari.

Falling down with CSS text-replacement

A CSS solution in an article from Pictos creator, Drew Wilson, relies on the fact that most of his icons are mapped to a character that forms part of the common name for that symbol. The article uses the delete icon as an example which is mapped to ‘d’. Using :before and :after pseudo-elements, 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. The end of this story is not good as a VoiceOver test by Scott at Filament Group shows. In fairness to Drew Wilson, though, he goes on to say if in doubt, do it the old way, using his font to create a background image and deploy with a negative text-indent.

I agreed with Jason, and mentioned a half-formed idea:

@jasonsantamaria that’s exactly what I was thinking. Proper unicode mapping if possible, perhaps?

The conversation continued, and thanks to Jason, helped me refine the idea into this post.

Jon Hicks flagged a common problem for some Windows users where certain Unicode characters are displayed as ‘missing character’ glyphs depending on what character it is. I think most of the problems with dingbats or missing Unicode characters can be solved with web fonts and Unicode.

Rising with Unicode and web fonts

I’d love to be able to use custom icons via optimised web fonts. I want to do so accessibly and semantically, and have optimised font files. This is how it could be done:

  1. Map the icons in the font to the existing Unicode code points for those symbols wherever possible.

    Unicode code points already exist for many common symbols. Fonts could be tiny, fast, stand-alone symbol fonts. Existing typefaces could also be extended to contain symbols that match the style of individual widths, variants, slopes, and weights. Imagine a set of Clarendon or Gotham symbols for a moment. Wouldn’t that be a joy to behold?

    There may be a possibility that private code points could be used if a code-point does not exist for a symbol we need. Type designers, iconographers, and foundries might agree a common set of extended symbols. Alternatively, they could be proposed for inclusion in Unicode.

  2. Include the font with font-face.

    This assumes ubiquitous support (as any use of dingbats does) — we’re very nearly there. WOFF is coming to Safari and with a bit more campaigning we may even see WOFF on iPad soon.

  3. In HTML, reference the Unicode code points in UTF-8 using numeric character references.

    Unicode characters have corresponding numerical references. Named entities may not be rendered by XML parsers. Sean Coates reminded me that in many Cocoa apps in OS X the character map is accessible via a simple CMD+ALT+t shortcut. Ralf Herrmann mentioned that unicode characters ‘…have “speaking” descriptions (like Leftwards Arrow) and fall back nicely to system fonts.’

Limitations

  1. Accessibility: Limited Unicode / entity support in assistive devices.

    My friend and colleague, Jon Gibbins’s old tests in JAWS 7 show some of the inconsistencies. It seems some characters are read out, some ignored completely, and some read as a question mark. Not great, but perhaps Jon will post more about this in the future.

    Elizabeth Pyatt at Penn State university did some dingbat tests in screen readers. For real Unicode symbols, there are pronunciation files that increase the character repertoire of screen readers, like this file for phonetic characters. Symbols would benefit from one.

  2. Web fonts: font-face not supported.

    If font-face is not supported on certain devices like mobile phones, falling back to system fonts is problematic. Unicode symbols may not be present in any system fonts. If they are, for many designers, they will almost certainly be stylistically suboptimal. It is possible to detect font-face using the Paul Irish technique. Perhaps there could be a way to swap Unicode for images if font-face is not present.

Now, next, and a caveat

I can’t recommend using dingbats like Pictos, but the icons sure are useful as images. Beautifully crafted icon sets as carefully crafted fonts could be very useful for rapidly creating image icons for different resolution devices like the iPhone 4, and iPad.

Perhaps we could try and formulate a standard set of commonly used icons using the Unicode symbols range as a starting point. I’ve struggled to find a better visual list of the existing symbols than this Unicode symbol chart from Johannes Knabe.

Icons in fonts as Unicode symbols needs further testing in assistive devices and using font-face.

Last, but not least, I feel a bit cheeky making these suggestions. A little knowledge is a dangerous thing. Combine it with a bit of imagination, and it can be lethal. I have a limited knowledge about how fonts are created, and about Unicode. The real work would be done by others with deeper knowledge than I. I’d be fascinated to hear from Unicode, accessibility, or font experts to see if this is possible. I hope so. It feels to me like a much more elegant and sustainable solution for scalable icons than dingbat fonts.

For more on Unicode, read this long, but excellent, article recommended by my colleague, Andrei, the architect of Unicode and internationalization support in PHP 6: The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets.

Share

Browse More Articles

11 Comments

  1. 1. By Drew Wilson on 18th Aug ’10 at 21:40pm

    Thanks for the write up!!

    Really though.. why is it so bad if a check mark doesn’t have a text equivalent?

    If you designed a site today and you wanted a check mark somewhere, you would use an image. What kind of text equivalent would you use? The EXACT same you would for an icon font.

    Think about it. Using a font that has “images" instead of “text" is the same thing as using images instead of text. Yes, the exact same. Except better, cause it scales and can be manipulated on the fly via css.

    Now the obvious debate here is: “if we are gonna possibly create a new technology/standard, why not somehow make the web more accessible in the process?”.

    In other words, why be stuck with the same problem we face now with images and “fallback text”. There must be a better way.

    I think there is a better way. But I don’t know the answer yet.

    So lets do something about this!!!! :)

    You’re obviously very knowledge about “fonts + the web" in general, and co-creating font deck just adds to your influence in this realm. Would you be interested in starting a project/organization with me to create a new standard for this new approach/technology (icons+fonts+accessibility)?

    Again thanks for the write up and mention!! Stoked!

    For the record, I DO think it’s ok for people to use the Pictos Font, just make sure you write your HTML to be accessible :)

    Peace,

    Drew

  2. Jon 陳’s profile 2. By Jon 陳 on 19th Aug ’10 at 01:52am

    Thanks for the reply, Drew.

    Using a font that has “images" instead of “text" is the same thing as using images instead of text.

    Unfortunately, that’s not true. Your technique proposes hiding part of the text, and in the case of the check mark, leaving a '3' in the DOM without alternative text. title attributes won’t work. It’s confusing at best.

    Alternative text is built for purpose, but text replacement feel more like a hack, and an unnecessary one for icons like the check mark. There are three check mark code points in Unicode of different styles one could use! Anchor is also there, as are many other symbols. For common icons like that we don’t need a new technology. However, for icons not already part of Unicode we would need either new code points, or an agreed set of private code points. I think. :)

    The other issue with using dingbats for UI icons is quality of rendering, especially in Windows XP and Vista. Hinting could help solve some of the quality issues, but that would depend on use size.

    For the record, I DO think it’s ok for people to use the Pictos Font, just make sure you write your HTML to be accessible

    Is there a method I’m not aware of to use a dingbat check mark mapped to a stand-alone ‘3’ and have them be reasonably accessible?

    I’m glad you’re publishing dingbats to start the conversation, but I’m sorry to say I have to disagree about using them with font-face. As images, absolutely. Perfect!

    Thanks for your kind words. I’m not sure I have the expertise either in Unicode or font development to help define a new Unicode range. In the post, I suggest it may be interesting to take the existing symbols table in Unicode and see what icons are missing that we use on a regular basis. I think that’s a great place to start. When I find a moment, I’ll try and put together a visual chart of the existing symbols. Hopefully folks could take it from there.

  3. 3. By Mihai Alexandru Bîrsan on 19th Aug ’10 at 07:51am

    I will always use "✓" (✓) instead of “3" in my markup, since UTF-8 encoding is possible! And I’d rather have characters downgrade to a “character missing” block than something confusing.

    The glyphs are looking great however, and having them mapped to the proper (or even private use) Unicode points would sure make for an excellent web font!

    I’ve struggled to find a better visual list of the existing symbols than this Unicode symbol chart […].

    Check out Decode Unicode and Alan Wood’s Unicode Resources (the first being the best resource I’ve found so far). Examples: Miscellaneous Symbols on Decode Unicode and Dingbats on Alan Wood’s Unicode Resources.

  4. 4. By Drew Wilson on 19th Aug ’10 at 10:03am

    Here’s the deal, if this is about accessibility unicode will do NOTHING to improve it. If you have a mac turn on the screen reader and try and listen to the unicode characters… see what happens.. nothing. It just skips over them like they were never there. JAWs (window sonly & costs money) can speak some unicode characters. But from what I’ve read it doesn’t support many of the “symbol" characters (like check and smile face, etc.), it concentrates it support on alphabetical characters (like other languages). So unicode isn’t a good answer yet.

    If you have a PC running windows vista, pull up my Pictos website and look at the icon font renderings. Notice anything. They look good! I’m not sure about XP, but the icons render smoothly in Vista. And that’s without doing ANY extra css or system preferences to make them appear better. If you view them in Safari or Chrome on the PC they look exactly like the Mac renderings. If you look at them in Firefox or IE, they are a little worse, but barely.

    About the checkmark. Why does this need to be represented with text? It is a visual element… a visual aid. The only time i see this (or ANY icon) would need to be represented in the as well is if it is a navigation element (which is what Pictos is for). But if I’m browsing the site with a screen reader, and the is a UL list with check marks on the side of each list item…. i don’t need to know that there is a checkmark icon there.

    If you don’t want a random “3" in your markup, use CSS to render the icons. You can use :before or :after.

    If you want to actually help people using screen readers, the best option is to leave them fallback text. This will work on EVERY screenreader available. That goes for images as well. Not img tags, but HTML elements that have an image set as its background property… like most image icons work these days. Putting fallback text in the HTML element and hiding that text with CSS is the best thing you can do for screen readers in that situation.

    Again this is the best we can do these days. But there has to be a better way.. but right now it doesn’t seem the standards are in place to do so. But why limit ourselves as designers & developers?

    You say you can’t recommend using an icon font like Pictos. To me that sounds a lot like we are in 2003 and you say you “can’t recommend using javascript, because of accessibility”. That statement would have been true. But what if people listened to you back then (lol..IF you had actually said that :) Where would javascript be if people didn’t push the boundaries? Certainly not where it is today.

    I say DOn’t limit yourself. We need to experiment with new/better ways of doing things. Doing AJAX requests in 2003 could have been done server-side instead, but it offered aesthetic value and other “un-neccsary" conveniences. Same is true today with using icon fonts i think. If we as a community want the ease and flexibility of using icon fonts, then we will find a way to make it good for everyone.

    I’m loving our discussion :) Exciting!!

    Peace,

    Drew

  5. 5. By Joe Clark on 21st Aug ’10 at 10:54am

    I appreciate the discussion, I guess, but there isn’t really room for discussion. You have to use definable characters. In the normal course of events, that means Unicode. If your pi character hasn’t been defined in Unicode, you can’t use it. (There are edge cases, like emoji, but those are to be Unicode-defined, too.)

    I trust somebody noticed that nearly the entire Zapf Dingbats font was grandfathered into Unicode.

  6. Jon 陳’s profile 6. By Jon 陳 on 23rd Aug ’10 at 02:14am

    Thanks for the links, Mihai!

    Drew, All of your points are already covered in the article. To touch briefly on some misconceptions: CSS generated content is injected into the DOM and thus, markup. The JS comparison doesn’t work. Nothing about the method you suggest is new or pushes boundaries. It just replaces standard ways of having symbols in fonts with unnecessary workarounds. Pronunciation files could solve reading issues with Unicode nice and simply. So, to end: why not re-map your icons to the correct Unicode symbol code-points instead of mapping them incorrectly to alpha numerics? I don’t agree with you, but if I follow your logic, the Unicode would be ignored like dingbat alpha-numerics, so what’s the difference?

    I agree in the case of existing code points, Joe. Whether, and perhaps how to extend the existing symbol set itself would be a more useful discussion.

  7. 7. By Drew Wilson on 9th Sep ’10 at 09:51am

    This is an awesome solution: http://lab.simurai.com/css/buttons/

    Using the HTML 5 attribute “data-*". In this case: data-icon="A”

    Easy to implement with CSS 3.

    Won’t work out of the box on older browsers… but add a little Javascript and it will :)

  8. 8. By Joe Larson on 22nd May ’11 at 15:35pm

    I am looking at building some kind of alternate solution to Pictos sometime this summer… this was my first step: http://unicodinator.com. I really think that

    A) Icons are not as meaningful as we like to think (especially once you throw i18n/l10n concerns in the mix) and should definitely be secondary in terms of conveying meaning — so the concern for screen readers is really missing the point

    B) Faster page loads trumps code readability, but code readability is still really important, and I think a '3' in your markup is bad but ✔ isn’t much better… Frankly the css-sprite image-based solution I am using, which uses an assortment of poorly-named css classes like “Ic_system_45" isn’t any better… I hope to solve this.

  9. Jon 陳’s profile 9. By Jon 陳 on 23rd May ’11 at 00:51am

    Hi Joe. Thanks for the comment although I’m somewhat confused. What point are you referring to here?

    […]concern for screen readers is really missing the point

    What exactly are you saying you think the optimal implementation of Unicode symbol-like icons would be?

  10. 10. By Joe Larson on 23rd May ’11 at 06:02am

    Jon - I am not really sure what the optimal implementation would be, I hope to figure that out. But I know that having a screen reader be able to read “leftwards arrow" should not be a primary concern. Whatever button or link uses that arrow should either have additional text that describes it e.g “go back”, or a title attribute or something, which would take care of the screen reader and other users who may not know what the particular icon in question is trying to convey.

  11. 11. By juan pablo lozano on 2nd Aug ’12 at 12:45pm

    What about doing this?

    .icon_house:before {

    color: red;

    content: “letter_for_the_house_icon”;

    font-family: “dingbats";

    }

    and then:

    <a href="#"><span class="icon_house"></span> Home</a>

Post a Comment

Required sections are marked § . Please remember, debate and courtesy are mutually inclusive.

Personal Details and Authentication
Comment

Lately in the Log

  1. Anakin Tue, 26th Jun 2012 {4}

    I’m pleased to be able to say that Analog is joining forces with…

  2. We, Who Are Web Designers Mon, 19th Sep 2011 {65}

    In 2003, my wife Lowri and I went to a christening party. We were friends…

  3. Ampersand, the Aftermath Wed, 22nd Jun 2011 {3}

    The first Ampersand web typography conference took place in Brighton last…

  4. Design Festival, The Setup, and Upcoming Posts Mon, 20th Jun 2011 {1}

    Wow, this has been a busy period. I’m just back from the Ampersand…

  5. Web Design as Narrative Architecture Wed, 30th Mar 2011 {12}

    Stories are everywhere. When they don’t exist we make up the…

  6. Ides of March Tue, 15th Mar 2011 {4}

    My friend and colleague, Chris, has shared a spiffing idea, the Ideas of…

Remarks from the log

  1. By Martin Varesio in Ampersand, the Aftermath:

    His dry, droll, richly-flavoured delivery was a humorous counterpoint to some controversial asides…

  2. By Steve Blakeborough in Display Type & the Raster Wars:

    Hi Jon, In Elliot’s recent and informative article http://bit.ly/13sAS5X he suggested you might be bullied…

  3. By Pravat in We, Who Are Web Designers:

    Nice to read Jon. When I introduce myself I usually say ‘I’m a web strategist’. Because when I say…

  4. By Esteban Valles in Web Design as Narrative Architecture:

    Thanks, what a great article.

  5. By Shoutheasken1961 in Design Festival, The Setup, and Upcoming Posts:

    Most typographers do not design typefaces, and some type designers do not consider themselves typographers. In modern…

  6. By M. Slack in Designer PHP: A Dynamic Menu with If and Else:

    This is fantastic! I wish I would have found this sooner! Thank you.

People and XFN

Analog folks:

  1. Andrei Zmievski

  2. Chris Shiflett

  3. Jon Gibbins

Friends, colleagues, and authors with interesting voices:

  1. Ben Ramsey

  2. Dan Mall

  3. Denna Jones

  4. Ed Finkler

  5. Elizabeth Naramore

  6. Elliot Jay Stocks

  7. John D. Boardley

  8. Helgi Þormar Þorbjörnsson

  9. Joe Leech

  10. Jos Buivenga

  11. Kester Limb

  12. Nicola Pressi

  13. Patrick H. Lauke

  14. Piotr Fedorczyk

  15. Richard Rutter

  16. Rick Hurst

  17. Sean Coates

  18. Simon Pascal Klein

  19. Terry Chay

Live the questions and one day grow into the answers.