CSS woes at eBay

I don’t generally pay a ton of attention to web typography, but I must have it on my mind after building a new backend for our replicated sites.  I spotted this on an eBay order confirmation screen this morning:

Yes, that’s three different fonts for three different headers… on the same page.

The first is an H2 of class “g-m0 g-m dsp” that just inherits the body’s “Arial,Helvetica,sans-serif” font-family.

The second is another H2, this one with class “h2Titles”.  It gets font-family “Trebuchet” — which apparently I don’t have installed on my machine, because I see the crappy default Times New Roman.  (Yes, they specified exactly one font — incorrectly.  Apparently they haven’t heard of font stacks.)

The third H2 is probably what they wanted for all of these.  It has class “h2Title” (as opposed to “h2Titles” above) and gets the correct font “Trebuchet MS”.

What a mess.  This is one of the biggest e-commerce companies in the world and they can’t get their CSS right.  (This isn’t exactly bleeding-edge web technology, guys — the font-family part of the CSS spec came out 14 years ago.)

Here’s how they could have prevented this train wreck of a page.  First, set up a CSS reset that hits every single H2 (and anything else that you may want to look good) with a solid definition.  Next, add some progressive enhancement to certain H2s by adding a class.  Third, check that the specified font rules are actually doing something to the intended target (as in the number 2 “Trebuchet” case above).  Finally, at the very least, give your page a quick once-over to make sure that everything looks as you intended.

At least they all got the same color — #5D5D5D looks pretty nice.

This entry was posted on Friday, January 14th, 2011 at 7:31 am and is filed under Programming. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply