On websites: why do sans-serif fonts sometimes look great, sometimes not?

[superboyac]

I've dabbling with tweaking my website look.  I like tranglos' site very much, see here:
http://ethervane.com/

Anyway, that's besides the point.  What I don't really understand is how come the sans-serif fonts sometimes look good in browsers, and sometimes they don't?  There's something weird there.  I normally tend to prefer the sans-serif fonts like helvetica, arial, calibri, verdana...but when it goes on the website, something happens that I don't always understand.

So if you look at my site right now, you'll notice that the normal text has a jagged look about it:


How can I get those characters to be more smooth?  More of a "cleartype" look?  Another thing I've noticed is this thing:

Why does that happen?  I think those sites are intended to look good on macs, and not pc's.

What I would really like the font to look like is more of what we see with the fonts on Word (or any word processor):


Actually, that doesn't look as good as I expected.  Maybe it's this XP computer I have at work.  I think these all looked better at home on my Windows 7 computer. 

The end goal of all this: what is the best sans-serif font(s) for me to use for a website?  but I don't want to turn this into another best fonts discussion.  i want to address the specific questions above.

[superboyac]

I really like this font, spacing, the whole thing:

It's from this website:
http://www.alistapart.com/

I'd like to copy that.  I have Firebug, how can I figure out what the font settings for that is?

[patthecat]

You need to take a look at the website's css stylesheet that it is using. Looks like it's at /css/home.css

[johnk]

Some fonts are optimised for print (the vast majority), other are optimised for screen display (e.g. Verdana, Georgia). Some work reasonably well for both. Not many though (Calibri springs to mind).

There's no amount of tweaking you can do to make a font look good on screen if it's only intended for print use.

I'm a bit of a purist when it comes to web design. Unless your site is an artistic statement in itself, where pixel-perfect placement is essential, I always think it's best to keep it as simple as possible. If you specify fonts, make it tried and trusted, universally available fonts.

I have a hunch that what you really like about the AListApart site is the design, including the line leading for body text and the use of white space around the text. I don't think it's the fonts. Look at their CSS file:

#content .ishinfo, #content .title, #content .byline {text-align: center;}
#content .item, #content #ishintro, #ishoutro {border-top: 1px dashed #999;
  padding: 1.5em 1em 0.5em; margin-top: 0.75em;}
#content #ishintro, #content #ishoutro {padding: 1em 1em 1px; font: italic 1.05em Georgia, serif;}
#content .title {font-size: 1.8em; text-align: center;}
#content .byline {padding: 0 0 1em; margin: 0 0 1.25em; text-align: center;
  background: url(/pix/byline-separator.gif) 50% 100% no-repeat;}
#content .byline a {font: bold 0.85em Verdana, sans-serif;
  text-transform: uppercase; letter-spacing: 2px;
   margin-left: 0.25em;}

#banners {margin: 0 20px 20px;}
#banners li {margin: 0 0 10px;}
#banners li a {background: #CCC; display: block; width: 173px; margin: 0 auto;}
#banners li img {background: #CCC; display: block; margin: 0 auto;}
#banners li a:hover, #banners li a:hover img {background: #666; border: none;}

#choice {border-top: 1px solid #D9D9D9;
  padding: 1.5em 20px;}
#choice h3 {color: #333; font: 0.9em Verdana, sans-serif;
  text-transform: uppercase; letter-spacing: 0.33em;}
#choice .title {text-align: left; font: 1.5em Georgia, Times, serif;}
#choice .byline {display: block; border: none; text-align: left; margin-top: 0.5em;}
#choice .byline a {font-size: 0.8em;}
#choice .info {font-style: italic; font-size: 0.9em;
  color: #666;}

#sidebar {width: 140px; padding-left: 15px;}


Nothing unusual there. Verdana, Georgia, Times....

[superboyac]

Ywah, johnk.  You're right, it's not the font, but the styling.  I forgot that i could just look at the actual css file.  I'm so used to just firing up firebug, and browsing the elements.

[johnk]

A footnote from the Johnk rule book of life. Rule #3458: Re-designs are a waste of time.

I did quite a few newspaper "re-designs" in my time (always at someone else's request). I have seen countless re-designs of newspapers and web sites.

Very, very rarely have I ever felt that a re-design was a good use of time. Unless a design is really, very badly broken (in terms of readability, legibility, signposting etc), then time spent improving content is always a better use of time than time spent on design.

Just my 2p.

[superboyac]

A footnote from the Johnk rule book of life. Rule #3458: Re-designs are a waste of time.

I did quite a few newspaper "re-designs" in my time (always at someone else's request). I have seen countless re-designs of newspapers and web sites.

Very, very rarely have I ever felt that a re-design was a good use of time. Unless a design is really, very badly broken (in terms of readability, legibility, signposting etc), then time spent improving content is always a better use of time than time spent on design.

Just my 2p.

-johnk (February 01, 2011, 02:47 PM)

What if it's just a little fun to change things around?  That's why I'm doing it now, it's like stress relief for me.  I like to practice making my websites look like other ones that I find nice.

[johnk]

What if it's just a little fun to change things around?  That's why I'm doing it now, it's like stress relief for me.  I like to practice making my websites look like other ones that I find nice.

-superboyac (February 01, 2011, 02:53 PM)

Absolutely nothing wrong with that, of course, particularly if you enjoy it. I was just talking about people I've seen wasting huge chunks of time on re-designs, thinking it would get them more readers, when what they really needed was better content.

[superboyac]

What if it's just a little fun to change things around?  That's why I'm doing it now, it's like stress relief for me.  I like to practice making my websites look like other ones that I find nice.

-superboyac (February 01, 2011, 02:53 PM)

Absolutely nothing wrong with that, of course, particularly if you enjoy it. I was just talking about people I've seen wasting huge chunks of time on re-designs, thinking it would get them more readers, when what they really needed was better content.

-johnk (February 01, 2011, 02:57 PM)

My business partner would say the same about me.  That's why I secretly fiddle around with my personal site, and then I'll apply it to the business site.