css Arial Font pixelated on wordpress

Question

I have read how chrome renders fonts and the differences between other browsers etc. But recently I came up with a interesting scenario.I have two files. One is a wordpress page where the font is used in header. Other is static html page with same code. On static html page the text Restaurant Appliance Parts appears smoothly. But same browser and wordpress page the font is pixelated. What could cause this problem?

Here is CSS:

font-size: 60px;
line-height: 70px;
font-family: Arial;

Here is the image showing the problem.IFyou notice p and n and a you can see pixelated. Here is the demo - HTML File: http://restaurantapplianceparts.com/dev/wp-content/themes/vizio/test.html

Wordpress page: http://restaurantapplianceparts.com/dev/

I am using chrome on windows.

Regards Ahmar

Answer 1

If we zoom-in the screen-shots (making sure that we do not resample the images) we can see that both sites display the same font, with the same colour and an appropriate anti-aliasing:

I suspect that this is nothing but a visual effect caused by the different decisions taken by the font rendering software when faced with identical texts in different contexts. For instance, the first sample fits exactly in a horizontal baseline but displays more artifacts in vertical lines. But they both look correct solutions to smooth text; it's only that human brain finds one of them more comfortable.

Apparently, there used to be a -webkit-font-smoothing CSS selector in Chrome but it's no longer available.