We recently launched a new site for a client and, while they are happy with it, they asked some pretty pointed questions about why it looked different in different browsers. As I put together my response, I realized that they’re probably not the only ones wondering why their site shows some minor differences in different browsers.
First off, while you may test your site in multiple browsers, the average user of the site is not going to look at the site in three different browsers at the same time so the inconsistencies you may see are not going to be apparent to your visitors. By and large, people have one favorite browser they use. Even if they were to use another browser to look at the site, they likely wouldn’t do that at the same time.
Why the site displays differently in different browsers is a more important consideration.
A good place to start is with a definition of what an “internet browser” actually is. Here’s a good quote to define a web browser:
Your Web browser is a translation device. It takes a document written in the HTML language and translates it into a formatted Web page. The result of this translation is a little like giving two human translators a sentence written in French and asking them to translate it into English. Both will get the meaning across, but may not use the same words to do so.
Fonts are going to appear differently in different browsers. Period.
On some sites, you’ll see navigation, content headers and other items that look crisp, clean and consistent no matter what browser. Many times, these elements are images, not fonts, so they will look exactly the same no matter which browser they’re viewed in. They won’t be affected by individual font rendering. However, this is all very BAD for Search Engine Optimization (SEO) and getting found online.
There are some very traditional web-safe fonts, like Times New Roman and Arial. With websites, your main content should be a sans-serif font. There are studies upon studies that show that sans-serif fonts are more readable as body copy online, exactly the opposite of a printed piece.
Since TNR is one of the most basic, web-safe fonts, it should render nearly perfectly in all instances. However, other web-safe fonts, like Arial, still do render differently in different browsers. (We had an issue with Arial in Chrome on another site recently.)
Even in traditionally web-safe fonts like TNR and Arial are rendered differently in different browsers because they all use different rendering engines. So, even though you specify a certain font in your style sheet, you can’t FORCE the browser to render the font the same as another browser does.
It’s possible that one engine ignores the bolding on a particular font, or simply doesn’t render it AS bold as another rendering engine.
What we did to give the client’s site a more custom and designed look was to use one of the Google Web Fonts from the Google Font Project to render fonts outside the standard web-safe fonts. It’s possible that rendering hasn’t caught up to all these new fonts available for websites.
Now that we have a great choice of fonts that can be used on websites, it becomes clear that the translation of a design into pixels is not something that happens naturally or consistently. OS makers apply different strategies to render how typefaces are displayed, and these have evolved greatly over time (and still continue to do so). As we now look closer at fonts on screen more than ever before, we realize that the rendering of these glyphs can differ significantly between systems and font formats. What’s more, it has become clear that even well-designed fonts may not look right on Windows if they are missing one crucial added ingredient: hinting.
Additionally, the PC will display fonts lighter than the MAC because there is a difference in font scaling on the MAC versus the PC. Below is an image to demonstrate Times New Roman on Windows (left) and Mac OS (right) scaled over whole point sizes.
Font scaling on Windows (left) and Mac (right); Times New Roman scaled over whole point sizes
When it comes to how a site displays in different browsers, it’s important to understand that each browser interprets layout elements such as pixel width, table spacing, padding and floats differently; it’s that “translation” issue at play again.
Layouts become difficult to match perfectly across browsers and Operating Systems (OS). Traditionally the web developers’ job has been to create a layout that doesn’t NOT work in any one browser. A win has been something that degrades gracefully for older platforms and matches the original design intent as closely as possible.
One quirk we’ve come across recently: Internet Explorer 8 will not render drop shadows, which is a newer CSS property. We’re ok with that, though, since fewer than 8 percent of people who browse the Internet use IE8 or lower.
Although it’s a common misconception, Internet Explorer is absolutely not the most used browser. According to the W3 Consortium statistics, as of July 2012, only 16.3 percent of users still use some version of IE while 33.7 percent use Firefox, 42.9 percent use Chrome, 3.9 percent use Safari and 2.1 percent use Opera.
W3C also indicates that of the 16+ percent people still using Internet Explorer, only 7.7 percent of them use IE8 or lower. When it comes to how a site displays in IE, we focus on IE9 and work to build something that degrades gracefully in older versions.
I hope that’s helpful in understanding why you may see variations in your website between different browsers.