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.
A really nice example of how a site can look stunning despite being built without the use of images and with only a single font (and Times New Roman at that!): Seed Conference. Just amazing.
Bonus Update: Jeff Croft’s Typography: Beyond the Font [PDF]
Apple have released Safari 3.1 for Windows and OS X (and Linux using Wine) today, and the feature that really stood out for me was the introduction of web fonts. Website makers have been bound to the same core fonts for years now, so suddenly having a huge palette to choose from is going to make an enormous difference!
Using them is pretty easy. First you have to declare the fonts using the @font-face rule — and, importantly, you have to declare each variant (weight, style, etc) individually by linking to the font file involved. You can’t just link to the directory and let the browser work out the variants. To see what I mean, take a look at this example (using Safari 3.1, of course!) and view the source to see the CSS involved.
As part of .Net magazine’s Responsive Week, I’ve updated an article by Denise Jacobs to now bring you 50 fantastic tools for responsive web design.
[#] 1 Comment . More Asides.