Font-face loaded on Windows look really bad. Which fonts are you using that render better?

Question

EDIT: The problem was that I did not have "Cleartype" turned on in my settings on Vista. This question may not have much meaning if you have Cleartype is installed/enabled on Windows OS.

---

A new typography wind has arrived on the web, with font-face property of CSS3 be able to load fonts other than the OS/system set. My Mac render many perfectly while my Windows machine doesn't. Which set of fonts should I use that will render better on Windows?

This is similar to a question on Stack Overflow.

And here an example of a website that looks bad rendered on PC with Myriad Pro: http://css-tricks.com/

NOTE: I am not talking about the difference in antialiasing between browser versions (like between IE9 and IE6).

I am expecting as answer by your tests, a list of fonts plus the size (please use px) which they look well, or at least in a way that they can be used for short text or small titles.

For example, at the moment "League Gothic, 30px" looks like the following:

Answer 1

This should be a comment (hence making this CW), but I think there are some misunderstandings and wrong assumptions in the question. Since you obviously want this question to be answered (you've offered a bounty after all), here's my two cents.

From your screenshot it seems to me that you have set your Windows to render fonts regularly (as opposed to subpixel rendering) and probably your browser doesn't do any antialiasing (it might, but then it is gone with JPG compression).

The following examples dealing with windows are from XP Pro SP 3, so it is quite safe to assume the situation is at least in the same level in Vista & 7.

Windows has (in XP) options to use ClearType or to not. Without ClearType the fonts render as in your screenshot. This is a heavily zoomed in image from Windows' dialog without CT:

You see it is a binary operation: pixel is black or transparent. Now with some modern browsers even without CT, they do some anti-aliasing. This is from css-tricks.com with Windows XP & Chrome 8 and CT is OFF (as it was in the previous picture):

See what has happened? Probably you did already, as you stated in your question.

NOTE: I am not talking about the antialiasing difference that there is between new browsers and old ones (like between IE9 and IE6).

Now, the ClearType!

Here is the exact same text from the Windows dialog, this time with CT:

If you're interested on what this is based on, see the Wikipedia article on subpixel rendering. And does turning the ClearType on affect the browser rendering? Same "other" text with Windows XP & Chrome 8 and ClearType is ON:

It does! And while we're at it, I might add that (at least) IE 8 uses ClearType rendering even if it is disabled in Windows-level.

---

Comparing antialiased and ClearTyped text in 100 % isn't as radical as comparing ClearTyped text to non-antialiased. It is noticeably bolder, though:

aa: CT:

To see what that looks like without antialiasing, just look at littlemad's screenshot.

And for comparison here's the same "other" in OS X's default rendering: even more bolder than ClearType.

---

To answer your question: any font. If your operating system renders the font differently it might be because you've set your operating system to render fonts so. OR it might be that your browser isn't capable of antialiasing or ClearType.

Another question would be that why some fonts render correctly and some don't — if this even is the case (but I don't see any problems on the site you've mentioned on Windows). Or are you asking for fonts that would look adequate without any rendering whatsoever?

---

And here's also answer to frequently asked question: "Yes, I know all that — why does ClearType look different than OS X's rendering?!"

Because they are different. Subpixel rendering isn't a light thing to implement. ClearType is Microsoft's registered trademark and it is protected with 10 patents (+ 1 pending; see wikipedia). They just can't be the same.

Answer 2

If the issue is the same as the Stackoverflow question you reference then isn't the answer the same too?

That's a Hinting problem.

When you generate your font-face kit (like in FontSquirrel), you need to specify Hinting on the Expert options.

Choose Expert, and under Rendering, select:

Apply Hinting - Improve Win rendering.

Answer 3

ttfautohint can be used to rebuild the font's hinting bytecode; the default settings (GDI-compatible) should help windows render the font.

Answer 4

This doesn't have anything to do with the browser, but windows itself.

*nix systems (unix/linux, and OSX is included in this because it has a Unix base) have the option to finely control how text is displayed, and are generally set to subpixel rendering (which has a much more technical explanation than what I'm going to give you, but it essentially uses the subpixels (the red, green, and blue portions of your screen's pixels) to render the text) where Windows uses cleartype, which is it's own type of rendering that I'm a bit fuzzy on the mechanics.

Pretty much it's just that Windows doesn't subpixel render, it's not the fonts or files, but the operating system displaying those fonts and files.

Answer 5

Use the below code in CSS

-webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0,0,0,0.004);

It might help you

Answer 6

Turning ClearType on, on your Windows XP:

1. Follow these instructions.

2. Now, follow this on your IExplorer.