I just started coding my own website, and since I love typographic web design I was trying to use a really big custom font for the logo. Unfortunately during my testing on Safari using a MacBook Pro with Retina displays I noticed that there were some artifacts in the font rendering :/ First I thought there was some mistake on my part, but then I discovered that it happens with any font if it is big enough…
This behavior is visible on websites like http://fittextjs.com where the outline of the title is not correctly rendered. For anyone without a retina display here’s a screenshot of what I’m talking about http://cl.ly/JL0j
Odd enough this strange bug isn’t present on Chrome, and since they’re both Webkit based I thought that maybe the latter is using a CSS default that renders text correctly.
Any CSS guru that knows how to solve the situation before me filling a rdar 🙂 ?
UPDATE: I should note that I already tried using -webkit-font-smoothing: antialiased; and it doesn’t work :/
I filled a radar about it yesterday and got an answer today (never got a response so fast!).
Apple engineers are aware of it and consider it a serious bug, so I hope it’ll get fixed soon. In the meantime there’s no workaround available apart from using images :/