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.

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.

Choose just a couple of typefaces

One or more typefaces are enough for any work. You do not need more than that. A lot of typefaces equals a lot of voices. So the more we restrict our typographical palette, the more expressive resources we will use, like contrast, rhythm, symmetry, or movement.

You can, of course, work wonders with just one typeface and a lot of creativity; a prime example of that is from last year’s Seed Conference:

The whole thing was done in Times New Roman, with creative use of weight, style, and colour.

Do not choose two typefaces that look very much alike

Do not mix Futura with Helvetica. Do not mix Baskerville with Times. Using typefaces that are too similar is like ordering two scoops of ice cream, orange and tangerine.

A combination that works so well that it’s almost become a de facto standard is Georgia for headings, Verdana for body (as seen on A List Apart):

One of the reasons they work so well together is that they’re so distinct; headings stand out even more than they would with only a difference in height and colour.

Make sure that the typeface does not communicate something you do not want to communicate

Every font style explains something. There is no such thing as a neutral typeface; a neutral typeface transmits neutrality, and that is a message in itself.

In this example I’ve compared Archer and ClickClack:

While both have their applications, it’s pretty clear that ClickClack — the lower typeface — communicates an air of roughness, improvisation, even chaos, and probably wouldn’t be suitable for a sober business site.

Choose the typeface according to the size that will be used

As a guideline, you should know that typefaces for smaller body sizes have a wider structure and less of a difference in height between capital and lower-case letters compared to those used for titles.

For example, here’s a comparison of two typefaces, Georgia and Archer, displayed at a height of 14px:

Georgia’s upper– and lower-case letters are more similar in height, so much easier to read at a smaller font size such as this.

Reject fake bolds, italics, and small capitals

A fake bold has a crude, dense appearance, something a true bold does not have. True italics are not just slanted letters but a type with a different drawing than the roman type, especially in the case of serif fonts. An authentic small capital should have the same strokes as the capital letter that it corresponds to.

This is perhaps best illustrated by type designer Mark Simonson, in this comparison of true and fake italics.

I highly recommend you pick up a copy of the book; it’s small enough to be pocket sized, but packed full of useful advice. The only drawback for me is that it highlights all the mistakes I’ve made!

* To give it it’s full title: Twenty two tips on typography (that some designers will never reveal) / Twenty two things you should never do with typefaces (that some typographers will never tell you)

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.

The syntax is:

@font-face {
font-family: 'Graublau Sans Web';
src:
    local('Graublau Web'),
    local('GraublauWeb-Regular'),
    url('GraublauWeb.otf');
}

You’ll notice there are two calls to local(); the first is for the full name, the second for the Postscript name; this is required for Safari in OS X.

The cascade is used so that only if the first two conditions aren’t met (that is, the font is not on the user’s system) will the third come into play, loading the font into the browser’s cache. This won’t get rid of the blank space, of course, but it will reduce the number of users who see it.

Here’s an example paragraph which will display in the excellent Graublau Sans Web family mentioned above — as long as you have a browser which supports the feature.

Don’t forget, you will need to declare the rule for each face (bold, italic, etc) in the font family. There’s a good introduction to the whole topic at Beautiful Fonts With @font-face.

Starting with the latter, I today discovered that Jeffrey Veen’s new company, Small Batch Inc., has started touting a new licensing service for web fonts. It’s called TypeKit and, while details are scarce, it seems to be a server to host web fonts with some Javascript magic to not make them downloadable to end users.

It’s an intriguing solution to the problem I mentioned before, even if I’m not convinced it is the right solution; without knowing the specifics, it seems to me there are two fairly obvious sticking points:

First, how do we develop the site using the font if the license is only for the production server? Will there be a special development license, or will we have to buy a copy of the font and then an extra licensing fee?

Second, what about server latency (will there be a long lag until the fonts appear?) and uptime (how irritating will it be if the server is constantly falling over?).

I look forward to seeing how those issues are addressed. I personally don’t see a problem in the current/forthcoming Safari/Firefox implementation — but then, I’m not a type foundry.

It’s Google’s I/O event this week, and they’re making a big deal about supporting some of the new HTML5 syntax — principally, the video element, an example of which is on this YouTube mock-up (Firefox 3.5, Safari 4, or Chrome 3 required).

So stable is the new element that video site dailymotion.com have announced that they have converted 300,000 of their videos to use it, and the open video codec Ogg Theora. With all of the main non-IE browsers about to launch their implementation, adoption will hopefully be pretty rapid.

