I often see web apps using Material Design these days. And Material Design can be quite awesome and look beautiful. However, I often see apps using it, and I just can’t look at it. Something in the font rendering that looks plain ugly to me. I’m not sure if I’m just a freak in those details, or that it is something very specific to OS X screen rendering, and that therefore the one designing the app, just has no idea.

I will give you an example, so that you can judge yourself:

If you compare this to the font rendering at Medium, that is huge difference in my eye. Feel to free to disagree of course! Is it just that I find the Roboto font ugly? Actually, it seems to look sometimes quite okay. Huh? So I have been playing with style sheets, and I think I understand why.

Tip 1: -webkit-font-smoothing:antialiased;

Apply the following stylesheet:

-webkit-font-smoothing: antialiased;

This makes quite a difference on OS X:

Tip 2: Use a lighter black

Using a some what lightened black also helps:

color: #333

This already looks solid to me. This doesn’t hurts my eye anymore.

Bonus: Use a lighter font-weight

Google provides many different font-weights for Roboto, setting the font weight to 300, give the following result:

font-weight: 300;

Well, this I can look at. Suddenly Roboto looks here like a well designed font.

Short post, but I hope it helps someone with the same taste for fonts :)