3

How can I get smooth fonts? I don't want the edges to look all fuzzy.

Hacky solutions are not a problem :)

alt text

Ben Shelock
  • 20,154
  • 26
  • 92
  • 125
  • If I'm not mistaken, I think CSS3 has a `font-smooth:always;` property. I have yet to try it myself, so I cant comment on its effectiveness. – Russell Dias Jun 20 '10 at 02:56
  • Have a look here (same topic): http://stackoverflow.com/questions/11487427/font-smoothing/11493510 – Sliq May 16 '13 at 23:16

3 Answers3

3

You could use some font replacement solution like Cufón for headers, but it's too inefficient to use for large blocks of text.

If you're looking to change the browser's font rendering, you probably won't have much luck because they all have their own text rendering routines (but look at -webkit-font-smoothing for recent versions of Safari and Chrome).

Sophie Alpert
  • 139,698
  • 36
  • 220
  • 238
  • Well it would probably only be needed for things with a large font size so big blocks of text wont be a problem. Why is Cufon so in efficient? – Ben Shelock Jun 20 '10 at 02:59
  • It's not particularly inefficient, it's just that using a browser's native text rendering routines will always be faster than using a custom JavaScript library that uses Canvas or SVG to display text. – Sophie Alpert Jun 20 '10 at 03:02
2

As was mentioned, there is a CSS property for font-smooth - but I am not sure how widely this is supported. This is most likely a property that you will have to adjust in your OS, or the font itself, which means of course, that would only be local. I know that Windows has a feature called ClearType which allows you to adjust the anti-aliasing to work well with your monitor.

As Ben Alpert mentioned, a font-replacement solution such as Cufon or TypeKit are other potential solutions for title text.

Niklas
  • 13,005
  • 23
  • 79
  • 119
Jeff Fohl
  • 2,047
  • 2
  • 23
  • 26
1

There's actually a CSS property called text-rendering which actually works on the Firefox family of browsers. There's also -webkit-font-smoothing for Safari and Chrome family, as Ben said. I don't know if text-rendering works on Internet Explorer, but this piece of code works pretty fine:

text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;

Also, if you're customizing your browser:

html {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}
Juan
  • 11
  • 1