: How do I choose the proper font & size for my site? I once saw a textbook that recommended a certain pica range for each of several various fonts. Is there any online guide that's available?

@Kristi941

You need to keep in mind that different operating systems (Windows, Mac, Linux) have different default fonts that come as part of the OS. This means if you choose a font that is available on Windows but not on a Mac or Linux those users will see a different font. That font will be the closest match the OS can choose. If you want your site to look uniform across platforms you'll need to choose fonts that are common to all three. Alternatively you can declare multiple fonts in your CSS in the order of preference you wish them to be used. Example:

/* Sample CSS rule */
p
{
font-family: arial, helvetica, sans-serif;
}


In this example all <p> tags will use the arial font if it is available. If not the browser is to try to use the helvetica font, otherwise it is to try the default sans-serif font. Always make the last font declared a general system default. See this article for 8 font stacks that are safe to use.

Another option is to use the new @font -face CSS rule which allows you to use not standard fonts. You need to provide the font on your website but if a user's browser supports @font -face it will download it and use it. Support for this isn't uniform across browsers and some older browsers don't recognize it yet. But with a little effort it can be used in modern websites.

Font sizes will depend on the font used. The general rule is not to use small fonts as many users will have too much difficulty reading it (basically small fonts are bad accessibility). Also many users like to adjust the font sizes displayed in the browser to make it easier for them to read. If you specify your font sizes using pixels (px) this makes your site harder to use. The general rule is to use empirical units (em) which is a scalable unit and will grow and shrink as the user adjusts their browser display.

Vote Up Vote Down

@Kevin317

I'm not really sure about the correct answer - but I've learnt that you can't measure in pica on a web site (even if CSS pretends to allow that). And I'm afraid you can't measure in anything, because if a user has a 22" monitor (resolution 1920x1080), the font size will be significantly smaller compared to a 24" monitor with the same resolution. - You can't determine the monitor size from the web page.

Moreover, it also depends enormously on the font: Verdana will appear a lot larger than e. g. Times New Roman.

Having said that, I'd like to see a good guideline, too!

Vote Up Vote Down