life with booyaa

Huh?

If you work in web publishing, even a little bit, then you'll know what I'm talking about.

I've come across this so often in my *counts on fingers* 6 year career in web user experience, where a designer who's classically trained in the print medium utterly fails to grasp the basics of web design. Which would be ok if it stopped there. It's when they shrug that off and insist on doing it anyway that the problems happen. But it's not about transferring your print design into html and css, or Flash, or whatever. It's about understanding the medium. Web design, with scant exception, must be driven by user needs. That's it.

I've learned that the best way to create a website that works is to follow the basic recipe of a healthy dollop of IA, a splash of usability and mix well. Add a pinch of design and season to taste. Test regularly and adjust recipe as needed during final cooking. OK so that's flippant, but here are some reasons why print does not transfer to the web and what's needed to make a website work.

I've just set up a new website using WordPress (more on that in a separate post) and since WordPress allows for Typekit font replacement I decided to give their free trial version a spin. I replaced the header fonts with a soft handwriting style font (the one I really wanted was only available in the pay-for portfolio, but I might upgrade one day) using Typekit. It was really easy. Here's what you do.

Go to Typekit and open an account. Takes two minutes, if that.
Generate a tag for your site. Go back to your WordPress settings and paste the tag in your website header scripts. WordPress make this easy to do, it's very similar to setting up your Google Analytics tags, just paste it in the box and save.
Now, choose your font(s) and the weights and styles you're after - light, bold, black, oblique, normal etc.
Decide which CSS styles/classes you're using the font with - you can also do this directly in your website CSS, up to you.
Save.
Check out your website with your lovely fancy fonts.

recommendations, notes and stuff I learned
firefox font replacement delay: known issue
I use Safari most of the time, but when I tested out my new site on Firefox i saw that the delay, even on our superfast broadband &emdash; or maybe because of it &emdash; means you can see the fallback font before your Typekit font appears. The font I chose is a compact one and I'm using a light variation, too, so the overall size is much less than a standard sans-serif would be. I suspect it's not as noticeable with similar sized fonts.

CSS
If you know some CSS you will have more control over how things look on your site. But you really only need to know a little. Since I was changing the headers (the branding is separate in the theme I'm using) I added this code to my CSS file:

h2, h3 {
font-family: "sovba-1","sovba-2",sans-serif;
font-weight: 400;
font-size: 18px;
}

tread lightly
You can choose to install just the weight and style you'll need or the whole lot. The less you choose the lighter the kit (font package) and, I expect, the less impact it will have on your website loading times. I added only the two weights I wanted. I'm an inveterate tweaker, so it's likely that in a few weeks I'll update my kit with a different weight, or italic, or even a new font face.

fallback font
You can choose a fallback for if the font replacement fails (we're promised it's never going to happen, but hey.) Otherwise the browser defaults will kick in, and the viewer will see Verdana, or Times New Roman (god forbid, on your lovely minimalist site) so it's worth doing that.

pricing plans
The trial plan gives you access to around 150 fonts while the personal library includes over 500 fonts. So if you find the font you want within the trial library, and it's for a low-traffic website, you're laughing. Up to 25,000 page views a month, I think that's really generous.
For $25 a year, you can access the personal library and use 10 fonts across 2 websites, with double the page views, too. I'm certainly considering it. I could then tart up booyaa dot org, too. Which is the plainest website in the world right now.