How To Properly Smooth Font Using CSS3

How To Properly Smooth Font Using CSS3

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

source: icondeposit

Join the Conversation

1 Comment

  1. I ADAMS KEVIN, a representative Aiico Insurance plc, we trust and respect for individual differences in day out a loan. We will provide 2% of the loan's interest rate. If you are interested in this business contact us by e-mail: (adams.credi@gmail.com) now transfer their loan documents issued properly. Do you need a loan to set up business or school if you are very welcome to Aiico Insurance plc. You can also contact us by e-mail: (adams.credi@gmail.com). We first week can request a balance transfer.

    DO YOU NEED LOAN FOR PERSONAL BUSINESS? IF YOU CONTACT YOUR EMAIL ABOVE TO PROCEED WITH YOUR LOAN TRANSFER IMMEDIATELY OK.

Leave a comment

Your email address will not be published. Required fields are marked *