Posted: July 22, 2011
This afternoon, I noticed that one of the fonts was very “bold” in Firefox compared to Chrome. I’ve known that there are differences in how each browser and platform renders fonts on webpages (amongst the many other differences) but I was surprised to see how different a font like Arial looked. Here are the results:
Firefox appears to make the text much bolder than the others even though the code was exactly the same and using the most common font, Arial.
It is important for designers and marketers to keep in mind that web design is different from traditional designs on a canvas and what you might see in a mockup done in Photoshop may be slightly different from what the website displays in different browsers. Several options have been developed to fix many of the display issues but many of these options are often bulky, add load times to your website, and can be detrimental to SEO.
However, as a web developer, it is still surprising to see such a difference in how something as simple as fonts are rendered from browser to browser.
Leave a Reply