Text Anti Alias

[Wes]

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

[TheDoc]

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).

[d-_-b]

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

[Wes]

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

-Wes

[Author]

Posts