What do you use for clean crisp text?

[mikelegacy]

I can’t seem to get any text on my sites as clean and crisp as the type on this site. What sort of coding do they use on here to make the text so smooth. It’s about as smooth as on a flash site, which is what i’m going for.

[Historical Forums User]

There are many variables that go into the rendering of text in web browsers. Different browsers (and even versions of browsers) will render text in different ways. Different sizes of text can render differently – some of which look terrible. The Method & Craft site (www.methodandcraft.com) had this exact problem when they launched for PC users – so they had to knock the font-size up a few pixels for PC users.

Chris is using an awesome service called Typekit (www.typekit.com) that serves up fonts optimized for the web. I don’t see anything that suggests he’s using anything else.

Webkit browsers do support some rendering options with the -webkit-font-smoothing property. You can look into it with a quick google search.

[mikelegacy]

Cool, I’ll look into it and see what my options are. As a graphic designer, I really want my portfolio site to look as clean and smooth as possible, this will help. Thanks!

[zackw]

when your designing in Photoshop set the text to none instead of sharp or crisp or whatever setting you have it at, this generally represents how the text will look on the web.

[Historical Forums User]

Good addition Zack! Also, please don’t give into the temptation of using images for your text. It’s not good practice for a dozen different reasons. Just trust me. lol

[mikelegacy]

Oh I definitely know that. Plus it ruins your opportunity for any search engine optimization.

[supperman]

Not true entirely mikelegacy. You can use images for logos, fancy headlines here and there. Just do it the proper way.

My fancy headline

.fancyheadline span {
position: absolute;
width: 100%;
height:100%;
background-image: url("myfancyheadline.jpg");
background-repeat: no-repeat;
}

[jamygolden]

@mikelegacy, @supperman is right that it doesn’t necessarily have to affect SEO, however there is a more semantic way of doing it.

CocaCola

#logo {

height: 70px;

background: url(logo.jpg) no-repeat left top;

text-indent: -9999px;

}

[Author]

Posts