Browser Warfare: Text Rendering

In the previous article, you got an idea of ​​the most common browsers. In this article we will analyze the work of browsers in their main function - text rendering. Whether you search, read a Wiki or write to 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’ll skip several pages through browsers and see which one is better at handling them. For testing, a machine with Windows XP was used 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 the result, offering a compromise between blurred and sharp edges. To be readable, the text should have smooth edges, but at the same time quite clear.

Header Render Test

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


')
When looking at H1, you can clearly see that Safari uses too strong blurring of the edges. The result of Internet Explorer, on the contrary, does not look smooth. Chrome, Firefox and Opera have the best result. Regarding Chrome, I didn’t like the fact that, for example, the symbols e and a have less intensity compared to the result of other browsers. As a result, for H1 and H2, the winners are Opera and Firefox. When considering H3, we have another winner - Internet Explorer. Compared to other browsers, Internet Explorer offers more readable text. Internet Explorer has achieved the same result in the rest of the headlines, where Opera, Firefox and Chrome show the same results, and Safari’s text is too blurred.

Ampersand test

To determine the best rendering abilities of the browsers, we created a simple test based on the ampersand symbol. For the test, an ampersand was chosen because it is a complex character. Depending on the font, there is a horizontal, rounded, beveled and straight line in the ampersand composition.


[ 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 ​​greater than 351px resulted in very primitive rendering with rough edges without smoothing. In this test, IE has the worst performance. As you can see, 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.


[ larger version ]

In this test it is very easy to determine the winner - this is Internet Explorer. Its rendering engine is 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 lame in text rendering. Its engine displays additional weight in fonts, making them heavier, degrading readability. Opera, Firefox and Chrome have similar behavior when displaying text.

Conclusion

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

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

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