It’s great that we now have a huge range of fonts to choose from, thanks to the wide­spread imple­men­ta­tion of @font-face, but typog­ra­phy on the web is still behind oth­er media. Many Open­Type fonts come with a range of alter­nate char­ac­ters which can be accessed using var­i­ous soft­ware pack­ages, but aren’t avail­able to web browsers. Or rather, they weren’t. There’s a new CSS prop­er­ty which unlocks these spe­cial char­ac­ters, and that’s what I’m going to explain in this post.

Read the full article

I just watched a great doc­u­men­tary called The Inven­tion of Dr. Naka­mats*, and loved the style of the titles and cred­its (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:

Dr. Naka­mats in CSS3.

It uses 3D Trans­for­ma­tions so needs to be viewed in Safari for the full effect, but degrades quite grace­ful­ly. I had a go at adding some ani­ma­tions to it but it did­n’t feel right, so I’ve left that out for now. That aside, I’m hap­py with the way it looks and it was real­ly easy to make. CSS has come a long way.

* If you’re in the UK you can cur­rent­ly watch this on 4OD.

As I get ready to kick off a cou­ple of per­son­al web projects, I’ve been read­ing Enric Jar­dí‘s book, Twen­ty two tips on typog­ra­phy*, a primer on what works and what does­n’t in typography.

Although Jar­dí main­ly works on type for print, most of the rules also apply to type for the web. In this arti­cle I’m going to high­light five of his tips which are use­ful in decid­ing upon the right type for a project.

Read the full article

Fire­fox 3.5 was released ear­li­er today, and joins Safari in sup­port­ing the @font-face rule with Open­Type and True­Type font fam­i­lies, allow­ing you to use a wider range of fonts in your designs (as long as they are cor­rect­ly licensed, of course).

One slight draw­back of the tech­nique is the blank space that’s dis­played as the new font is loaded into the brows­er; this is espe­cial­ly unnec­es­sary for users who already have that font native­ly on their system.

The way to get around that is quite sim­ple; use local() to check if the font is on the user’s sys­tem first.

Read the full article

With (stan­dards-com­pli­ant) brows­er inno­va­tion firm­ly back on the agen­da, there’s a lot of excit­ing new tech­nol­o­gy to get to grips with. This week, Google have thrown their weight firm­ly behind HTML5, while a new start-up aims to bring web fonts to all.

Read the full article

I’m at home with the flu at the moment, so tak­ing the oppor­tu­ni­ty to un-star some items in Google Read­er; this post is a link-dump with a lit­tle added comment.

A few of them have been in my favourites for a cou­ple of months, so apolo­gies if you’ve seen them already.

Read the full article