Grow your CSS skills. Land your dream job.

Text Anti Alias

  • Wes
    # February 21, 2010 at 3:42 pm

    This is purely a visual problem. I am viewing this on Google Chrome, on a monitor with a resolution of 1920 x 1080. The text appears jagged and really ruins the whole feel of the page.

    http://wesascolese.com/bentest/index.html

    here is my CSS

    Code:
    *, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
    html, body { height:100% }
    table { border-collapse:collapse; border-spacing:0 }
    fieldset, img { border:0 }
    address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
    ol, ul, li { list-style:none }
    caption, th { text-align:left }
    h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
    q:before, q:after { content:”}

    /* Global reset-RESET */
    /* The below restores some sensible defaults */
    strong { font-weight: bold }
    em { font-style: italic }
    a img { border:none }

    /*
    UTILITY
    */

    .floatLeft { float:left; }
    .floatRight { float:right; }
    .clear { clear:both; }

    #pagewrap { width:960px; margin:0px auto -100px; min-height:100%; height:auto !important; height:100%; }
    #push { height:100px; }

    h1 { font-family:Verdana, Geneva, sans-serif; text-transform:uppercase;font-size:34px; margin:50px 10px 50px 10px; }
    h1:first-letter { font-size:42px;}

    h2 { font-family:Verdana, Geneva, sans-serif; text-transform:uppercase;font-size:20px; margin:50px 10px 50px 10px; }

    # February 22, 2010 at 1:50 am

    There’s nothing you can do via CSS.

    You can use a service like Cufon or @font-face, there are even some JS options out there I believe.

    At the end of the day, every browser is going to be different. I know FireFox has always been put down for its lack of anti-aliasing (the one thing that IE always seems to get right).

    # February 22, 2010 at 7:36 am

    you can try to add "text-shadow: 0 0 1px #000" to h1 and h2

    Wes
    # February 22, 2010 at 9:07 am

    Thanks Doc, still learning the web design game and all its little quirks. Also thanks d-_-b I will certainly try this ASAP.

    -Wes

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

You must be logged in to reply to this topic.

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