Finally, web browsers are becoming relatively standards compliant. The latest versions of Firefox, Safari, Chrome, Internet Explorer (IE), and Opera render web pages mostly the same. So I was surprised to find a case where Firefox and Opera were doing something different from the other browsers.
Granted, the difference is something most web pages will not encounter because I had enlarged the font size to a very large size. However, it does illustrate one of the cross-browser issues and a difference between print and web design. Web design is affected by a lot of factors outside of the control of the designer and developer.
So what is the difference that I found? Browsers have significantly different rules for font rendering. While not noticeable at regular font sizes they have impact at larger sizes. I was working on a web page that had very large type on it. Below is an image of the page.
When doing cross-browser testing, I noticed that the alignments of containers were off. That was caused by the width and kerning of the fonts being different. Here are some animated gifs showing the differences. Each shows one browser compared to another. Note that the grey border is used to register the two frames.
IE compared with Firefox
Firefox compared with Chrome
Firefox compared with Safari
Firefox compared with Opera
In the image above, you can see that Firefox and Opera are rendering the same. There is nothing shifting between the two frames.
Since Opera and Firefox are rendering the type the same, I won’t show comparisons of the browsers against Opera. But here are some other comparisons:
Chrome compared with IE
Safari compared with Chrome
Safari compared with IE
So what does it all mean? Well, for me it illustrates the futility of trying to make your web page pixel perfect between browsers and operating systems. The goal should be to come as close as possible within budget constraints and work to get each browser to render the design in an acceptable manner. There is likely to always be something that you will never be able to resolve, and you will just have to live with it.
For those who are interested:
| Firefox | Verson 31.0 |
| Safari | Version 5.1.7 |
| Opera | Version 12.16 |
| IE | Version 11.0.96.17239 |
| Chrome | Version 36.0.1985.143 m |
All tested on a Windows PC (Dell Studio XPS 8000) running Windows 7 Ultimate.
The font used is EB Garamond from Google fonts. The font size for the word “perfection” is 104 px.
To see the page used for the test visit http://ctec.clark.edu/~rwallace/class-exercises/poster2a.htm