topbanner_forum
  *

avatar image

Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length
  • Friday March 29, 2024, 8:06 am
  • Proudly celebrating 15+ years online.
  • Donate now to become a lifetime supporting member of the site and get a non-expiring license key for all of our programs.
  • donate

Author Topic: On websites: why do sans-serif fonts sometimes look great, sometimes not?  (Read 4845 times)

superboyac

  • Charter Member
  • Joined in 2005
  • ***
  • Posts: 6,347
    • View Profile
    • Donate to Member
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:
screenshot_20110201105617.png

How can I get those characters to be more smooth?  More of a "cleartype" look?  Another thing I've noticed is this thing:
screenshot_20110201105404.png
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):
screenshot_20110201110042.png

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

  • Charter Member
  • Joined in 2005
  • ***
  • Posts: 6,347
    • View Profile
    • Donate to Member
I really like this font, spacing, the whole thing:
screenshot_20110201110447.png
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

  • Member
  • Joined in 2006
  • **
  • Posts: 88
    • View Profile
    • Donate to Member
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

  • Charter Member
  • Joined in 2005
  • ***
  • Posts: 245
    • View Profile
    • Donate to Member
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

  • Charter Member
  • Joined in 2005
  • ***
  • Posts: 6,347
    • View Profile
    • Donate to Member
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

  • Charter Member
  • Joined in 2005
  • ***
  • Posts: 245
    • View Profile
    • Donate to Member
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

  • Charter Member
  • Joined in 2005
  • ***
  • Posts: 6,347
    • View Profile
    • Donate to Member
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.
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

  • Charter Member
  • Joined in 2005
  • ***
  • Posts: 245
    • View Profile
    • Donate to Member

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.

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

  • Charter Member
  • Joined in 2005
  • ***
  • Posts: 6,347
    • View Profile
    • Donate to Member

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.

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