There are subtle differences between the way different browsers on different operating systems render the exact same font. While it may not seem like a big deal, it can create big headaches as designers need to choose how to keep their design consistent accross platforms. Since the variation between what browser and operating system a user only becomes greater, I can only see this becoming a larger issue as more people use the different browsers.

While I’m not going to document the problem extensively here, as Chris Coyier over at CSS Tricks documented the rendering differences quite well and a quick look at my own website shows some of the symptoms, I would like to suggest a solution or two as I plan to implement them on my own site.

The above shows the subtle differences on my own site when I only change OS. While not an incredible change, those 3 or 4 pixels are terribly annoying every time I see them on my Windows box.

The Fix
Luckily, that specific problem I think I will be able to fix with a relatively small snippet of jQuery JS or PHP magic. While it will rely on the user-agent, which can easily be spoofed, it should be able to fix the issue for the majority of users. I’ll basically just be grabbing the user-agent OS / Browser, and inject some CSS into the page to adjust the padding / margins of whatever elements it affects. However, I don’t see this as a solution.

The Solution
My fix will be very site specific even though the principle idea can be applied to any site. A solution should fix it in one swoop, but I do not see that happening for some time. I think the only effective way to solve this issue would be to introduce a “Web Font Rendering Engine” that would have to be voluntarily introduced into each browser. Although solving the problem, this is less than ideal considering it would require a browser upgrade and eight years later people are still using IE 6.

The concept for the site revolved around a thought cloud to symbolize the free thinking and intellectual goals of the organization as requested by the coordinators Dr. Tapia and Dr. Ocker. The site’s minimalist design lays on top of a custom CMS system to make maintenance and updates to the site such as adding pictures, students, or forms easy for both myself and the two professors. I’ve had a great time working with both professors in reasarch and in the design process of this website. Below I’ve posted a few screen shots from the website along with a little tidbit about each.

The above page is used by the organization to list upcoming events as well as post pictures and information about events past.

The home page of the site, that also serves as the about page, draws information from the MySQL database that can be updated from the administration panel. There site administrators can manage page revisions and drafts to the site’s about page.

Just like the old engineer joke:

‘There was an engineer who had an exceptional gift for fixing all things mechanical. After serving his company loyally for over 30 years, he happily retired. Several years later the company contacted him regarding a seemingly impossible problem they were having with one of their multi-million dollar machines.

They had tried everything and everyone else to get the machine to work but to no avail. In desperation, they called on the retired engineer who has solved so many of their problems in the past.

The engineer reluctantly took the challenge. He spent a day studying the huge machine. At the end of the day, he marked a small “x” in chalk on a particular component of the machine and stated, “This is where your problem is”. The part was replaced and the machine worked perfectly again. The company received a bill for $50,000 from the engineer for this service. They demanded an itemized accounting of his charges.

The engineer responded briefly:

* One chalk mark $1
* Knowing where to put it $49,999′

Web designers, like engineers, are paid for their intangible expertise on the subject, something hard for non-experts to gauge or comprehend.