What web font format has the highest quality?

Question

I've seen that some websites use @font-face but they look creepy & without anti-aliasing, But some other websites use some fonts with a very high quality, I don't know if they use OTF or TTF or SVG or what exactly, This is an example.

I've looked into their source but there is like 4 font types and i can't figure out which one is being used.

Thanks

Answer 1

There are three factors that affect quality display of the font:

1. Quality of the font. Some fonts are poorly made, some are missing characters, some have ligature issues, etc. I suggest testing the font across all browsers before committing to it.
2. Browser rendering of the font. Chrome, Safari, FF and IE display render fonts differently.
3. Formats readable by the browser: each also can only read a limited number of formats. (EOT for IE, TT for pretty much everything else, including FF, and there's more).

In conclusion: web fonts are still somewhat of a dark and mysterious art. Invariably, there will be minor differences. Find a well built font, and test it across your target browsers. I think we're still very much in the trial and error phase with @font-face, but there are good resources to help along the way.

Answer 2

If you want to use a special font on the web, then the format choice is pretty much made for you by the browsers, and you will need EOT, WOFF, TTF, and SVG all to be available.

A site like FontSquirrel will provide guidance as well as the font files themselves.

Answer 3

The font quality largely depends on how the fonts are converted. You may choose to remove things that effect anti-aliasing and quality like kerning to save file size which many people do. The better the look, the bigger the size. Another factor that goes into the fonts is the host OS. They have certain ways they do things that can affect the way fonts render.

Also, this is just kind of random, but you can throw this into your code:

text-shadow: transparent 0 0 1px;

It will improve anti-aliasing, albeit only in Google Chrome for the time being.

Answer 4

When it comes to Windows, embedded fonts using @font-face render horribly with ClearType ON.

Try this radical experiment: turn ClearType OFF, and recheck the font rendering.

While this seems to make no sense (the opposite should happen), you should find the fonts now look smooth and natural.

This happens for me and I can provide evidence if necessary. The same web page will render fine in Linux, Mac etc without doing any such OS-level tinkering. Yay Windows.

I am still trying to determine a work-around for this, because obviously you can't ask everyone looking at your website who's using Windows to turn ClearType off so your fonts will look good.

Answer 5

I have done some experimenting with a complex font on various browsers while making a web site. I have found that without exception, Firefox and Chrome just don't render the font well regardless of format. IE was limited to eot anyway. And surprisingly, Opera does the best job. Quite frankly, changing the format just didn't make much of a difference. Overall, I think browsers have a considerable way to go when it comes to rendering complex, intricate fonts.