When It’s Time To Change…

If you’ve been here before, you’ll notice a major change in the look of this site. Yes, this blog has reached puberty.

After about a month of writing this and looking at it every day, I decided I had outgrown the old theme, Split Personality by Wordpress Diva. I still think she did a wonderful job on it, and I love the concept of a theme that’s split right down the middle. However, the limited screen real estate for the actual content became limiting, and felt a bit claustrophobic.

And so, after trying on about 15 other themes for size, we move on to Clean Home by Bryan Helmig of Mid Mo Web Design. I’ve made a few changes to his typography, substituting the oh-so-trendy Helvetica where he used the more classic-looking Georgia. Just to be even more trendy, I’ve reduced the letter-spacing, to give the headers that squeezed-together look. However, Bryan’s layout is intact, and I think it will serve this site well.

Thanks very much to Bryan for the theme, and I look forward to hearing your suggestions and/or feedback, positive or otherwise.

CSS Grid Design Made Easy

Via ISO50 comes word of an excellent (and free) tool for grid-based CSS layout: Grid Designer 2, by Danish web developer Rasmus Shultz.

For anyone not yet on the grid, here are two nice introductory pieces, some more resources, and a couple of well-known systems.

Grid Designer 2 allows you to mock up a complete grid design online in a single open source script. Incredibly, it’s only three simple steps:

1. Columns

Input the number and width of the desired columns. Use the buttons, or type in numeric values. You can play with the gutters and margins to your heart’s content, while previewing live on screen.

2. Typography

Now it gets fun. Adjust the fonts, styles, leading, spacing, line height and more, again with live preview. Paragraph and H1 through H6 are all available.

3. Export

Are you kidding? Yes, unbelievably, we’re done. Grid Designer outputs the CSS style sheet and an html container, scalable if you wish. Copy it, use it, love it.

I’ve just begun playing with this, but as I’m sure you can tell, I’m pretty impressed. I’m sure the output will require some tweaking unless you want a straight-laced, magazine-style grid.

Also, despite the alert stating “NEW! Now supports designs with spanning columns!” it looks to me like you’d have to add these manually after the fact. If anyone can see that I’m missing something, please let me know.

In any case, Grid Designer 2 gets five stars so far, and I look forward to using it for real very soon. Thanks Rasmus!

Web-safe Fonts: the Beginning of the End?

Web-safe fonts.

A nice, friendly-sounding phrase; it’s even got that comforting word “safe” in the middle.

But for web designers, that phrase is as comforting as a straitjacket. For print designers, finding out about web-safe fonts is like learning there’s no Santa Claus. And if you’re just someone who appreciates the beauty of typography, you may just be wondering why the web is so damn ugly.

It’s those web-safe fonts.

Since 1996, when Microsoft designated the web-safe font families in their “Core fonts for the Web” program, designers have been restricted to a tiny group out of the tens of thousands of existing fonts.

Not only that, but designers are forced to specify a replacement in case the desired font is unavailable, and a last-resort font-family (e.g. “sans-serif”) for the worst-case scenario. This means you can never test all possible appearances of a page without knowing what fonts are installed on the user’s machine. That doesn’t exactly encourage bold, innovative design.

Perhaps most offensive to some was the inclusion of Arial, Microsoft’s copyright-avoiding knockoff of Helvetica, which is perhaps the best-loved font in existence, and even the subject of a full-length film of the same name.

Basically, web typography sucks and web-safe fonts are an ugly, constricting anachronism. But the end may be near; the Holy Grail of rich typography for the web could be around the corner.

There have been numerous attempts to solve the problem of web-safe fonts before. First was plain old image replacement, which did the job for large logos and the occasional headline. But unless properly tagged, they sent no information to screen readers or search engines, the text could not be copied/pasted, and entire pages were out of the question.

Then there were embedded fonts (too big), SiFR (a slow, complicated Flash workaround with accessibility issues), DTR (relies on server-generated images, basically a fancy version of simple image replacement), FLIR (an attempt at a better SiFR), and others.

Today, Smashing Magazine reports on upcoming CSS3 support for custom web fonts with the @font-face tag. This calls a font from a specific URL to be used in the page, just like a call to a remote script or stylesheet.

Actually, this isn’t really news, since it was first proposed for CSS2 and has been growing in support for some time. Safari users are already seeing it, and it’s planned for the next major update to Firefox. As usual, Internet Explorer lags behind, in this case due to Microsoft’s insistence on using their own “Embedded OpenType” technology…sound familiar?

But thanks to the rapidly-growing adoption of better browsers, designers may start designing for the best-case scenario, with a back-up plan for the worst – not the other way around.

Usage licenses still apply of course, and there is the obligatory intellectual property debate among font creators. Discussion of a universal web type library has already begun. But there are more than enough fonts available right now to give our tired eyes a rest from the stalest of the web-safe fonts, like Tahoma and Trebuchet.

Which means a whole universe of fonts will soon be appearing all over the web – just maybe in this new year.

Better 12 years late than never.