Browser War: Text Rendering

In the previous article, you got an idea of ​​the most common browsers. In this article, we analyze the work of browsers in their main function - rendering text. Whether you search, read the Wiki, or write a blog, you interact with the text and pay attention to it. And if so, then let's see how browsers cope with this task [text rendering].

For this test, we will skip several pages through browsers and see which one handles them better. For testing, we used a machine with Windows XP without ClearType enabled. All pages used for tests contained XHTML 1.0 Strict Doctype. We also need to determine the required results when testing text rendering. The best solution should be a result that offers a compromise between blurry and sharp edges. To be readable, the text must have smooth edges, but at the same time quite clear.

Header Rendering Test

In the first test, we use 6 HTML headers. We want to see how browsers render simple HTML headers without any CSS styles.



When looking at H1, you can clearly see that Safari uses too much blurring. The result of Internet Explorer, on the contrary, does not look smooth. Chrome, Firefox and Opera have better results. Regarding Chrome, I did not like the fact that, for example, the characters e and a have a lower intensity compared to the result of other browsers. As a result, Opera and Firefox are the winners for H1 and H2. When considering the H3, we have another winner - Internet Explorer. Compared to other browsers, Internet Explorer offers more readable text. Internet Explorer achieved the same result in other headers, where Opera, Firefox and Chrome show the same results, while Safari's text is too blurry.

Ampersand test

To determine the best rendering capabilities of browsers, we created a simple test based on the ampersand symbol. An ampersand was chosen for the test because it is a complex symbol. Depending on the font, the ampersand composition has horizontal, rounded, beveled and straight lines.


[ larger version ]

In this test, the absolute winner is Safari. Safari is the only browser with exceptional rendering even at values ​​over 351px. In all other browsers, values ​​over 351px led to very primitive rendering with rough edges without smoothing. IE has the worst performance in this test. As you can see by looking at the picture, the rendering engine is not capable of displaying the symbol acceptable.

Text block test

This test consists of three blocks of text with different fonts. We used the popular fonts Arial 13px, Verdana 13px and Georgia 15px.


[ enlarged version ]

In this test it is very easy to determine the winner - this is Internet Explorer. Its rendering engine is the most balanced in displaying a variety of fonts. Even for low values ​​like 13px, IE offers a nice blur effect. Contrary to popular belief, Safari is miserable [is lame] in rendering text. Its engine displays extra weight in fonts, making them heavier, impairing readability. Opera, Firefox and Chrome have similar behavior when displaying text.

Conclusion

Each browser has its own disadvantages and advantages, but I would not say that they are all the same, on the contrary. The browser that has proven itself to be the best in text rendering tests is Internet Explorer. It is noticeable that Microsoft has hopes for its product and its future. Well done! [Kudos!]

The second place is taken by Firefox and Opera, which, with slight differences, have approximately the same rendering capabilities. In third place is the rookie Chrome. And last in terms of text rendering is Safari.

Here you can read the first article about the browsers used in testing.