Grow your CSS skills. Land your dream job.

Text Smoothing

  • # January 24, 2011 at 10:43 am

    Hi guys,

    I am developing a WP template for my friend and in the design there is a nice big text. On Photoshop it looks smooth. How can I make it like that in the browser ?

    # January 24, 2011 at 11:36 am

    ‘Smooth fonts’ are calculated mostly by the browser and operating system. Which means you’ll probably only get the look you want by using an image or messing with some CSS ‘text-shadow’ to give the smooth illusion.

    # January 24, 2011 at 11:38 am

    text shadow might also make the font look bold.

    # January 24, 2011 at 11:49 am

    You could set the opacity to like 0.9 and see if that solves it. I’ve smoothed text edges by editing the opacity before.

    # January 24, 2011 at 11:55 am

    As said above, the smoothness of a font mostly depends on a user’s browser and OS. However, I think I’ve found a way to increase the chances for a smooth rendering using @font-face.

    I “discovered” this purely out of experimentation, but I ultimately found something that seemed to work — at least, with the font I was using.

    First, save your font file to the various formats supported by @font-face. I just used Font Squirrel’s nifty generator. If you use that, it will export a stylesheet and the converted files.

    Next, rearrange the @font-face property so it looks something like this:

    @font-face {
    font-family: 'MyFont';
    src: url('MyFont.eot');
    src: url('MyFont.otf') format('opentype'), local('☺'), url('MyFont.woff') format('woff'), url('MyFont.ttf') format('truetype'), url('MyFont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
    }

    With any luck, your font will now render more smoothly. There are other ways to accomplish this smoothness (such as Cufón), but this worked for me.

    # January 24, 2011 at 12:19 pm

    There is a CSS3 ‘font-smooth’ property, that as of yet appears to do absolutely nothing!!! (Win 7 Chrome, and FF 3.6)

    Ref: http://www.w3.org/TR/WD-font/#font-smooth-prop

    # January 24, 2011 at 12:33 pm

    Thanks guys ! :D

    @jamy_za: I tryed it and it works perfect! Thank you!
    @clokey2k: Well yes, that’s the first thing I found on Google and the first thing I tried out…

    SmashDeveloper

    # January 25, 2011 at 2:22 am

    I think this will help you now and in your future works.

    Open photoshop (or similar software) and open image panel. Select “L” radio button. Now add the background color of your text in color code field. Now select a contrasting color from vertical color bar. Then add a border with a color in between both of these colors (back ground color and text color) again from the vertical color bar.

    Eg: If backgrund color is #ccc , then text color should be #333 and text-shadow color should be #666. (#ccc < #666 < #333)

    Now it may look better.

    Sujith,
    Web-designer,
    Xeoscript Technologies.

    # January 25, 2011 at 4:10 am

    @sujiths777

    You should not use images for text

    # January 25, 2011 at 4:27 am

    @TT_Mark .. I told to use photoshop only to get color codes for text according to “luminosity (L)” values. Not to make and image for text. Fine??

    # October 18, 2011 at 11:22 am

    using typographic points instead of pixels or em gives you better results

    try font-size: 12pt

    # December 3, 2012 at 6:13 pm

    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;

    # January 24, 2013 at 10:17 am

    this is the real solution.

    Try it!

    @font-face {
    font-family: ‘chunk-webfont’;
    src: url(‘../../includes/fonts/chunk-webfont.eot’);
    src: url(‘../../includes/fonts/chunk-webfont.eot?#iefix’) format(‘eot’),
    url(‘../../includes/fonts/chunk-webfont.woff’) format(‘woff’),
    url(‘../../includes/fonts/chunk-webfont.ttf’) format(‘truetype’),
    url(‘../../includes/fonts/chunk-webfont.svg’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

    @media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
    font-family: ‘chunk-webfont’;
    src: url(‘../../includes/fonts/chunk-webfont.svg’) format(‘svg’);

    }
    }

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

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