Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I am auditioning fonts on google web fonts and one that I was discounting was Ubuntu because it looked a bit jagged ( screenshot below taken straight from google); however afterward I read an article where it was mentioned as a good choice, and there was a screenshot where it looked really good ( to me anyway ). I am using windows 7 and have tried looking at it in chrome and firefox. I notice the same thing with some other fonts but this one is a good example because it looks perfect in the screenshot but not so good when I look at it on their site. I know this essentially is a question about setting my computer, but I thought that this would be the best place to pose the question: Is there something wrong with the settings on my machine seeing as it's obviously not showing the font the same on my computer as it did when the article writer downloaded it and used it in an image.


The screenshot from Google ...

screenshot from Google

The screenshot from the article above ...

screenshot from the article above

share|improve this question
add comment

3 Answers 3

I have spent a few hours on this as well, and yes, check your fonts on Windows Firefox. On my setup (FF 13, Windows XP) every Google font seems aliased - must be the ClearType thing, but some fonts are a lot better than others. Compare Chau Philomene One to Francois On -

http://clients.idea-bureau.com/font3.gif

and Francois One actually looks decent at smaller sizes.

I found that Vernon Adams' (designer of Francois One) fonts generally look ok and Open Sans looks practically perfect. I guess they did whatever they needed to do for the fonts to look good on Windows.

share|improve this answer
    
somadesign.ca/demos/better-google-fonts - links to both fonts in my screenshot –  Natalia Jun 6 '12 at 17:29
add comment

Try out different Rendering Modes

http://trentwalton.com/2010/06/29/css-text-rendering/

http://blog.typekit.com/2011/01/26/css-properties-that-affect-type-rendering/

edit: one more real good one for great justice : https://developer.mozilla.org/en/CSS/text-rendering

share|improve this answer
    
I did try that but I don't think text-rendering makes any claims on anti-aliasing, does it. I thought it was mainly to do with kerning and ligatures and geometric precision. developer.mozilla.org/en/CSS/text-rendering. Also I am thinking ( perhaps incorrectly ) that this is to do with the settings on my computer because I would have thought that Google would have the fonts displaying as best as they possibly could on Google Web Fonts –  byronyasgur Apr 25 '12 at 16:26
    
font.ubuntu.com - How does that perform? In chrome I am seeing a very smooth font @ size 48. As well as the Ubuntu font via the link & google, also appear very smooth for me in Chrome. –  Brandt Solovij Apr 25 '12 at 17:09
    
The more I study/experiment with this the stranger it gets. It seems it's a browser/os issue in any case. Anyway, css text-rendering seems to have no effect that I can see on either FF or Ch, but I think maybe text-rendering and font-smoothing may have no effect on windows m/cs. Also I could be wrong but it seems that lately both have been improving with FF initially better, but the reverse being true at the moment. At least when I google it I find a while back the comments were more positive about FF but on my machine now chrome works better .. strange thing is that 49px is good but 48 is not –  byronyasgur Apr 25 '12 at 17:20
    
add comment
up vote 1 down vote accepted

I have spend a good few hours looking at this and I thought I would share my findings. I can't guarantee these points are correct but it's the way it appears to me so I would appreciate corrections/additions to this in the comments if anyone thinks they know better.

  • The font in question looked perfect in GIMP so the issue must be a browser issue.
  • The browser issue seems to only occur noticeably in "Windows" ( and maybe "Linux" ) machines. Browser font rendering is at the mercy of the operating system and OSx apparently does a much better job at this than anything else.
  • Firefox has made some attempts to help/override "Windows", though I think it may still be not so good, even though it seemingly was an improvement at the time.
  • No browser on "Windows" renders fonts as well as GIMP - I presume PS does better again
  • Chrome renders these much better than FF - Lots of information on the web suggests that Chrome is terrible but I think that must be referring to an older (ie pre 2011) version of Chrome or something as I have loaded the same font in both browsers side by side and Chrome is noticeably better.
  • IE9 renders better than FF but not as well as Chrome ( current versions )
  • Below 49 pixels Chrome's rendering is not exactly awesome either, this is at it's worst in the 20-48 pixel range. To my eye rendering above 48px is nearly perfect
  • Css3's font-smoothing has no effect on windows machines.
  • There is a text-shadow hack out there but I think it too has no effect on windows machines, though I think this may be something to do with browser versions
  • There doesn't seem to be a huge awareness of how badly some fonts display on windows machines among the design community who often are mac users
  • Certain web-fonts deal with windows better than others, explained below by Tim Brown, quote take from this website

TrueType instructions are an expensive, time-consuming effort that requires specific knowledge, patience, and technical and aesthetic aptitudes. Web fonts that have TrueType instructions tend to look very good on Windows; those without often do not.

Taking the above into account my own plan will be to select (or at least check) my fonts using FF on a Windows machine rather than on Chrome or on a Mac. For headlines it seems to be much better to go to >48px if the design allows.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.