4 ms·

Font rant: year 2012, Windows still cannot nicely render (most) embedded web fonts. Font rendering in my various browsers-> Chrome: horrific, Firefox: pretty b

Font rant: year 2012, Windows still cannot nicely render (most) embedded web fonts. Font rendering in my various browsers-> Chrome: horrific, Firefox: pretty bad, IE9: better, but still bad. All MS has to do is put together a designer with good sensibility and one brainy dedicated developer, and have the developer tweak font code until the designer is satisfied and font rendering is just as good as Mac. Boom, the world on the web instantly becomes more beautiful for millions of people, or whatever. One big reason designers like Mac is the font rendering. Everything is wonderful over there. Anywho, carry on.

keithpeter 15y ago
http://dl.dropbox.com/u/8403291/design-page-screen-grab.png http://dl.dropbox.com/u/8403291/design-page-screen-grab.png How does the font rendering here compare? Its Firefox on Ubuntu 12.04 (actually using Gnome Shell). I've always found Ubuntu font rendering different to other GNU/Linux distributions, and I prefer it.
- intended 15y ago
  This is how it looks like on chrome running on windows with default settings. http://dl.dropbox.com/u/17182392/Bad%20Fonts.png http://dl.dropbox.com/u/17182392/Bad%20Fonts.png
  - keithpeter 15y ago
    http://dl.dropbox.com/u/8403291/design-page-windows7-explorer9.png http://dl.dropbox.com/u/8403291/design-page-windows7-explore... What we get on our Windows 7 / Explorer 9 desktops at work. I actually can't see too much difference between this and the grab from Ubuntu/Firefox. If you can see obvious differences, now you know what you are up against when you talk to non-designers like me.
    - intended 15y ago
      Mine is hideous - the absolutely terrible rendering of corners and curves - it makes pages like this abhorrent to read. I should have made that clear - yours looks great comparatively and yes the ie9 and FF versions are close to each other comparatively.
- fiatpandas 15y ago
  If I'm judging your screenshot on aliasing/rendering alone, it's very nice (Mac-tier). However, when I look at your screen, I can't help but notice how big everything is on the page. Did you change default font size settings in FF? Could be a GTK issue as well. Text is being occluded in the red circles; the FB stuff at the top is bigger than it should be; the credits to the right are too big. Here's my FF for comparison, which has the sizes right but bad rendering on the body text: http://i.imgur.com/LnY6h.png http://i.imgur.com/LnY6h.png And chrome, being even worse with aliasing: http://i.imgur.com/zFcu1.png http://i.imgur.com/zFcu1.png
  - keithpeter 15y ago
    Screen shot was taken using gnome-core package installed on a CLI Ubuntu 12.04 installed from the netinstall iso. So no Unity desktop. I'm still working out what might be missing or altered in this very non-standard setup. I'll pop another one on later with a default Unity interface as the Ubuntu team intend I've always preferred Ubuntu's font rendering over other distributions/oses.