A few of them have been in my favourites for a couple of months, so apologies if you’ve seen them already.

First, a new working draft of HTML 5 has been released, with a list of changes since the last version. Mostly API calls, although a new spellcheck attribute has been introduced.

Representatives of Mozilla, Microsoft and Opera presented talks on CSS 3 at SXSWI, and have made the slides available to view. They have some good demos & examples of upcoming features, and hint that the Internet Explorer team may be doing an iterative release later this year. Fingers crossed.

Sitepoint reports on the extraordinary lengths that an Australian business site has gone to to stop having their content re-used. The author plays up the search engine indexing angle, but to me that’s less of an issue; if you don’t want your site indexed, you can use robots.txt. In fact this is a way to stop people from copying and pasting your content, which is far more extraordinary. It’s also two fingers up (or just one, if you’re not British) to anyone using a screen reader.

Mark Pilgrim posted an angry attack on font manufacturers in his post Fuck the foundries which, I have to say, I completely agree with. Sitepoint suggest we be proactive by buying a font (good) and letting foundries know we would pay extra to use them as web fonts (bad).

I believe that the problem of font piracy has been overstated; they don’t have the mainstream appeal of media like films or music, for a start. And it’s not as if they’re hard to find right now; I just performed a Google search and found a copy of Helvetica in seconds. Foundries need to leave behind the idea that every unlicensed copy is a sale lost (some people would never pay for a font) and instead focus on potential sales to conscientious users who would happily buy a font to use on the web, at the same price as a font used for print.

Finally, if you want to make the most out of your fonts you need to see these presentations on typography from Richard Rutter and Jon Tan.

Below are the pick of the results, along with a few that don’t quite work, and some old standbys. I wanted to include images to illustrate this, but in most cases the license didn’t allow.

First, the less successful attempts. I’ve used isometric views before, but this one feels a little too cramped and doesn’t allow any focus on the third-level pages. Likewise, this one (from the same set) only really shows the relative sizes of sections, not how they connect to each other.

The designer of this radial sitemap has had a very strong attempt at creating a new format, but it’s not immediately obvious what all of the symbols represent, and you have to really work to find the order in here. With some tweaking, however, I think this could be made to work.

Of the examples that work, the first two are fairly traditional but work because of careful design; this first one has lovely balance and uses colour well, while this second one uses typography to show hierarchy and a simple band of grey to demonstrate grouping (Update: unfortunately, this image has been removed).

My favourite, for really being different while still making a lot of sense, is this one of a personal home page / portfolio, which incorporates not just pages but feeds, widgets and tags. There’s a lot of information, but it’s very clear; this brings order to the social web. It also reminds me of the tube map.

But for a more physical version of a sitemap, it’s hard to beat this one.

Update: Here’s another interesting one which shows plainly which action each link will perform; sort of a hybrid sitemap and wireframe. Although there are perhaps too many arrows, which confuses the diagram slightly.

I think there are a number of potential problems of practicality with that approach, many of which have been raised in the comments. As a contribution to the debate, I would like to offer the following suggestion:

What if the font vendor were to supply an authorisation code when selling a font licensed for online use, which the user were then obliged to use inside the @font-face rule in any CSS file which called the font in question; perhaps like so:

@font-face {
font-family: MyFont;
src: url('myfont.otf');
/* License: XXX-123 */
}

This would make it easier for font vendors to crawl websites looking for instances of their fonts, and checking to see if there were a valid license issued for its use on that particular site. This could involve website makers hosting a file somewhere with details of all the sites they manage, to which the vendor could cross-reference.

Of course this wouldn’t stop font piracy, and it wouldn’t be effective against users stealing fonts for use in offline media. But it would allow vendors an easy method of checking that fonts used online were used legally, at least removing that burden from them.

Worth discussing?

I’ve given this one a version number of 0.5, as I still have a lot I want to do with it, notably: embedding more microformats in the code; adding more progressive enhancement to the CSS; making more use of WordPress’ tagging system; and testing more thoroughly in IE.

However, I’m pretty pleased with the more typographic direction in this design, and am excited to be using a theme I genuinely care about.

If any readers have any constructive criticism to give, please go ahead and do so in the comments. However, do please be gentle with me!

Bonus Update: Jeff Croft’s Typography: Beyond the Font [PDF]