In the first post from this benchmark, you received the basic details about the most competitive browsers on the market. In this one, we will analyze browsers for one of their main function – text rendering. Whether you are searching on web, reading on Wikipedia or blogging, your main interaction and focus is text. So let’s see how browsers deal with this.
For this test we will run all browsers through several web pages and see which one is the best. The machine used for testing has Windows XP as operating system without ClearType enabled. All the internal sample pages that will be used will have a XHTML 1.0 Strict Doctype. Also, we will need to set a goal for this text rendering. The best solution is somewhere in the middle between smooth and sharp edges. The text needs to be smooth around the edges but sharp enough to be legible.
Headings Rendering Test
In this first test we will use the 6 headings from HTML. We want to see how these latest browsers render the basic HTML headings without any other CSS styles.
In Heading 1 you can clearly see that Safari has way too much blur around the edges. Also Internet Explorer looks somehow unpolished. Chrome, Firefox and Opera are in the best position. Regarding Chrome, I don’t like the fact that some letters have less intensity than others: for example: e or a. So, for Heading 1 and also for Heading 2, our winners are Firefox and Opera. For Heading 3 we have a new winner, which is Internet Explorer. Compared to all other browsers, IE delivers the most legible text. And it does it for the rest of the headings, where Opera, Chrome and Firefox have the same text rendering and Safari has the same blurry text.
In order to test better the rendering capabilities of web browsers, we’ve made a simple test based on the ampersand character. The reason for this test is that ampersand is one complex character. In ampersand’s composition we have horizontal line, rounded line, oblique line and even vertical line depending on font family.
In this test there is one absolute winner and that is Safari. Safari was the only browser with exceptional rendering even on values over 351px. In all other browsers, any value over 351px has a very primitive rendering with rough edges and no smoothing. Also in this test IE has the worst capabilities. The rendering engine was not able to render the character properly as you can see in the image.
Block of Content Test
This test is composed of 3 blocks of content with different font-families. Based on their popularity we have: Arial 13px, Verdana 13px and Georgia 15px.
In this test it was easy to decide the winner – it is Internet Explorer. Its rendering engine is the most balanced in displaying common font families. Even for low values like 13 pixels, IE has a nice smooth effect. Contrary to popular belief, Safari is lame at text rendering. Their engine displays additional weight in fonts making them heavier and less readable. Opera, Firefox and Chrome have similar behavior in displaying common text content.
Every browser has its drawbacks and advantages, but I will not say that all of them were equal, because they weren’t. The best browser in the text rendering tests is Internet Explorer. It is clear that Microsoft is focused on this product and its feature. Kudos!
In the second place we have Firefox and Opera which have similar rendering capabilities with some differences. On the third place we have the new kid in town – Chrome. And in the last place in the text rendering section – Safari.
PS: You can check the initial article – Browsers War – Meet the Competitors