I can't count how many times in my "growing up years" - because growing up stopped somewhere around seventeen... who needs to grow up more than that? - my mother said to me, "Janae, practice your penmanship. Your handwriting stinks!" All right, to be honest and fair to my mother, it wasn't exactly phrased that way. But, to my mortification even now, she is right. My handwriting stinks. It stinks especially bad compared to my mother and grandmother's beautifully frilly cursive. I have, I promise, tried to emulate over the years by doing letters with loops, writing my "a"s in a Times New Roman style, and dotting my eyes with hearts. I even went through a period of doing everything in bubble letters.
To add insult to injury, my penmanship stinks at work, too. And I don't mean my actual writing on paper - because, honestly, do you think that an office of web designers still leave paper notes to each other and plaster stickies all over their monitors? Well, of course we do! But, of all the careers in all the world, and I am not a doctor obviously, I would have to pick the one that wouldn't improve at all. Let's be honest with each other, friends. The internet's penmanship sucks. And yes, I migrated up from "stinks" because, it's really worth it.
We have maybe fifteen fonts to choose from, and no matter how much I may like Trebuchet MS or Georgia, I don't like them so much that I want to use them on every site that I design. And I don't want to have to design a site around a font. Do you? I would much rather allow my fonts to be that little accenting touch to make my site seem more clever, more fun, more inventive, and have an actual font that emotes the feel of my site. The question is, then: Do I have the opportunity to do this? Yes!!
I may not be able to improve on my personal handwriting, no matter how hard I've tried in the past, but there is more than one way to improve on font use on the web. At least two of them have been mentioned in previous Mindfly Blog posts, if not fully elaborated on.
1. Image Replacement
Anyone who is relatively familiar with CSS has probably used image replacement. Or perhaps you're not familiar with it. I sure wasn't when I started working here, but I can't think of a single website that I haven't used it on since. Most of the time, image replacement is used for the main logo of the site. Take, for example, Chicks with Dice. Yes, I'm using image replacement for the logo, as expected. But I'm also using it for all the sidebar headers, the main link hovers, and most of my submit buttons. Whether or not you like the design of the site, the font most definitely accents the chunky, scrapbooky theme that I had in mind when I created it.
So... if you're wanting to use image replacement, you then want to know how to go about it, right? Let me show you! Please note that I assume in this example that you understand the basics of CSS and have your stylesheets linked correctly and your HTML already set up with your <html>, <body>, etc.
First, you'll want to have your html:
<h1><a href="/" class="logo">Chicks With Dice</a></h1>
And then your CSS:
a.logo
{
position : relative;
display : block;
width : 812px;
height : 297px;
background : transparent url(images/logo.png) no-repeat top left;
text-indent : -9999em;
}
As a note: You definitely don't want to use display : none; or your image won't show either. The text-indent moves it off the screen so far that no monitor should ever be large enough to find it. There probably is one. I don't want to think about it.
2. @font-face
Kyle discussed this in a horrifically relevant article last year (how I loath him for always being so relevant) called The Good Side and Bad Side of @Font-Face. I won't steal his thunder - it would be too little to late anyway - but I will touch on a couple things. I love @font-face. I would love it more if it didn't seem to be very buggy at times. We applied it to a site we were working on and it seemed like it took forever to implement and sometimes wouldn't work. Don't make me an expert, but caching may be some sort of issue here. Either way, @font-face is a nice way of loading fonts that doesn't take up a years worth of time to pull up all the images that are being replaced.
The downside is the legality of font use and allowing people to view fonts and... well, go read his article. It will tell you everything you need to know.
3. sIFR
sIFR is fun. It's confusing. The javascript explanations make my eyes roll into the back of my head. The amount of bugs that it seems to have off and on make me wince. But the truth is, that sIFR is neat. Kyle would gladly tell you that he absolutely hates it and that there have to be better ways of embedding fonts. And he's probably right. There's image replacement and there's @font-face, which we mentioned before. But when it comes to A) having your font embedded safely for the sake of font legality and B) having things like dynamic blog post headers appear in a different font... there's no real better way to go than sIFR as it is supported in, as far as I can tell, all the browsers except perhaps the iPhone's (Thanks again, Apple, for not supporting flash!).
For anyone who doesn't know what sIFR is or does, I'll give you a brief explanation and then point you to the place you really want to go if you want to dip your fingers into it. sIFR is a mix of flash, javascript, and CSS that allows you to plug in a font and create an .swf (flash file) then attach css through javascript to it to change your font to whatever one you uploaded in the file. Luckily the embedding seems pretty detailed, so the legal issues of stealing a font through sIFR are very low - from all I've read.
And so... to use it: Design Intellection has a fantastic blog article giving a step-by-step process in designer terms for how to implement sIFR on your site. I would have been even more confused without it.
I would love to give you an example of a website that I've used sIFR on, but as I just started dabbling with it yesterday myself, it may be a bit before I have something to show of it.
In brief closing, accenting designs with fonts is important. I'm not sure if the debate on the legality of font embedding will ever be resolved, or if there will be good all-browser supported techniques in the future. But one of the things that I have come to realize is that we push the standard, and if we ignore the fact techniques that already exist, no one is ever going to be forced to plow ahead and make new ones.
