Nostalgia

Some of you may not know this but this website has existed in one form or another for over 5 years. In terms of “the internet” that is pretty long, a year before youtube even.

Anyways, this is what the site looked like in what was potentially the best time of my life…
Nostalgia

Font troubles eased by Typeface.js

I’m about to talk about nerdy stuff but I’m going to try to explain it so anyone can understand.

In the past I’ve run into a problem. I would be making a website and I would want to use a neato new font but in order to do so I had to turn the text-using-neato-font into an image.

For example, see that “mukelarvin.com” up at the top beside the cannon? Notice how you can’t highlight, copy/paste that text? That’s because it’s a picture. If I just wrote “mukelarvin.com” in the code and said “use neato-font” the website would look correct on my computer but not on yours. That is because I have the neato-font on my computer but you probably don’t have it on your computer.

So I would go into Photoshop or something, write the text I needed using the neato-font and save that as a picture. This works. Your computer downloads the picture and everything looks nice.

The downside of this technique is that any time you want to change the text you have to load up Photoshop, remake the image and upload the image to the website. If you have a lot of text that changes often it becomes super annoying.

Today I read about Typeface.js, a script that uses your browser’s drawing abilities to draw the text in whatever font you want. Neato.

However there are still a few hiccups. One is that you can’t use CSS :hover effects. (Which makes text change when you place the mouse cursor over it.)

Basically making Typeface.js only good for headlines and such, which don’t usually change often and are easily made into images. I pretty much wasted your time just now.


Neato!!!

(Fabulous 50s font, 70px.)

Copyright © 2008 mukelarvin.com