Browsers War – Text Rendering
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.
Ampersand Test
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.
Conclusion
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.
Cheers!
IE 
Firefox 
Opera
Chrome
Safari
PS: You can check the initial article – Browsers War – Meet the Competitors
Andy Gongea is a passionate UI/UX designer with a great appetite for technology and trends. Currently he owns, a future wife, a loan that comes with a monthly fee and some strange ideas about user interface and user interaction. Cheers!25 Responses to “Browsers War – Text Rendering”
Trackbacks/Pingbacks
Additional comments powered by BackType
Internet Explorer looks better because it enable ClearType by default, you can turn that off, and Firefox, chrome using OS setting, if you turn off ClearType in your system, why should browser using ClearType for rendering?
As default ClearType is not active in Windows XP.
Safari has similar feature built in so I think that it is fair for Internet Explorer to use its ClearType feature.
Should mention that this is on Windows only. On other platforms, fonts are rendered differently.
Vadim, in the second paragraph you have the testing base. There you can read that the testing machine has Windows XP as operating system. Cheer!
This is a bit subjective I think. I much prefer Firefox’s text rendering to IE which tends to make my eyes ache because of cleartype.
I can understand some of the points you make (eg the ampersand test), but personally think Safari won the last test. Personal preference?
Yes James, you are right. The problem with screen text is that is not as comfortable for our eyes as text in a book. That is because on printed material all edges are something similar to vectors. So what all browsers are trying to do at a certain font size is to smooth it and make its margin clear.
Regarding the Safari context rendering, you should take a look and see how it adds weight to letters. Many normal fonts look bold on Safari. And that is wrong. Also, all that smoothing is good on big font sizes while at small it sucks.
Cheers!
Totally agree with you about Safari adding weight to the letters. That ain’t right. You don’t just fatten up letters like that.
I had clients asking me to make the headings “less in your face”. They were on a Mac of course.
Heh, and I remember seeing a speech of Steve Jobs ( http://www.youtube.com/watch?v=UF8uR6Z6KLc#t=3m45s ) where he was saying how fascinated he was about typography in college and how he used to attend typography classes even though he had dropped out… only to use all that knowledge later on.
I don’t get it. Chrome is using the same rendering engine as Safari, yet renders text so differently. How is that?
Chrome uses the same browser engine. That doesn’t hold them back to have their own setting for typography I believe.
Apple ported their CoreFoundation and CoreGraphics libraries for use on the Windows platform with Safari. These are the same libraries used to render text in Mac OS 10, so they’re obviously going to influence things when used on the other side.
These libraries aren’t included in either Chrome or Chromium.
Safari’s last!???!
Normally, when I have something lengthy to read online I will actually exit FF and open up Safari to read it, I love the way Safari renders text! And whenever I need to take a screenshot of one my websites I always use Safari, it makes everything look so awesome! By the way, “heavier text” !== “less readable”!
Why are you being so kind to IE!? All web designers/developers hate IE! I know, I know, the test is meant to be fair and unbiased but seriously, IE? First place!? This is all a bit subjective too!
Firefox honours the system Cleartype setting, IE doesn’t. That probably explains most of the differences you see between IE and Firefox. It doesn’t seem like a good idea to me to ignore the user’s preferences.
I’m sad that you didn’t do enough testing to notice that Firefox supports ligatures and kerning but the other browsers don’t.
Thanks for telling me that Robert. You are right about ligatures and kerning – sorry for that glitch -, although the test was a little more generic than specific.
Hi James, thanks for stopping by.
I agree with you that heavier text is not the same as less readable. I’m just curious – why does normal font look bold on Safari? What do you think about bold on Safari?
I’m not against IE and I’m not a fan. For daily use I prefer Firefox and on the second place Opera. But that doesn’t mean that IE8 is a bad choice. I know that IE6 was a pain in the buttocks but IE8 !== IE6.
Try something if you want. See how Google looks on both browsers. I guarantee you that unless you want something grunge, IE is the right answer. Personal opinion.
mate is that all a joke right?
there’s absolutely no doubt that anybody who studied typography a bit will tell you Safari and os x text rendering is based on similarity to particular typeface and readability. You should not compare browsers but compare actual typeface with rendered one. Safari – absolute winner.
Now just go back to the third picture and tell me objectively which one of the texts are the most readable…
Have you seen the latest version of Safari on Windows? Don’t know why but now the default rendering way for Safari is the same as other browsers on Windows. Maybe that should be the joke but it isn’t – that’s the real fact. Apple dropped their previous rendering method in favor of Windows default one.
In Windows, Safari’s font smoothing has four levels of adjustment. Which level did you guys use for your testing? I find the “standard” level to be too heavy, while the “light” setting works very well.
The standard one was used. All browsers were used as they are installed. I agree with too heavy.
Any graphic designer that has studied typography will agree that Apple products render text in a way that is most true to the original typeface when printed on a page. Microsoft’s method was developed for clarity on low resolution screens which basically don’t exist anymore. The pixel density of most modern LCDs is more than adequate for this distorting of typefaces in order to ‘snap’ them to the pixel grid should end. This is one of a multitude of reasons designers use Macs. I’m sure most people ‘prefer’ the Microsoft rendering method simply because it’s been hammered into their skull for years and is what they are used to.
Agreed with Noel. Looking at your examples, the superiority of the Safari examples is immediately obvious to me… which is to say, it’s subjective. Apple’s type rendering engine is designed to render letterforms to preserve their design intent, which does unfortunately have a tendency to bloat the letters slightly in many cases. Microsoft’s approach with ClearType was designed to maximize “legibility,” which usually means they simplify and distort the letterforms as necessary to minimize the degree of anti-aliasing necessary to render them (straight lines snap to full pixels, etc.).
The starker gamma settings of Windows contribute to the contrast and lack of subtlety in Windows type rendering as well. Browsing on a Mac using Firefox is a very different experience from doing the same on Windows.
There isn’t a right or wrong, just preferences and differing philosophies. Many people find Windows text rendering to be ugly, tasteless and inaccurate. Others who are used to how it looks may find Mac/Safari rendering to be heavy or blurry. People read best what they read most, as they say.
oh there is right and wrong… if it wasn’t, Guttenberg would probably never succeed with his invention. Because typography like this is all about readability (again).
On Linux, Opera has the best rendering engine by far!