Type faces

[echoSwe]

I have a quick question that I'd love to get answered. What do you guys think about type-face consistancy on a web page on for example headings? Is it alright to have one typeface on the frontpage and then another one when the user clicks the article?

As it is now I have to make up my mind about that, because I really like the way serifs look on teasers, but then, when it comes to longer reads, such as in the actual article itself, it might prove easier on the eyes (both physically and phycologically) to have sans-serif fonts.

What's your take on it?

[DanielOliver]

You need consistency in your work. I wouldn't vary type face too much. I would never have any more then 2 or 3 for one website. Perhaps one for headings and then another for body text.

I wouldn't change between pages though. I think that the body text shoudl stay the same throughout the website. Headers and sidebars etc can vary in style and as I said before, perhaps your headings could be a different type. I never vary the type too much. Just different styles such as varying suzes, weight and colours. The actual font stays the same as much as possible.

Different fonts display best at difference sizes so it is important that you find a good balance and dont go over the top and use lots of different fonts. It will just end up looking pretty poor. Keep it simple.

[eKstreme]

The key, as Dan said, is consistency. My personal maximum is three: one for the site heading image (the logo if you will), one for the text headings (h1, h2, ...) and one for the text.

As for legibility, you are right you need a sans-serif font. The main factor controlling that in a font is its aspect ratio or aspect value. It is the ratio between the font-size and the x-height. Verdana has an aspect ratio of 0.58. So, if the font-size 10pt, the height of the letter x will be 5.8pt. The higher the aspect ratio the more legible the font is.

The other factor that helps is line-height. Set it to at least 1.5x spacing and I bet you will see a massive jump in legibility. It will make the page look less cramped.

Some reading for you:

http://www.w3.org/TR/REC-CSS2/fonts.html

http://www.w3.org/TR/2002/WD-css3-fonts-20020802/

And search WDF here for fonts. This has been discussed before many times.

[echoSwe]

Well thanks for the answers. (but I do know how to use CSS, promise ) I didn't remember the stuff about the aspect ratio though, so thanks for that info. What happends if the aspect ratio is one then? Does it become even more readable?

Also, readability on the screen in small sizes might require sansserifs but in larger font sizes readability can even increase with serifs as the actual serifs (the flirps and dots and stuff) become clearer.

I'll post the site when it's done, in the "how's my site" forum and we can discuss my choices further there (more substance then). Thanks again for the tips.

[eKstreme]

(This is me just thinking out loud. Shoot me down if I'm wrong )

What happends if the aspect ratio is one then? Does it become even more readable?

The font size is defined as distance between the top of the ascenders to the bottom of the descenders - i.e., approximately the height of "bq". Now, the aspect ratio is the ratio of font size to the height of small letter x.

If the aspect ratio is 1, then - by definition - you will have a small letter x to be equal the full height of bq. That would produce a very blocky set of characters that do not have ascenders or descenders. Think of it as a series of squares that each letter has to fit in. It will be a mono-spaced/fixed width font. I wouldn't call it pretty!

More legible? Maybe, strictly speaking, but it might strain the eye and thus make less legible. Monospaced fonts are not more legible than variable-width fonts. You lose ligatures and the the variation in spacing you get for letter-combination such as AV and eV. In short, you lose all the advantage of variable-width fonts.

And as for legibility at higher font sizes, I think you're right. It could boil down to personal preference though...

[Shadowfiend]

Aaand, no matter how good a read the W3C's CSS3-Fonts working draft might be, at this point it's little more than a good read, since it's not a specification yet and I doubt many browsers have it implemented (not really even sure if Firefox has this one implemented, though I know they've done others such as the border-radius stuff).