Main Area and Open Discussion > Living Room

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

(1/2) > >>

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.

Navigation

[0] Message Index

[#] Next page