It’s great that we now have a huge range of fonts to choose from, thanks to the widespread implementation of @font-face, but typography on the web is still behind other media. Many OpenType fonts come with a range of alternate characters which can be accessed using various software packages, but aren’t available to web browsers. Or rather, they weren’t. There’s a new CSS property which unlocks these special characters, and that’s what I’m going to explain in this post.
I just watched a great documentary called The Invention of Dr. Nakamats*, and loved the style of the titles and credits (Vimeo video) by The Ronin. I thought I’d have a go at doing them in CSS, and you can see my first attempt here:
It uses 3D Transformations so needs to be viewed in Safari for the full effect, but degrades quite gracefully. I had a go at adding some animations to it but it didn’t feel right, so I’ve left that out for now. That aside, I’m happy with the way it looks and it was really easy to make. CSS has come a long way.
* If you’re in the UK you can currently watch this on 4OD.
As I get ready to kick off a couple of personal web projects, I’ve been reading Enric Jardí‘s book, Twenty two tips on typography*, a primer on what works and what doesn’t in typography.
Although Jardí mainly works on type for print, most of the rules also apply to type for the web. In this article I’m going to highlight five of his tips which are useful in deciding upon the right type for a project.
Firefox 3.5 was released earlier today, and joins Safari in supporting the @font-face rule with OpenType and TrueType font families, allowing you to use a wider range of fonts in your designs (as long as they are correctly licensed, of course).
One slight drawback of the technique is the blank space that’s displayed as the new font is loaded into the browser; this is especially unnecessary for users who already have that font natively on their system.
The way to get around that is quite simple; use local() to check if the font is on the user’s system first.
With (standards-compliant) browser innovation firmly back on the agenda, there’s a lot of exciting new technology to get to grips with. This week, Google have thrown their weight firmly behind HTML5, while a new start-up aims to bring web fonts to all.
I’m at home with the flu at the moment, so taking the opportunity to un-star some items in Google Reader; this post is a link-dump with a little added comment.
A few of them have been in my favourites for a couple of months, so apologies if you’ve seen them already.