Let's Talk Fonts!

[mtbbrian]

So I am trying to redo my website and am looking at what fonts to use.

My question is how many different fonts is acceptable or works best in a website?
Shall I use the same one throughout? Or Use two? One for say the home page and an information kind of page and a second for all photo pages?

Discuss...

Brian

[Peter_AUS]

Brian think along the lines of a newspaper and you can't go wrong. The problem that occurs when using different fonts is you should stick to the main stream fonts otherwise when your page loads, if the person doesn't have that particular font then they get errors on the page and/or the font is substitute for font other than the one you used.

If you are using say a banner with different fonts than the general then it is a good idea to make the banner as a graphic with the font embedded in the banner, like a photo, that way they don't have font problems.

I generally myself, stick with same family of fonts for most website development and use the sizing, bolding and italics to differentiate between relevant and not as relevant info. Or to say it another way emphasise what I am trying to get across to potential readers/customers/visitors to my websites.

Does that make sense to you.

[MarcusK]

Font compatibility is definitely an issue to be carefully considered, I would agree, yet there is another issue concerning the use of multiple fonts that is overlooked by people who did not get on someone's bad side when designing a web page or any other design for that matter! (obviously i have!) It was only then that i took the time to research the matter of fonts.

Typography is quite a field and design with type is one fascinating field, i personally think the most difficult in design!

However, we usually tend to use different fonts to create this effect of diversity or something else, but the more fonts you use the less enjoyable it will be!

If you want to use more than one font use 2. One for the major info and one for the details, in all the pages!

Personally however i would agree with Peter that the use of one font is best, and then just play around with it by changing to italic, bold and/or size is much better!

[mtbbrian]

Thanks for confirming my thoughts.
I will stick with one font.
Trouble is choosing one!

Brian

[Peter_AUS]

Brian I find of all the fonts, Times Roman is the easiest for me to read, seems to be nicer looking. Just keep the font a clean looking font and you should be OK.

The default here is Arial.

Another that is commonly used is Courier.

[mtbbrian]

Peter,
Yeah Times is what I am using on my site already.
I do agree with you on the ease in reading it.
Thanks!
Brian

[berrywise]

I'm a fan of verdana. Two cents!

[Peter_AUS]

This is Verdana Font

This is Times New Roman Font

Both are at size 3 for comparison.

[Asylum Steve]

I will stick with one font...

Brian, there is no single simple discussion or rule when it comes to fonts on a web site.

There are (at least) three distinct font situations and solutions, and what you decide to use will depend on your skill as a graphic designer, the content of your site and the image you're trying to get across to your viewers, and of course, the sophistication and graphic-saviness (hmmm, is that a word?) of your target audience.

At it's most basic, the "keep-it-simple" advice you've gotten so far is sound, but it's also the most boring and limiting, design-wise. That's the tradeoff, and if it's acceptable to you, you can rest assured your site will pretty much look a certain way consistenly in most all web browsers with very little work on your part.

To do this, stay within the handful of default web fonts standard in most browsers, and stick to no more than one or two seperate fonts on your site. Think Yahoo's home page... :Yawn:

A creative step up above that is to embed fonts in your HTML. I have no experience at this, but do know that you code a page (or site) to load a font file to a viewer's browser when they first view the site (the file size is roughly the same as an image file, and so does not affect loading times). When your page calls for a less conventional font to be displayed, the file is now (temporarily) on the viewer's browser and so creates the text with that font.

Granted, this is a far from perfect method, and viewers can disable the font file loading or otherwise configure their browser so it may not work correctly, so it's a crapshoot for the masses. But it does allow you to be more creative with your web text fonts with many viewers...

Finally, any decorative or creative font use above and beyond the most simple and basic requires (as already mentioned) incorporating the font into a web graphic that loads in your viewer's browser like any photo image file.

IMO, for anything more than standard paragraph text, this is the way to go. There is no other way to create exciting type design and incorporate it perfectly into web graphic art.

For this type of use, there are NO rules. Well, certainly not a single font rule, at least. If you want a perfect example (with all modesty aside), look at my web site...

My splash page contains at least six seperate type fonts, and my lobby (home) page eight! But (hopefully) I now what I'm doing, and instead of clashing, they blend and add style to the design... :thumbsup:

Now, if this isn't one's cup of tea, that's fine and all are entitled to thier opinions, but my experience has been the more educated and experienced at graphics and art my viewer's are, the more they like and appreciate it.

And, as they are my target audience, I know I'm doing the right thing...

[ekstasis16]

There's been a lot of good advice so far, so I'll try to keep this brief.

Safe fonts you can use include:

• Times New Roman
• Times
• Arial
• Verdana
• Trebuchet MS
• Helvetica
• Geneva
• Courier New
• Georgia

As far as fonts on the Web, there have been repeated usability studies that show sans-serif fonts such as Arial and Verdana are easier to read on screen. Serif fonts work well at large sizes, but at common paragraph sizes (11px - 14px) many users have some difficulty.

I'd say you can safely use up 3 or 4 fonts across a site if you know what you're doing. The key is to BE CONSISTENT with fonts and sizes for the different sections of your layout.

Take a look at this template for the site I work on. We use 4 fonts that are defined in our brand identity for the Web: Gill Sans, Bembo, Arial and Verdana.

Gill Sans and Bembo are not common fonts, so we use them in GIFs and JPEGs or through the use of sIFR, a very cool combination of technologies that allows you to use uncommon fonts without placing them in graphics. It plays nice with Web Standards and degrades gracefully if the user doesn't have Flash or has Javascript disabled.

If you right-click on the H1 and H2 headings, you'll see its Flash, which displays the Bembo font nicely.

We use Arial and Verdana for the screen text. Arial 12px is the paragraph font, and Verdana 11px and 12px is used for sidebar links and other less important items.

My point is you can get away with using several fonts, as Steve said, if you do it correctly and consistently.