October 14, 2003 | View Comments (9) | Category: Design
Summary: The selection of fonts for your website should not be something taken lightly. Fonts usually can play a greater role then you think on your website.
What font size you choose to display on your site can have a great effect on the feeling that your audience receives from the site. Font attributes such as letter-spacing and line-height can make reading on your site that much more enjoyable. Let's discuss.
It seems that the default font for the web is Verdana. Verdana is a sans-serif font that works really well at smaller sizes such as 11px-12px. Unless your OS has some sort of antialiasing (can't wait for the day to come where everyone has this) then at larger sizes Verdana becomes much less appealing. Times New Roman, a serif font, looks really good in larger sizes. I am now only recently gathering an interest in fonts because I am beginning to see the large role they play in the design world. However, try discussing fonts with a typographic expert and it seems you are entering a religious war. Discuss fonts with me and I will keep it simple, since that is my understanding of them.
When selecting a font I take great interest into what feeling I am trying to give the site. If I am going for a more older, professional type feel I will more than likely use serif fonts. For the more modern feel I apply sans-serif fonts. I am not saying that you should do the same, but for some reason serif fonts just give me that old time feeling. It is believed that serif fonts are best for reading because they lead your eyes from word to word. I do not know if this is a great benefit over sans-serif fonts because my eyes move well from left to right anyways.
A good site that uses Times New Roman with splendid results is The Daily Flight. Andy makes Times much more attractive than other sites do and shows that it does not have to be the ugly stepchild of the web.
If you want a good example of serif fonts then just go to your favorite site and more than likely they are using them. That is just the way it is it seems.
Line-height should be applied no matter what font-family you are using. Usually the default value for line-height does not encourage great legibility in your site. Simply adding a line-height of 150%-170% can greatly improve the reading experience of your site. Try it for yourself and you will see. I like to use letter-spacing more when I am using serif fonts. Sans-serif fonts usually look okay with their default letter-spacing however, serif fonts usually benefit from a letter-spacing of 0.1em.
I don't know if this is even going to help anyone out, but I wrote it more to help people understand that whenever designing a site you should not be so quick to just default to Verdana. Play with different fonts and you will see how different they make your site look.
Trackback URL: http://9rules.com/cgi-bin/mt/mt-tb.cgi/26
Oh.. should also note there are only a very small number of fonts which are considered 'safe' because they are installed by default with Windows 98+ and MacOS. Of those, the only two designed specifically for use on the web rather than print are Verdana and Georgia.
The only 'safe' monospace font is courier. Lucida Console is much easier to read, though, and is fairly common, so I usually do... "Lucida Console, Courier New, Courier, mono"
'safe' fonts... arial/helvetica, verdana, trebuchet for sans
times/times new roman, georgia for serif, comic sans for script, and courier new for mono
So, sure.. play with the fonts... but don't expect people to have (for example) TT Forever Demi and Bembo (a couple of fonts we use in all of our print material)
JC (http://www.thelionsweb.com/weblog)
JC: Didn't know you were such a font conniseur (horrible spelling on that one). What I mean with increasing verdana is in non-antialiasing OS's verdana looks like garbage to me with a font size of say 20px. That is a Windows thing though (without cleartype) cause in RedHat everything looks beautiful.
Scrivs (http://www.9rules.com/whitespace/)
I pretty much always make my body text Verdana, regardless of the "feel" I'm going for. I'll usually branch out a little more with heading/subheading fonts, but Verdana is pretty much a staple for me. Not really sure if that is good or bad. To me it is the most readable for screen display. Plus most of my sites are pretty simple and clean looking, and Verdana seems to fit in nicely with that, rather than serif fonts. I've also recently discovered Trebuchet for headings, which turns out really nice. And it doesn't look too bad for body text either.
www.typepad.com
and
www.kicksology.net
both use Trebuchet to very good effect, and that is where I first picked it up I think.
Derek (http://www.twotallsocks.com)
Quite funny reading here thoughts about typography, because the subject surfaced just a week ago or so on a famous French-speaking weblog
http://cybercodeur.net/weblog/commentaires/detailsCarnet.php?idmessage=676
http://cybercodeur.net/weblog/commentaires/detailsCarnet.php?idmessage=680
Verdana is definitely too big at its default 100% size, that's why most of us use it at, let's say, 75%.
The problem is that Linux users generally don't have this font installed, their browser use Arial or helvetica instead but the 75% is then of course too small.
So maybe we should switch back to Arial instead... But keep in mind that "control is illusion" !
PS: Scrivs > don't know what's the word in English, but the right spelling in French is "connaisseur" ;-)
fastclemmy (http://www.fastclemmy.com)
Heh. My mother is a graphic artist. I've had fonts pounded into me since I was 12. Well, not *that* bad, but I had to learn a lot of different print terminology and stuff just to keep up with her complaining about work. :-)
I still have no idea what you're talking about on windows. Every version of windows (well, maybe not 3.1) has antialiasing. You might have to turn it on in some versions, but it's there... display properties > effects > smooth edges of screen fonts.
ClearType is only for LCDs, it uses subpixel antialiasing (http://grc.com/cleartype.htm )
Antialiasing isn't always good though. It can make things harder to read because it essentially blurs the edges. On small fonts it can make them unreadable if it's overdone (I know on OSX you can tell some things not to antialias anything under a specific point/pixel size). But generally if you're going for a very small font it's bitmapped rather than truetype anyway; or may as well be. And of course, you'd usually use them as graphics anyway. Silkscreen is a good example: http://www.kottke.org/plus/type/silkscreen/
Clemmy, there was at one point a proposal to allow CSS to specify font faces AND sizes based on availability... for example 10px verdana, and if verdana isn't present, 12px arial. Not sure if that ever happened or not, but it would be a wonderful thing if it did.
JC (http://www.thelionsweb.com/weblog)
Consider Lucida Grande as a good (Mac) alternative to other sans-serif fonts.
Manlio (http://www.deload.it/)
Why cant they make something in like CSS where it can use a font on your server within the page without actually having to have it on every computer. That way you could use any font you wanted on the web. Maybe install a temp type font file if we have to on their computer like a cookie.
Josh (http://fuego.radiantrock.com)
JC - I think that the "smooth edges of screen fonts" antialiasing only seems to kick in above a certain size/weight, certainly on my Win2000 work PC. The body text on this page doesn't appear antialiased for me, despite having it turned on. XP's Cleartype seems to do the job on everything.
steve w
Keep track of comments to all entries with the Comments Feed
©2003-06 9rules, Inc. | Thoughts Feed | Notes Feed
Amazon Stores: Powertools | Jewelry | Books | Health | Landscaping | Kitchen | Movies
#1
Hmm. Actually, Arial/Helvetica is the default for sans-serif (pc/mac) and times/times new roman for serif (pc/mac). Most business websites use arial. Some use verdana because it's pretty universal and sets them apart a little. It's also a tiny bit easier to read.
If you're not aware of it (you said you're a novice at this stuff, right?), as a general rule, use sans-serif fonts on the screen and serif fonts in print or for printable versions. On screen, serifs do not have enough resolution to help and instead distract a bit, in print resolutions, they make text easier to read.
The problem of course is you have to use the fonts that everyone has, or people see things differently than you intend. There was some movement to stream download fonts for web pages but it was clunky and didn't work well. Now if you want to force your chosen fonts on people you need to use graphics or flash.
Not sure what you're talking about with verdana at large sizes though. I've never seen any fonts except bitmapped printer fonts that don't look better and better the larger they get. Maybe it's a linux thing? Anything vector based like a ttf is going to look significantly better and smoother the bigger it gets.
As for the line height, I've had issues with that I've not been able to figure out. When you lock into a line height of 150%, it's 150% of the base font size. If you then change the font size, the line height doesn't change along with it and you have overlapping lines. I don't remember the exact details, though, it's been a few months since I tried that.
JC (http://www.thelionsweb.com/weblog)