Mindfly Website Design Studio

Since my last post (about typography... which conveniently is also my last post), I've learned a few things:

1. I need an upgrade of Photoshop.  Photoshop 7 just isn't cutting it for design. (Could I be any less subtle to the powers that be?  Hint.  Hint.  Hint.)
2. Typography is a nightmare.  Finding the font that you want that fits the site, then picking one of the three afore-mentioned (obnoxious) techniques, and then going through the actual implementation of it... and then having to debug it across the browser... Right.  'Nough said.
3. There has got to be a better way.

Luckily for me, you, and everyone else out there, there does seem to be a better way.  It's not full proof.  It's not even perhaps known of.  But it does seem to fix a good 99% of my issues with type and the web, functions in all the browsers, and also is at least relatively secure.  Don't quote me on the license issues for it, though, those aren't my specialty.

What is this mysterious bout of problem-solving amazement?  One simple word.  Cufon.  Now, try to pronounce it.  I think I've heard it about five different ways.

The next question, I'm sure, is what exactly is Cufon anyway?  Well, that I can answer.  Cufon is an implementation of javascript, SVG, and Canvas that slaps your font into place after the browser has loaded your website with an amazing amount of speed and efficiency.  So... why do I like it better than image replacement, @font-face, or perhaps sIFR?  Simple:

1. Compatibility: Cufon works in all browsers except IE6.  Since it's run by javascript, it doesn't require you to have the most recent version of flash on your site.  In fact, it doesn't require flash at all (and thank god).  Not every browser has implemented the use of canvas or SVG, but with javascript mixed in, every browser (except stupid old IE6) is at least able to run Cufon.
2. Usability: Cufon is amazingly easy to install.  Ridiculously easy in fact.  Plug your font into their encoder, allow it to spit it out, and plug it in.  For those of us who are CSS gurus and not developers, this means something very important: Cufon works like a breeze with CSS!  For any of you who have been using sIFR to do your subbing in, and I have tried it myself so I am talking from experience, how difficult is it to actually A. Target a piece of HTML with sIFR and B. Actually then apply the correct CSS to it without tying yourself in a knot over word-spacing, line-height, and all the other joys of actually forcing your new flash text to over-write your old text in that pretty manner that you want?  You know what I mean.  With Cufon: Apply it, target it with javascript (Cufon.replace('h1')) and... voila!  Apply your CSS as normal.  No extra instructions, no obnoxious work-arounds, just put it all in and make it pretty.  No stress and no grey hairs.
3. Speed: Taking compatibility into consideration with this one, @font-face is fast.  It plugs your text in like normal.  In the browsers it works in.  Image-replacement is fast enough.  You have to wait for the images to load and in the meantime, no text appears at all.  sIFR is the slowest piece of $@%! on the planet.  Luckily for us, Cufon pops up (leaving your regular text there until it does, styled with the CSS as normal so it looks nice) as soon as your javascript kicks in.  Which is pretty darn fast in all the modern browsers.
4. Safety: As I said, I can't swear by the legality of it, but Cufon does imbed the font you upload into a new javascript file for you and requests that you specifically apply it to your domain.  People can probably steal all the code and put it in their website, but they won't be able to download it for use at least.

From a designer's standpoint, 2 is probably the most important to me.  I cut down on applying beautiful fonts to a website in under half the time it would have taken me using any of the other programs.  And because I can't swear to be the smartest cookie in the jar, Cufon has a great set of instructions that pretty much spell out how to use it on your site.  Add to that, it's compatible with most of the major javascript libraries, including jquery (my favorite) and prototype.  Kyle gives a few more awesome reasons as to why he, as a devigner (developer + designer) loves it.

If nothing else, give it a shot.  You might find that it blows you right out of the water.

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.