Tom’s Graphic Design Journal

I'm sick of Minion. Minion is a type-face for those who don't know. Lately I've seen it around more than Helvetica, only I don't think it's as good as Helvetica. Helvetica is timeless. Minion is just a piece of junk. It's one step better than Times New Roman and while some may say Helvetica is one step better than Arial or Verdana, I'll half agree...but I also use Trade Gothic, Franklin Gothic, or Meta most times over Helvetica. However it depends. My point is you can't over use Helevetica. You can over use Minion.

The worst part is some poor bastard recently explained to me to use a "script face" so sure enough I did. I used Poetica...then they wanted something more "contemporary" so I gave them something more traditional/classical ... Shelley. Which flew right over their head, but they liked it. Why? Just for the same reason they like Minion probably...because they don't know jack shit and they want to be like everyone else.

There exists more than one font in this world people! Dare to dream come on (not that Poetica is a uncommon font or anything either but I felt more legible for web use than Shelley, which was one major reason for choosing it).

My point here is that after I used Shelley, they send me what they want and what they think to be a script face...Guess what it was?! Fucking Minion! It was minion oblique/italic. Give me a break! Anyway. I see Minion used too much and it's sickening.

While I'm at it here, I figured I might as well share my two cents about dynamic text replacement. Or in other words, how I get all the pretty titles to show up on my blog automatically without creating images.

This is not a tutorial on "exactly" how. You can read some of the following sites and figure out how quite easily, the people who created these powerful scripts also include instructions. However, I wanted to review some of these better known ways as well as their pros and cons.

There are two popular ways dynamic text replacement is done. One is by using server-side software to create images from font files (there's several ways to do that) and the other is through Flash. All of these methods do require javascript though which may or may not be an issue for some viewers. Fortunately there will always be a default display so it degrades well and doesn't ruin things. This also makes all of these methods search engine friendly.

sIFR is the way through Flash. It is quite nice and gives you the most control I think. It will allow you to fine tune and adjust spacing between words and padding/margins all around which comes in handy...but not letters, there is no kerning with sIFR becuase dynamic flash text did not support it (sIFR version 3 apparently has it, but it's beta). However, you can control leading.

Another method is by using a javascript and PHP script by Stewart Ulm, an article can be found on A List Apart about his method. Another similar method would be by using Python. You can find out more about Peter Bengtsson's approach here. Yet another variation is a script done completely in PHP and CSS that is based off Stweart Ulm's script, found at joaomak.net. There is no kerning support (currently) for these methods either...yet

sIFR
Pros: Flexibility, anti-aliasing control, leading control, margin/padding control. Really nice looking because it uses Flash's engine for graphics (can technially use gradients or something for color).
Cons: Requires Flash, takes a bit of fiddling especially with odd fonts and text wrapping, larger base file size (but reuses swf file so in the long run it can be smaller), links can't use right click...to open in a new window, etc.

Stewart Ulm's Script
Pros: Fast (small file sizes..less than 5kb for a title you see here), easy to configure, doesn't require Flash to be installed.
Cons: Not easy (apparently it's somewhat possible) to kern/letterspace.

Peter Bengtsson's Script
The same pros and cons of Stewart Ulm's script...Just uses Python instead which may or may not be a con.

joaomak's Script
Pros: Doesn't require Flash or Javascript, valid XHTML and CSS, text/letter wrap (after page has been loaded...so if someone resizes their browser window), small file size (since there's no javascript and PHP is mostly server side, I'd imagine the only thing you're loading is very tiny images for each word...meaning this should be fastest loading script).
Cons: You can't specify class or id attributes on your text that you're replacing. That one hurts a bit.

One thing I didn't touch on (but hinted at) was transparencies. The sIFR technically could allow for it, so you could put your text overtop of an image background as you can with Flash movies...however, not all browsers support it. There is no (to my knowledge) support for the transparent backgrounds using the other scripts. I'm unsure if you can generate png images with the scripts...if you could, it would then be a matter of using the CSS filter property to get it working for IE6...but you then run down that road which has complications when you bring links into play.

sIFR is probably the most robust and best looking with the most options. I may in fact use it for my blog over Stewart's script. I'm not using Peter's because I'm not familiar with Python. Again, I personally did not use sIFR because of load times and because it doesn't allow for people to right click on links to open in a new browser window (and yes I have seen one attempt to fix this, but alas, it does not work on Firefox2).

I don't believe in any one "right way" for anything on the web. Any web designer/developer should know that. Even with "standards" there are just too many possibilities out there. The only two things that matter is what you can do...and what you can't do. Ultimately, it's your call...but don't go crazy with it because it will slow down load times if you were to replace ALL of your text on the page.

Type Tester
http://typetester.maratz.com

This web site is a very handy tool for figuring out fonts for your web site.
The site works off of em measurements.
One important piece of information, which you have to dig for, is that your body tag should have font-size: 62.5%. Unless of course that is you work with em measurements everyday. What this does is it simply converts it to a 10px base. Therefore every 1em is 10px.

I'm unsure why px just isn't used, but I'm sure it has something to do how different browsers handle em vs. px.

This is just one small step for web design and advanced control over typography. While this isn't anything new, it certainly is something highly overlooked.