How To Properly Smooth Font Using CSS3
I've came across some people usually wondering how some websites have such crisp and clear font. There are two reasons for this:
1. They are most likely using the -webkit-font-smoothing hack. This type of hack is mostly used for mobile browsers, as well as the Apple Safari and Google Chrome Browsers.
2. To really smooth the font and not have anything too blurry websites usually use the text-shadow effect. This is also used so the font will look smooth on all browsers (Opera, Firefox, Safari, Chrome and others alike) except internet explorer.
When you apply the font smoothing hack to your stylesheet and you want it applied to your whole site, make sure we write the following code.
Lets start off by adding the font smoothing hack to your stylesheet:
html, html a { -webkit-font-smoothing: antialiased !important; }
Here is the definition of anti-aliased: http://en.wikipedia.org/wiki/Spatial_anti-aliasing
Now for the text shadow effect to really smooth out the font:
html, html a { text-shadow: 1px 1px 1px rgba(0,0,0,0.004); }
Here is the code all put together:
html, html a { -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0,0,0,0.004); }
To really see what I am talking about, here are a couple of demo's that shows it's smoothing.
If you have a good eye for this kind of design, you will notice the difference:
Here is how it looks when the font is not smoothed:
Hello World!
Here is how it looks when the font is smoothed:
Hello World!
30 Jun 2011 13:06
This is great and little known, so thanks for posting. Max voltar has some more. Guessing IE9 is a no?
Thanks :D
- Internet Explorer is horrible in general, so very minimal CSS3 works on it, but everything else it should work :)
- That site has a nice section about this, but I like a small and powerful code, so the one above is the most powerful by far for this kind of CSS trick.
CEO of Icon Deposit
Take a look at me via Twitter, Dribbble, and Google +
Honestly, I can't see the difference between the two… ???
happned to me too … but when i tried in my mobile it was cool
I'm using Chrome and I don't see a difference… either with the example or when using it on my own page…
It works for me…
CEO of Icon Deposit
Take a look at me via Twitter, Dribbble, and Google +
Thank you - the two lines of code solved the problem for me. Nice & quick fix!
these worked awesome dude…great sharing thanks -—— lol
Your're welcome guys, glad I could share it!
CEO of Icon Deposit
Take a look at me via Twitter, Dribbble, and Google +