Category: Typography

Unlocking OpenType features with CSS

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.

Read the full article

CSS Film Titles — Dr. Nakamats

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:

Dr. Nakamats in CSS3.

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.

Choosing the right type for your website

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.

Read the full article

Checking for installed fonts with @font-face and local()

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.

Read the full article

HTML 5 & web fonts; exciting times

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.

Read the full article

HTML 5, CSS 3, DRM & fonts

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.

Read the full article



I’ve updated my Speaking page to include more conferences, more videos, and a little on my speaking requirements and preferences. I’m planning to cut down on the number of talks I give in 2014 (twelve is too many), but am always open to interesting offers and opportunities, so please get in touch if you’re organising an event.

[#] 1 Comment