weballey logo
 
left Misc - fonts right
homesearchsite mape-mail
< fonts >
meta tags
special chars
special chars list
custom errors
      All web browsers use standard fonts. Mostly two types, one for proportional, one for monospaced fonts. Proportional (or variable width) characters adapt in width, an "m" uses more space than an "i". Monospaced (or fixed width) characters are all equal in width, typewriter style.

proportional: mmmmmmmmmm iiiiiiiiii
monospaced: mmmmmmmmmm iiiiiiiiii

    Most browsers use "Times" for proportional fonts. This font was originally developed by the London Times news paper. "Courier" is used for monospaced. This was a very popular font used for mechanical typewriters. Both are normally set to 12 points (1/72nd of an inch).

Serif and sansserif
    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. Sansserif characters generally display a lot better on screens. Sansserif litterally translates to "without stroke". Probably the most popular sansserif font is Helvetica or derivatives like Windows' Arial. This font is used throughout WEBalley.

<FONT FACE="Arial">...</FONT>

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.

<FONT FACE="Arial,Helvetica,Sansserif">...</FONT>

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, Sansserif on UNIX. The same is true for monospaced fonts in the line below.

<FONT FACE="Courier New,Courier,Mono">...</FONT>

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.

<FONT SIZE="2">...</FONT>

    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 <BR> 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 <BR> tag immediately after the block of text (with break).
    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 <BR> tag immediately after the block of text (no 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.

<FONT COLOR="red">...</FONT>

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.

bottom  
left Copyright © Gerben Hoekstra - All rights reserved right