{"id":685,"date":"2011-01-14T07:31:09","date_gmt":"2011-01-14T14:31:09","guid":{"rendered":"http:\/\/www.curtisgibby.com\/blog\/?p=685"},"modified":"2016-05-11T06:44:08","modified_gmt":"2016-05-11T12:44:08","slug":"css-woes-at-ebay","status":"publish","type":"post","link":"https:\/\/www.curtisgibby.com\/blog\/2011\/01\/css-woes-at-ebay\/","title":{"rendered":"CSS woes at eBay"},"content":{"rendered":"

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.\u00a0 I spotted this on an eBay order confirmation screen this morning:<\/p>\n

\"\"<\/a><\/p>\n

Yes, that’s three different fonts for three different headers… on the same page.<\/p>\n

<\/p>\n

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

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

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

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

Here’s how they could have prevented this train wreck of a page.\u00a0 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.\u00a0 Next, add some progressive enhancement to certain H2s by adding a class.\u00a0 Third, check that the specified font rules are actually doing something to the intended target (as in the number 2 “Trebuchet” case above).\u00a0 Finally, at the very least, give your page a quick once-over to make sure that everything looks as you intended.<\/p>\n

At least they all got the same color — #5D5D5D<\/span> looks pretty nice.<\/p>\n","protected":false},"excerpt":{"rendered":"

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.\u00a0 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.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[102,126,35],"class_list":["post-685","post","type-post","status-publish","format-standard","hentry","category-programming","tag-css","tag-ebay","tag-fonts","entry"],"_links":{"self":[{"href":"https:\/\/www.curtisgibby.com\/blog\/wp-json\/wp\/v2\/posts\/685","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.curtisgibby.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.curtisgibby.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.curtisgibby.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.curtisgibby.com\/blog\/wp-json\/wp\/v2\/comments?post=685"}],"version-history":[{"count":7,"href":"https:\/\/www.curtisgibby.com\/blog\/wp-json\/wp\/v2\/posts\/685\/revisions"}],"predecessor-version":[{"id":819,"href":"https:\/\/www.curtisgibby.com\/blog\/wp-json\/wp\/v2\/posts\/685\/revisions\/819"}],"wp:attachment":[{"href":"https:\/\/www.curtisgibby.com\/blog\/wp-json\/wp\/v2\/media?parent=685"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.curtisgibby.com\/blog\/wp-json\/wp\/v2\/categories?post=685"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.curtisgibby.com\/blog\/wp-json\/wp\/v2\/tags?post=685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}