3 ms·

So what is the solution here? I'm sure its not that I should be running IE9 :-) I'm experiencing the same problem rendering the site on Chrome in Windows 7. I

by kcima 15y ago

So what is the solution here? I'm sure its not that I should be running IE9 :-) I'm experiencing the same problem rendering the site on Chrome in Windows 7. I tried running through the ClearType tuning thing - with no success. However, it appears that Chrome on Windows is the problem here, as it also renders fine in Windows Firefox. Chrome and Firefox in Ubuntu works fine as well. Here is a Windows 7 comparison of Chrome vs Firefox rendering: http://i.imgur.com/Qq05Z.png http://i.imgur.com/Qq05Z.png

fistofjohnwayne 15y ago
This is getting interesting. For me on Windows 7 Firefox (both 7.0.1 and the current Beta version), Chrome, Safari and Opera all have this issue while IE9 does not. Which version of Firefox are you running? Edit: Additionally, if I use the so-called "F12 Developer Tools" in IE9 to switch the browser mode to IE8 the font will have the same problem. Edit 2: I found this article http://www.owlfolio.org/htmletc/legibility-of-embedded-web-fonts/ http://www.owlfolio.org/htmletc/legibility-of-embedded-web-f... - I also found a few references to being able to activate hinting for the fonts used in the embedding process. Not sure what the options are from TypeKit (the service used on this site) and I can't check on my own TypeKit account as their website is currently down for maintenance.
- kcima 15y ago
  The version in the screenshot is 7.0.1. Now I am realizing that Chrome is rendering lots of sites without anti-aliasing, not just bootstrappingdesign.com. Just something about that site made me notice it.
- studiofellow 15y ago
  I only see the issue in Chrome and IE < 9. (Fresh install of Windows 7 via boot camp. No ClearType tweaks.) Typekit does provide samples of how the fonts render in various browser/OS combinations: https://typekit.com/fonts/calluna https://typekit.com/fonts/calluna (Click "Browser Samples" tab.) It's definitely a limitation of @font-face and something I should have accounted for in the design. Apologies for poor legibility.

by kcima 15y ago

fistofjohnwayne 15y ago

This is getting interesting. For me on Windows 7 Firefox (both 7.0.1 and the current Beta version), Chrome, Safari and Opera all have this issue while IE9 does not. Which version of Firefox are you running? Edit: Additionally, if I use the so-called "F12 Developer Tools" in IE9 to switch the browser mode to IE8 the font will have the same problem. Edit 2: I found this article http://www.owlfolio.org/htmletc/legibility-of-embedded-web-fonts/ http://www.owlfolio.org/htmletc/legibility-of-embedded-web-f... - I also found a few references to being able to activate hinting for the fonts used in the embedding process. Not sure what the options are from TypeKit (the service used on this site) and I can't check on my own TypeKit account as their website is currently down for maintenance.

kcima 15y ago
The version in the screenshot is 7.0.1. Now I am realizing that Chrome is rendering lots of sites without anti-aliasing, not just bootstrappingdesign.com. Just something about that site made me notice it.
studiofellow 15y ago
I only see the issue in Chrome and IE < 9. (Fresh install of Windows 7 via boot camp. No ClearType tweaks.) Typekit does provide samples of how the fonts render in various browser/OS combinations: https://typekit.com/fonts/calluna https://typekit.com/fonts/calluna (Click "Browser Samples" tab.) It's definitely a limitation of @font-face and something I should have accounted for in the design. Apologies for poor legibility.