Fonts - Everything You Wanted To Know
All web browsers use standard fonts. Mostly two types, one for proportional, one for mono spaced fonts. Proportional (or variable width) characters adapt in width, an "m" uses more space than an "i". Mono spaced (or fixed width) characters are all equal in width, typewriter style.
Most browsers use "Times" for proportional fonts. This font was originally developed by the London Times news paper. "Courier" is used for mono spaced. This was a very popular font used for mechanical typewriters. Both are normally set to 12 points (1/72nd of an inch).
Serif And Sans Serif.
Both these fonts are so called serif fonts. The French word serif indicates the little strokes at the outer ends of the characters. They are very old, you see them in old gothic handwriting, or Greek and Roman buildings. Partly used for ornamental reasons, partly because the characters are easier distinguished.
It's a little odd they are used on computer screens. These are by nature quite coarse, which makes serif characters quite grainy and ugly. Sans serif characters generally display a lot better on screens. Sans serif literally translates to "without stroke". Probably the most popular sans serif font is Helvetica or derivatives like Windows' Arial.
...
The FONT Tag.
The html tag for fonts is a somewhat crude instrument. Most word processors let you use any font you like, as long as it's on your system. And that's the first big problem in web browsers. You have no control over other systems' fonts. So you will have to choose a font which is likely to be on any system out there.
...
Typeface.
The font tag accommodates this by letting you specify several fonts in the FACE attribute. If the first one is not available, the second is used, and so on. The set above is often used. Arial is on all Windows systems, Helvetica on Macintosh, Sans serif on UNIX. The same is true for mono spaced fonts in the line below.
...
Size.
Word processors let you specify font sizes in points exactly. No such luck in web browsers. There are seven sizes to choose from, denoted 1 (smallest) through 7 (largest). If this SIZE attribute is not used it defaults to 3. I think the default 12 point size is a bit big, so I use 2 for size, which gives you about a 10 point character. Some browsers let you set the overall font size smaller or larger. Which makes this issue even more awkward.
...
There is a nasty bug in some browsers. When using a block of text with size 1, the last line skips a line. This bug can be squashed by putting a
tag immediately after the block of text. If your browser has this bug it will show in the second text below.
There is a nasty bug in some browsers. When using a block of text with size 1, the last line skips a line. This bug can be squashed by putting a
tag immediately after the block of text (with break).
Color.
Fonts can have any color you like, much like the colors in the body tag. Keep readability always in mind, avoid clashing colors and little contrast. You can create nice shading effects. But don't make a Christmas tree out of your page by using too many colors.
...
Style Sheets.
There is a chance all this soon will be replaced by style sheets. They do let you specify exact point sizes, even use downloadable fonts. But for now I would advise against that, since not all current browsers understand them. You could however use a combination of both, should you want to.
Article written by Lee.
http://www.zippedfonts.com