dt7 15y ago
I use Firefox on Windows 7 on two separate machines, and web font rendering is perfectly fine for me on both. I'm not sure whether its because I tweaked some settings in about:config relating to it? Chrome on the other hand looks terrible for me, and no matter what I do I can't fix it.
smacktoward 15y ago
They've already done it. Windows Vista and 7 provide an API for text rendering called DirectWrite (http://en.wikipedia.org/wiki/DirectWrite http://en.wikipedia.org/wiki/DirectWrite) that gives much cleaner results. XP and prior use an older API called GDI (http://en.wikipedia.org/wiki/Graphics_Device_Interface http://en.wikipedia.org/wiki/Graphics_Device_Interface), which hasn't kept up with advances in modern displays. The reason why this switch hasn't resulted in a simple "boom, instantly beautiful" improvement is a chicken-and-egg problem. The choice of which rendering API to use is made by application developers; they naturally want to target the one that's most widely adopted. But Vista/7 haven't driven XP out of the marketplace yet. So cautious browser developers stick with GDI. You can see the result in the examples you cited. IE9 is a special case because it's only available for Vista and 7 anyway, so Microsoft was free to move it to DirectWrite. Firefox defaults to GDI, but as of FF4 has optional DirectWrite support (how to turn it on: http://forums.mozillazine.org/viewtopic.php?t=1775755 http://forums.mozillazine.org/viewtopic.php?t=1775755). Chrome is GDI-only.

keithpeter 15y ago

http://dl.dropbox.com/u/8403291/design-page-screen-grab.png http://dl.dropbox.com/u/8403291/design-page-screen-grab.png How does the font rendering here compare? Its Firefox on Ubuntu 12.04 (actually using Gnome Shell). I've always found Ubuntu font rendering different to other GNU/Linux distributions, and I prefer it.

intended 15y ago
This is how it looks like on chrome running on windows with default settings. http://dl.dropbox.com/u/17182392/Bad%20Fonts.png http://dl.dropbox.com/u/17182392/Bad%20Fonts.png
- keithpeter 15y ago
  http://dl.dropbox.com/u/8403291/design-page-windows7-explorer9.png http://dl.dropbox.com/u/8403291/design-page-windows7-explore... What we get on our Windows 7 / Explorer 9 desktops at work. I actually can't see too much difference between this and the grab from Ubuntu/Firefox. If you can see obvious differences, now you know what you are up against when you talk to non-designers like me.
  - intended 15y ago
    Mine is hideous - the absolutely terrible rendering of corners and curves - it makes pages like this abhorrent to read. I should have made that clear - yours looks great comparatively and yes the ie9 and FF versions are close to each other comparatively.
fiatpandas 15y ago
If I'm judging your screenshot on aliasing/rendering alone, it's very nice (Mac-tier). However, when I look at your screen, I can't help but notice how big everything is on the page. Did you change default font size settings in FF? Could be a GTK issue as well. Text is being occluded in the red circles; the FB stuff at the top is bigger than it should be; the credits to the right are too big. Here's my FF for comparison, which has the sizes right but bad rendering on the body text: http://i.imgur.com/LnY6h.png http://i.imgur.com/LnY6h.png And chrome, being even worse with aliasing: http://i.imgur.com/zFcu1.png http://i.imgur.com/zFcu1.png
- keithpeter 15y ago
  Screen shot was taken using gnome-core package installed on a CLI Ubuntu 12.04 installed from the netinstall iso. So no Unity desktop. I'm still working out what might be missing or altered in this very non-standard setup. I'll pop another one on later with a default Unity interface as the Ubuntu team intend I've always preferred Ubuntu's font rendering over other distributions/oses.

dt7 15y ago

I use Firefox on Windows 7 on two separate machines, and web font rendering is perfectly fine for me on both. I'm not sure whether its because I tweaked some settings in about:config relating to it? Chrome on the other hand looks terrible for me, and no matter what I do I can't fix it.

smacktoward 15y ago

They've already done it. Windows Vista and 7 provide an API for text rendering called DirectWrite (http://en.wikipedia.org/wiki/DirectWrite http://en.wikipedia.org/wiki/DirectWrite) that gives much cleaner results. XP and prior use an older API called GDI (http://en.wikipedia.org/wiki/Graphics_Device_Interface http://en.wikipedia.org/wiki/Graphics_Device_Interface), which hasn't kept up with advances in modern displays. The reason why this switch hasn't resulted in a simple "boom, instantly beautiful" improvement is a chicken-and-egg problem. The choice of which rendering API to use is made by application developers; they naturally want to target the one that's most widely adopted. But Vista/7 haven't driven XP out of the marketplace yet. So cautious browser developers stick with GDI. You can see the result in the examples you cited. IE9 is a special case because it's only available for Vista and 7 anyway, so Microsoft was free to move it to DirectWrite. Firefox defaults to GDI, but as of FF4 has optional DirectWrite support (how to turn it on: http://forums.mozillazine.org/viewtopic.php?t=1775755 http://forums.mozillazine.org/viewtopic.php?t=1775755). Chrome is GDI-only.