.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

Jun 29 2011 by tobs

Google web fonts, version 2

I’m very happy that we were able to launch the preview for the new version of Google web fonts yesterday. You can go and check it out here: http://www.google.com/webfonts/v2

Screen shot of the new Google web fonts

This has been the effort of a very small but very amazing team and we’ve been working hard all year to bring you the new UI.

I hope you enjoy the new Google web fonts and I hope to be able to tell a little more about the design process at some point. Stay tuned for the full launch soon..

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

Mar 06 2011 by tobs


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.

The blog lives at webfontgallery.com

This is the associated twitter account where posts will show up too: @webfontgallery

Picture 20.png

 1 2 3 … 154 Next →