The fonts rendered by chrome and safari on windows PC are pretty bad compared to Firefox or IE. I've tried the text-stroke, text-shadow and font-smoothness methods but these haven't make them look any good.
So I made this web page : Font Test
Here visitors can easily change fonts and their sizes to check font rendering smoothness. I found that fonts have rugged edges until about 50px or so, after which they are smooth. Probably because the glyphs have larger curves then.
Is there a way to improve font rendering on chrome and safari (Windows) ?
Fonts can typically look poor if your environment does not have installed mime-types for that specific font. Hosting companies like GoDaddy and others can also provide hardships to some and require workarounds.
@chrisburton Depends on the typeface (which is why I made sure to state 'in some cases'). There have been a couple of cases for me recently where it improved the rendering in Chrome substantially (Chrome is notoriously bad anyway).
@chrisburton Yeah, my request got closed unfortunately. Apparently an account that has one tweet in two years is still considered active…
Oh, and here was were I most recently used that (inspect the italic text and toggle the transform to see the difference): http://jsfiddle.net/joshnh/XPSw7/show
Some typefaces appear a little too strong in Chrome on OS X, so I use this trick to combat that.
@joshuanhibbert Lame. I wonder if they at all have used the account for Direct Messaging.
What a significant difference between OS X and Windows font rendering. On Windows, it makes the font look worse (pixelated) but better on OS X. So in that case, I'd probably target OS X specifically (if possible).
Thanks for your responses. I wonder if chrome is able to access the windows' font smoothing technology --cleartype. The same fonts render differently on chrome and on IE10 or Firefox.
@joshuanhibbert translateZ(0) seems to smooth out edges a little but the font seems a little blurred then.
Hoping to either find a universal fix that fixes all fonts in chrome or that Google fixes this issue themselves in their next release. I just wonder why this is not already fixed, given, the sheer number of people working behind webkit.
The fonts rendered by chrome and safari on windows PC are pretty bad compared to Firefox or IE. I've tried the text-stroke, text-shadow and font-smoothness methods but these haven't make them look any good.
So I made this web page : Font Test Here visitors can easily change fonts and their sizes to check font rendering smoothness. I found that fonts have rugged edges until about 50px or so, after which they are smooth. Probably because the glyphs have larger curves then.
Is there a way to improve font rendering on chrome and safari (Windows) ?
-webkit-transform: translateZ(0);can help in some cases.I think Josh's method actually makes it worse.
I prefer Chrome when using webfonts that have a weight of 100 to 300. Also, Chrome renders Georgia much better than Firefox on Windows.
See testing
Fonts can typically look poor if your environment does not have installed mime-types for that specific font. Hosting companies like GoDaddy and others can also provide hardships to some and require workarounds.
http://stackoverflow.com/questions/7415640/correct-apache-addtype-directives-for-font-mime-types
@chrisburton Depends on the typeface (which is why I made sure to state 'in some cases'). There have been a couple of cases for me recently where it improved the rendering in Chrome substantially (Chrome is notoriously bad anyway).
@joshuanhibbert Would love to see a simple test case of that theory without other CSS3 features (transforms, transitions, perspective).
Mine: http://codepen.io/chrisburton/pen/hdbBc
By the way, someone I helped just before you on that Twitter handle, had his changed last week.
@chrisburton Yeah, my request got closed unfortunately. Apparently an account that has one tweet in two years is still considered active…
Oh, and here was were I most recently used that (inspect the italic text and toggle the transform to see the difference): http://jsfiddle.net/joshnh/XPSw7/show
Some typefaces appear a little too strong in Chrome on OS X, so I use this trick to combat that.
Here's an example for those that aren't on OS X:
Chrome's rendering:
Fixed:
@joshuanhibbert Lame. I wonder if they at all have used the account for Direct Messaging.
What a significant difference between OS X and Windows font rendering. On Windows, it makes the font look worse (pixelated) but better on OS X. So in that case, I'd probably target OS X specifically (if possible).
@chrisburton Yeah, it's definitely a problem, and one that only Chrome seems to have :(
Thanks for your responses. I wonder if chrome is able to access the windows' font smoothing technology --cleartype. The same fonts render differently on chrome and on IE10 or Firefox.
@joshuanhibbert translateZ(0) seems to smooth out edges a little but the font seems a little blurred then. Hoping to either find a universal fix that fixes all fonts in chrome or that Google fixes this issue themselves in their next release. I just wonder why this is not already fixed, given, the sheer number of people working behind webkit.
@sanygeek I doubt it will be fixed overnight; it has been an ongoing problem for many versions :(
Chrome should be switching to DirectWrite soon.
@chrisburton I think they have been using it since version 22, and in my opinion, it has made the problem worse, not better.
@joshuanhibbert I don't believe so. OS X already supports DirectWrite however, Chrome (on Windows) does not. Right now it supports ClearType.
@chrisburton Ah, right, it seems we are talking about different operating systems!
This directWrite thing really seems to be the ray of hope. Here's what a Chromium-Dev guy has to say about this: DirectWrite Plans
Apparently Firefox and IE are already using this windows technology, I guess that explains their smooth font rendering.
Hey I found an article on www.smashingmagazine.com that quite explains this whole thing. A closer look at font rendering
And here's an article on DirectWrite itself.
:)