3

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. enter image description here 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

Ahmar Ali
  • 1,038
  • 7
  • 27
  • 52
  • I don't see any changes. What is the device resolution ? Can you embed screen shots – DhruvJoshi Jan 31 '14 at 11:20
  • I can appreciate that the font smoothing looks sharper in the live site but Chrome is definitively applying antialising on both sites. I suspect it's just a purely random effect. – Álvaro González Jan 31 '14 at 11:26
  • @ÁlvaroG.Vicario I have added the image to the post also. Why the difference in rendering or smoothing when the code is same? – Ahmar Ali Jan 31 '14 at 11:27
  • @DhruvJoshi Image added – Ahmar Ali Jan 31 '14 at 11:31
  • Try the help here- https://support.google.com/chrome/answer/95290?hl=en – DhruvJoshi Jan 31 '14 at 11:35
  • Antialiasing is not hard-coded, it's an algorithm. I don't think you can get the same pixel-by-pixel rendering on two different documents. It also never hurts to [have valid HTML](http://validator.w3.org/check?uri=http%3A%2F%2Frestaurantapplianceparts.com%2Fdev%2F&charset=%28detect+automatically%29&doctype=Inline&group=0) though I don't think that's the reason. (Whatever, I don't have a exact answer, thus why I post this as comment.) – Álvaro González Jan 31 '14 at 11:37
  • @ÁlvaroG.Vicario but if this is random shouldn't it apply different effect every time page is loaded?Thanks for posting. Can you please vote the question up so others can see? – Ahmar Ali Jan 31 '14 at 11:42
  • @DhruvJoshi Thanks for posting. Can you please vote the question up so others can see? – Ahmar Ali Jan 31 '14 at 11:42
  • Alright, I didn't mean random. I meant "completely different when input data changes". – Álvaro González Jan 31 '14 at 11:50

1 Answers1

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:

500%

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.

Community
  • 1
  • 1
Álvaro González
  • 142,137
  • 41
  • 261
  • 360