Typophile

Font rendering differences: How do the big guys like Google manage to make it work?

majortom

I'm currently wondering how Google manages to make Roboto look pretty much exactly the same on different browsers. If you're wondering, have a look at it in Firefox, and then a webkit browser like Chrome:

http://www.google.com/nexus/4/

Now, here's a comparison to what it looks like on a test page I've set up:

The rendering in Safari makes the font unusable. So the question is:

How does Google do it? It seems like I'm missing something? At first I thought they might be serving different fonts, but I've checked, and they are identical. I feel like I'm missing something?

Any insights are greatly appreciated!

majortom

It seems like editing posts is not a feature here. Sorry for breaking the layout with that image, I didn't check and thought it was <600px wide.

Problem solved: I just realized that a webkit style was disabling subpixel antialiasing, which made the fonts appear much thinner compared to how they were rendered with subpixel antialiasing in non-webkit browser.

Pablo Impallari

I just realized that a webkit style was disabling subpixel antialiasing

Which one?

majortom

It was -webkit-font-smoothing: antialiasing;

James Michaels

> It seems like editing posts is not a feature here

You can edit posts, except for the 1st post that starts a topic.

majortom

Yes, thanks, I've figured it out. It was just unfortunate that I couldn't edit the image that breaks the layout.

Captured from web.archive.org on 28 May 2014. view this capture