Fonts on Windows (Firefox/Chrome) showing up pixelated in any browser

I'm have an issue with an app where, when I test in Windows, fonts will show up very blurry and pixelated.

My font family is very simple:

body {  
  font-family: Helvetica, Arial, sans-serif;

Here's an example:

On my development box, I have no issues at all (Ubuntu/Firefox/Chrome).

I'm fairly new to CSS - could this be an OS thing? A Windows machine开发者_StackOverflow社区 should have Arial though should it not?

This is how ClearType renders fonts. This is completely normal, so my only advice to you would be to either not worry about it or to pick a different font. Windows users are probably used to it.

This is because ClearType is optimized for the reading of smaller text, but as a result it makes larger text look pixelated like in your example. Here is an article that goes more in-depth on the subject, if you're interested.

In fact, if you disable ClearType, I bet it will look much better (although smaller text will look terrible).

Edit: As of September 2013, most browsers (including Firefox, Chrome, and IE10, I believe) use their own font rendering engines on Windows, so this should no longer be an issue.

Many windows XP systems has font-smoothing turned off. I don't really know why, but if you open the monitor properties you can enable it. The fonts will then appear much nicer.

The problem is not very appearant when you use standard windows fonts like Arial, but if you start working with webfonts it gets really ugly.

Sadly, there is no way for you to detect this setting from the browser or force the font-smoothing on

Looks like default windows fonts rendered properly might try garamond or times new roman but I think you will run across pixelization like that once you get to a certain size for windows.

On Windows 10 & Chrome combination I had a similar issue and this is what fixed things for me:

1. Turn on CleanType Text from Windows options.
2. Disable 2D acceleration for canvas on chrome://flags.

I just had the same problem with a logo that looked pixilated on my website. I had tried both a .jpg and a .gif file. THEN, I saved the file in Photoshop on "Save For Web and Devices" in the drop-down menu, and now it looks just great on the website.