True Font Families

A List Apart is featuring an article on the future of CSS. Their prediction? Increased compatibility with web fonts, decreasing reliance on browser compatibility. Today, if a user doesn't have a font, tough luck. But in the future? CSS coding could allow for a broader range of fonts, pulling the font-families from the web rather than from a user's library.

Like the author of the article, I'm all for this particularly because it would reduce the amount of unnecessary image files floating around to convey text. I'm a desigin minimalist-- try to keep code as trim as possible. But even I get frustrated at the (lack of) font compatibility on the web. I haven't messed around with True fonts yet, but am certainly going to incorporate them into my 419 class next semester.

Rapid Fire Thoughts

• I'm sitting in one of Purdue's undergrad computer labs to work on my teaching portfolio (the draft of which is below--I'm going to play around with that Dali-esque scheme). The reason I'm using a gen-pop lab: the new Adobe Creative Suite. Our pathetic College of Liberal Arts computers (the one's delegated to the English Department) don't have the new tricked out software package (nor do they have IE 7.0 yet--but that's a good thing for me, I want to beta test my sites with IE 6.0 and the ancient English department is fast becoming one of the few places around Purdue I can do so). To my chagrin, Fireworks is gone--so now I have to start using Photoshop. I new this day was coming, but I just didn't think it would be so soon...
• Speaking of soon, Meg's still pregnant. Very, very pregnant.
• The Red Sox will be fine, so long as Schilling can stay healthy. Starting pitching wins in the regular season, and the Sox have plenty of that. Great starting pitching wins in the post-season, and I'm not sure how Dice-K and Lester will fare. I'm also not sure how Big Big Papi will be in October, but he deserves respect for playing all season with a bum shoulder.
• I finished my upcoming 106 website, and am quite pleased with the results. I really like how the typography came out--expect this blog's typeface to change quite soon. In the end, I took a closer look at how Dave Shea sets up his fonts over at Mezzo-Blue, and sytled something similar:

  font-family:"Lucida Grande", "Lucida Sans Unicode", "Gill Sans", "Tw Cen MT", Arial, sans-serif;
  font-size:12px;

  I was trying to set the font-size through ems, but found that the different browsers (Safari vs. IE & FF) just interpreted them way to different. Pixels seems more precise to me. The headers are done in a different family, one that looks a lot better on Safari than on PC (I'm still working this out):

  font-family:"Abadi MT Condensed Light", "Gill Sans", Arial, sans-serif;

  I know that the Web2.0 aesthetic calls for rounded everything, but I am more and more liking the simplicity and contrast of straight lines. Course, from a coding perspective, straight lines are a lot easier to pull off! I'm going to try to make sure that my new site has rounded corners, but I'm not yet sure if I am going to use a background image (effective, but old-fashioned) or if I am going to get a bit more fancy. I really like this png technique over at Schillmania, but am not quite sure if it will work on a large scale. Experimentation forthcoming.

For the Love of Gill Sans

Argh.

Since getting my MacBook, I rarely use a PC. The notable exception might be a two-screen PC in the English department's multimedia lab when I am working on a large scale web project. Recently, I helped my wife with the Lafayette Dog Park website (the site is currently being uploaded to a cold fusion server, so no link yet). Since it was my wife's first go at XHTML or design, we used the two-screen, that way she could work on the code on one screen and refresh the browser in another.

Long story short: during this process, I ended up looking at my homepage. In Firefox. And it looked like crap. To be specific: the font was rendering terribly pixelated and broken. This came as a real shock to me, since I thought I was using a fairly standard font-- Gill Sans -- which renders beautifully in Safari. Love the Safari Gill Sans. Here's a screen shot of my design portfolio in Safari (Gill Sans at 0.9em):

Yummy.

But here's what the site looks like in Firefox:

Icky.

So, what to do? Fighting with Firefox is completely new to me. Its like the first fight in an otherwise glorious relationship. Its Conseco nipping McGwire. Its... well, you get the point. Firefox is usually the hero of the browser wars. Internet Explorer does an equally terrible job with Gill Sans. But thanks to the beauty of conditional comments, its an easy fix to tell IE not to try--to use "Tw Cen MT" instead. This was the standard font in my world: I used it at default size for my last Introductory Composition website and again at 14px for my Multimedia Writing website. I moved away from this font as I started paying attention to web typography: I noticed I tended to favor sites that used smaller font sizes, and wasn't pleased with Tw Cen MT's small renderings. But Gill Sans, that's beauty baby: consistent, symmetrical, with a nice touch of curves (good thick/thin ratio). What more could a designer want?

So, again, what to do? For assitance, I turned to one of my favorite typography sites: Smashing Magazine. Their site looks smooth and sophisticated in Safari:

Nice consistent font wieght, smooth kerning, nice variation. So, I rifle through the CSS, and find out that they're using a pretty standard small-sized Verdana. But look what happens to their site in Firefox:

Icky.

Playing around with other fonts, I've come across Univers--which looks pretty good at .8em (and bigger and I find it a bit unprofessional):

Not bad... especially considering Univers isn't recognized by Safari. This means I can create a font family: Univers, "Gill Sans", "Tw Cen MT", Verdana, Arial, sans-serif; to cover all my bases. Except that at .8em, the font-size is too small for Safari. This is where I left off yesterday--tomorrow I'm going to try looking at Univers at .9em in Firefox again. Another possible solution might be to see if I can code a conditional comment for Safari (I've never had to code a comment for anything but IE). While the sage isn't over, here's a moral for the story so far (one which I supposedly already knew):

Double and triple check typography in all browsers. In my case, originally all the sites were in Tw Cen MT. I then switched to Gill Sans without checking the site in PC. Boo me.

The next time the Red Sox are on TV I'll do another post looking at typography on the web. Essentially, I want to look at a number of designer homepages (Dave Shea, Mark Boulton, Mike Davidson, and others) to see what kinds of font families and sizes they are using.

UPDATE:: Don't know what I was thinking. Univers looks terrible. Sigh.