Grow your CSS skills. Land your dream job.

Making website text smooth

  • # April 22, 2013 at 11:01 pm

    This website itself has smooth text. The text on my website looks a little crispy. How exactly does one make the text smooth? i’ve used CSS font-smoothing but that doesn’t do anything.

    # April 22, 2013 at 11:07 pm

    What webfonts are you using?

    # April 22, 2013 at 11:11 pm

    @chrisburton Sans-Serif, Arial, and a Google web-font called Oleo Script Swash Caps

    # April 22, 2013 at 11:25 pm

    @Jarolin Well, you shouldn’t be having issues with Arial so I’m assuming Oleo Script?

    # April 23, 2013 at 12:53 am

    You could try this


    html {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    }

    It works for me (Chrome and Safari). FF and IE renders smooth fonts by default, I think (at least that’s how it appears)

    # April 23, 2013 at 1:05 am

    @Krish1980 While `font-smoothing` only works on Macs, `optimizeLegibility` has nothing to do with anti-aliasing. It enables OT features. I’m betting this has to do with a poor font choice for screen use.

    # April 23, 2013 at 1:38 am

    @chrisburton,

    how come some fonts may render and look smooth in Fireworks or Photoshop, but they turn jagged when implemented in the browser? I wonder if that is what Jarolin is referring too. I have wondered this for a while. If a software program can render them nicely, how come browsers can’t?

    # April 23, 2013 at 2:45 am

    PS and Fireworks have four different settings that render type. Browsers don’t have this option. There are many causes for a font not to render well in the browser. This can be anything from the type designer choosing to auto–hint (manual hinting is a long and tedious process) which usually causes the font to look poor, more noticeably in small sizes (you see this a lot with GWF). Different font files can cause this as well (TrueType vs PostScript). Chrome also has a bug not rendering anti-aliasing correctly. So there’s not always one “thing” at fault.

    # April 23, 2013 at 3:20 am

    thanks for the response. I was shocked the first time I noticed the difference in the browser compared to FW. I guess it’s a hard lesson some of us learn along the way.

    # April 23, 2013 at 3:23 am

    @cwork Can you post screenshots (PS vs Browser)?

    # April 23, 2013 at 3:53 am

    i will go through my designs and see which ones did it.

    the worst one i remember was “Comfortaa”: http://www.fontsquirrel.com/fonts/Comfortaa, but this was probably like 7 months ago, and I’m actually using it on a site now and it looks fine. But I know what I saw when I first used it, and it was ugly lol.

    # April 23, 2013 at 3:58 am

    Some kerning pairs are quite horrible.

    # April 23, 2013 at 7:16 am

    The fonts appear pixelated and choppy. I’m thinking a very small text-shadow would do something.

    # April 23, 2013 at 7:23 am

    I’ve tried the text-shadow trick as ‘faux anti-aliasing’, maybe it works for you but I didn’t like the result at all.

    # April 23, 2013 at 8:18 am

    @Jarolin Link? And you said “fonts”, does that mean you’re having issues with Arial too?

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".