CODEWITHSUNDEEP
javascriptcssfontsantialiasing
Ben Shelock
Ben Shelock

Reputation: 20965

Smooth fonts with CSS

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

Hacky solutions are not a problem :)

alt text

Upvotes: 3

Views: 5500

Answers (3)

Juan
Juan

Reputation: 11

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;
}

Upvotes: 1

Jeff Fohl
Jeff Fohl

Reputation: 2076

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.

Upvotes: 2

Sophie Alpert
Sophie Alpert

Reputation: 143104

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

Upvotes: 3

Related Questions