March 19, 2009

Improve Your Typography with PHP

I decided to give my personal blog a face lift last week using Ian Stewart's intelligent Thematic as a base. I created a child theme and tweaked some things here and there to give it my own look and feel. It was a lot of fun and a great learning experience.If you design and/or develop with WordPress and you haven't explored theme frameworks I would highly encourage you to do so. Thematic and WP Framework are good starting points... Really, I'm serious! Go investigate them.

Since it was my personal blog I decided to have a little fun with the typography. I changed the titles from Helvetica to Futura, and the main copy from Georgia to Adobe Garamond Pro. My font stacks for each are listed below:

h1.entry-title, h2.entry-title a { font-family:Futura, Helvetica, Arial, sans-serif; }

CSS font stack for the titles.

#content { font-family:"Adobe Garamond Pro", Georgia, "Times New Roman", serif; }

CSS font stack for the main copy.

No harm done, if the font doesn't exist then the next one in the stack is served. That's the beauty of CSS. The problem though is when someone using a PC visits and does have the font.

Windows... Oh dear.

The new typefaces appear nice on a Mac but sub-par at best on a PC.¹ You can view this difference in Figure 1.

Screen shot contrasting Mac and Windows text rendering.

Figure 1 Split screen shot of how the blog post appears on a Mac (top) contrasted with a PC (bottom). (Futura is not installed on my PC so, naturally, it does not appear in the screen shot.)

So the choice is to let the PC users suffer -- which they do, I remember reading Jeff Croft's site on a PC when he was using Minion Pro for body copy and it was an unpleasant experience, it's akin to trying to read a note after the entire thing has been erased just a little -- or to remove the "non-web" typefaces altogether.

Or you can serve different font stacks to different operating systems.

Typeface by OS

Thematic has a nice feature -- which was pioneered by Ptah Dunbar of WP Framework -- that assigns operating (and browser) specific class names to the <body> tag. If you visit davidyeiser.com and view the source you will see your current browser and the operating system in the list of <body> classes.

We can use these classes to serve separate font stacks for different operating systems. So now the font stacks in the style sheet appear a bit differently:

h1.entry-title, h2.entry-title a { font-family:Helvetica, Arial, sans-serif; }
body.mac h1.entry-title, body.mac h2.entry-title a { font-family:Futura, Helvetica, Arial, sans-serif; }

New CSS font stack for the titles.

#content { font-family:Georgia, "Times New Roman", serif; }
body.mac #content { font-family:"Adobe Garamond Pro", Georgia, "Times New Roman", serif; }

New CSS font stack for the main copy.

You can see the result in Figure 2 below.

Screen shot showing different type faces for different operating systems.

Figure 2 Split screen shot of how the blog post now appears on a PC (bottom) contrasted with a Mac (top) which is the same as before.

Now a happy compromise has been reached: The typeface can still be utilized but in instances where it would hurt readability it's replaced by an appropriate alternative.

Code Please?

If you'd like to get the code for this technique it's really simple. Go download Thematic or WP Framework and look at lines 137-204 in

/library/extensions/dynamic-classes.php

for Thematic and lines 117-180 in

/library/extend/semantic-classes.php

for WP Framework (the code for both is more or less the same).

You will of course have to adapt it accordingly for your own use as both of the above references are built in the context of a larger framework.

I began to get into the why of this, the history of type rendering and the progress made thus far but it started to be too daunting and began to outgrow the original intent of this post. If you'd like to explore for yourself you can view Jeff Croft's blog post for the redesign where he used Minion Pro as the primary typeface for the site copy; as well as Richard Rutter's article about type rendering on Macs published within the same week of Jeff's redesign launch. These were both published in December of 2006.