Good web typography

[Lau]

I'm currently designing a new website, using CSS for as much as humanely possible. I'm going with a sans-serif font, at 11px, and so am basically stuck with Verdana, Helvetica, or Tahoma. There's something about Tahoma I just don't like, and so Verdana or Arial it is. The only thing is, both of these look a bit bunched up, both tracking and leading wise. I've solved the leading problem with "line-height: 1.4em ;", but am struggling to use "letter-spacing: 0.02em; to the same effect, as the kerning then looks awful – very uneven and the spaces between words look too small.

I can't work out if I'm being massively anal about the type, or it just all looks dreadful. What do you think?


(Click for larger)

Does this look uneven to you? And if so, is there a better way of adjusting the tracking using CSS than "letter-spacing" or using ems?

Thanks very much for any help.

 

[gekko513]

It looks good to my untrained eyes.

 

[Butters]

I'm currently designing a new website, using CSS for as much as humanely possible. I'm going with a sans-serif font, at 11px, and so am basically stuck with Verdana, Helvetica, or Tahoma. There's something about Tahoma I just don't like, and so Verdana or Arial it is. The only thing is, both of these look a bit bunched up, both tracking and leading wise. I've solved the leading problem with "line-height: 1.4em ;", but am struggling to use "letter-spacing: 0.02em; to the same effect, as the kerning then looks awful – very uneven and the spaces between words look too small.

I can't work out if I'm being massively anal about the type, or it just all looks dreadful. What do you think?

View attachment 55333
(Click for larger)

Does this look uneven to you? And if so, is there a better way of adjusting the tracking using CSS than "letter-spacing" or using ems?

Thanks very much for any help.

Looks fine to me

 

[iMeowbot]

The only thing is, both of these look a bit bunched up, both tracking and leading wise.

You're pretty much at the mercy of the browser, and on top of that each browser/OS combination has its own slight differences interpreting exactly the same HTML and CSS. And I agree, Web browsers are generally terrible about the spacing they employ.

If someone happens to look at your page with smoothing turned off, all your tuning goes to waste anyway. And if I'm on an I-hate-Verdana kick this week and disable it, there ain't nothin' you can do about it. It's better to assume that you have no real control at all over how the text will be displayed, because that's the reality.

 

[kgarner]

You're pretty much at the mercy of the browser, and on top of that each browser/OS combination has its own slight differences interpreting exactly the same HTML and CSS. And I agree, Web browsers are generally terrible about the spacing they employ.

If someone happens to look at your page with smoothing turned off, all your tuning goes to waste anyway. And if I'm on an I-hate-Verdana kick this week and disable it, there ain't nothin' you can do about it. It's better to assume that you have no real control at all over how the text will be displayed, because that's the reality.

Ditto that. Web Design is about working around constraints and fine-tuning text kerning and tracking and such is a big one. Basically, I get a font that works, and set the size and the line-spacing and go with it. There is no point in getting more anal than that since there is a 98% that is will still look like crap in IE and over 80% of the world uses that crap-fest of a browser.

 

[shecky]

to my trained eye, the leading could be larger, and the "ideal" length for a measure of type is about 66 characters (including spaces), you are at around 88. by shortening the measure, the type will read better than it does now.

but i concur; keeping it consistent once it gets on the web and different platforms and browsers look at it is tough at best.

 

[Lau]

Hmm, ok, thanks everyone. I'll just have to let it go, having done the best I can then. And don't get me started on the widows and orphans.

shecky, funnily enough I lectured someone else on this yesterday, so you'd think I'd have listened. I think this paragraph may have to be that length, so as to span the 3 columns it needs to (it'll be the only one) but I'll see what I can do. I'm in agreement about the leading, so that might shave off one or two characters...

Thanks again, everyone.

 

[mrblah]

Just leave it normal while only adjusting line height. If you must kern then only do it to large type for titles (which you might as well just use an image anyways unless youre trying to show CSS skills). Using that for large amounts of text is not a good idea at all for the web, browsers dont like it and you can get some really weird side effects if you make it too big. A lot of people like to highlight text as they read, kerning can really make that weird.

I promise nobody will judge you for your kerning in a webpage unless its messing up in their browser. Just leave it default.