Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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:

enter image description here

share|improve this question
    
Can you provide more detail: On what browsers does it not render well? Can you show some example screen shots? There might be an underlying basic issue with rendering here rather than a font problem –  Pekka 웃 Jan 6 '11 at 18:20
2  
It is not only matter of browser, but of Operative System. Windows has a rendering of fonts that is different respect to Mac Os ones. I don't have a mac with me (only an Ipod Touch) at the moment, and I cannot show the difference, but even on well rendered browser for antialiasing, face-font it is not well implemented for not standard OS fonts. I was wondering (because I have a limited set of fonts), which one people are using that are not badly rendered on PC. –  Littlemad Jan 6 '11 at 18:25
    
@Yi Jiang: Exactly because the amount of font are huge, and it is not possible to test it all, or to have it all, that I am asking what are, from experience of everyone, what are the "safe fonts and size" to use. I can see that no one has posted anything, and I don't know if anyone will post anything (or did try to analyse the fonts rendering on PC), so I am more sad about not having any feedback. –  Littlemad Jan 8 '11 at 23:47
    
"kind of decent" is purely subjective. –  DA01 Jan 25 '11 at 20:42

6 Answers 6

up vote 17 down vote accepted
+50

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:

evidence 1

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):

evidence 2

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: evidence 3

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: evidence 4

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: evidence 5 CT: evidence 6

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: evidence 7 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.

share|improve this answer
    
This is a CW, so just edit it if I'm wrong; or add details if you know some. –  koiyu Jan 25 '11 at 20:25
2  
Great explanation koiyu, it was as i suspected, but couldn't be sure till he posted a screenshot –  JamesHenare Jan 25 '11 at 22:30
    
Your post make me doubt. I checked my settings, and I did remembered that when I was installing the OS Vista, I reduced to minimum all the effect to improve performance. And guess what? Cleartype was disable. I am such a stupid person, sorry for the incovenience. Now fonts look much much better, definitely readable. So know my question is more: from which OS Cleartype is not installed on windows? –  Littlemad Jan 26 '11 at 8:15
    
@Littlemad no problem :) It was useful for me too to check the sources so I could provide some sort of an answer instead of a mere opinion. –  koiyu Jan 26 '11 at 11:03
1  
@Littlemad, cleartype was first introduced in Windows XP, though turned off by default. From Windows Vista on it is now turned on by default. Also in Internet Explorer 7 onwards it is turned on even if it is not enabled throughout the OS. Source: en.wikipedia.org/wiki/ClearType –  JamesHenare Jan 26 '11 at 22:48

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.

share|improve this answer
    
Thx for the explanation, but I know that the problem is Windows, but I am asking more: what kind of fonts did you test or use on your website/client-website that you are using and still looking "fairly" decent on windows? –  Littlemad Jan 9 '11 at 0:02
    
Actually, it does vary from browser to browser. Firefox and IE will render the same font differently, if only because one uses EOT and the other uses OTF/TTF/WOFF. And ClearType does use subpixel rendering as well. Many people just prefer OS X's font antialiasing over Windows' options. –  Calvin Huang Jan 9 '11 at 1:05
    
@Littlemad what do you mean by "fairly decent", I mean I've just given myself up to the fact that it doesn't render nicely. Here's to Windows 8. –  dkuntz2 Jan 9 '11 at 3:16
    
@Calvin Huang: yes I know about the browser difference of rendering, but it not the main issue. It is OS related. Nowdays browser render decently the aliasing of fonts. Windows still not. @DKuntz: What you mean by saying "Windows 8"? I see many people using in important website the font-face, and it is really really ugly to see that good designer do that. So I am looking for a lesser evil solution, still bad rendered, but at least decent enough to don't look like a Commodore 16 kind of text. Otherwise I have to use a js solution to check your browser and pass a css style if you are mac or pc –  Littlemad Jan 9 '11 at 4:06
4  
This explanation is incorrect, or at least incomplete. Windows does do subpixel anti-aliasing - that is what Cleartype is, and has been there since XP. Compared to OS X Windows doesn't do font rendering incorrectly, it does so differently - the difference is subjective at best, and you will find people who prefer how fonts are rendered on Windows. In addition to that, browsers on Windows also uses different rendering methods - for example, all fonts at large sizes on Firefox up to 3.6 on Windows will display visible jaggies. This is resolved in version 4 by switching to DirectWrite API. –  Yi Jiang Jan 9 '11 at 9:21

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.

share|improve this answer
    
No it is not the same, Hinting doesn't solve the issue. I am already using the solution published on the web about the Font-Face that Fontsquirell is using. What I am looking it is: even if is not rendered well some font, which one looks decent enough to use on the pc? and on which font size? I am looking for a list of safe font at safe size. A kind of "best practice" reference. –  Littlemad Jan 21 '11 at 8:59
    
A best practice is to not use ANY embedded web fonts for text sizes. They aren't optimized for that. Leave them for titles and headers. –  DA01 Jan 25 '11 at 20:44
    
@DA01: I am a web designer, I want to design and use good typography, I cannot just ignore the fonts, I want to find out what are acceptable ones to be able to use. –  Littlemad Jan 26 '11 at 8:17
    
@Littlemad I am a also web designer that wants to design and use good typography. I know that font-face embedding, at least for now, uses mostly typefaces that aren't optimized for small text sizes on screens. They often have a lack of hinting and their metrics can vary immensely wreaking havoc if the embedded face isn't available to a particular user. Using system fonts that are optimized for text sizes on screens is using good typography. –  DA01 Jan 26 '11 at 16:19
1  
@DAO1: Yeah, I'm not a huge fan of that model either, but I was trying to point out that its a matter of good vs. bad fonts, not that embedded fonts are inherently bad. –  Russell Leggett Jan 27 '11 at 0:19

Turning ClearType on, on your Windows XP:

1) Follow this instructions: http://blogs.msdn.com/b/virtual_pc_guy/archive/2011/10/05/enabling-cleartype-on-windows-xp-mode.aspx

2) Now, follow this on your IExplorer: http://www.microsoft.com/typography/cleartype/tuner/step1.aspx

share|improve this answer

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

share|improve this answer
    
Please can you better show a piece of code to show readers what you mean? –  Kurt Mar 17 '13 at 14:24

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

share|improve this answer

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.