|
Home : Tutorial Five : Next Tutorial Tutorial Five: How To Control Font AppearanceText Now that you have a firm grounding in preparing the basis of a web page we can look at adding and formatting content - namely text. You should have gathered enough information from the preceding tutorials to prepare a template containing head content and body attributes. The W3C encourages the use of Style Sheets in document formatting, however as browsers still do not interpret Styles consistently, and older browsers do not support them at all there is still reason to use <font>. Text attributes:
A <basefont> can be specified at the top of a document. This sets the standard font characteristics for the entire document length, unless overridden by individual <font> tags and attributes. It does not require a closing tag.
The default font size, if none is specified, is 3 and the range is 1 - 7 inclusive, with 1 being the smallest. One of the limitations of web design concerns our reliance on the preferences, connection speed, system, monitor size, resolution et al of the general public - the range of differences is substantial and yet all must be catered to in the best way possible. This affects choice of font face. We must specify a font that is common enough to be installed on the majority of computers, and not one that is obscure. CurlyWhatsit might be a lovely font, but is unlikely to be widely distributed. Your website may appear stunning by using such a font, but only you will benefit from the experience - everyone else will be viewing whatever default has been set in their own browser, usually Times Roman. It is possible to allow some leeway in this concept by specifying a range of font faces within the <font> tag.
where Arial is common to PC and Helvetica to Mac, both appearing very similar. Courier is common to both platforms. Setting fonts in this way, seperated by a comma, instructs the browser to use Arial as a matter of preference, but if Arial is not installed to go through the list. If none of these are present, the browser default is displayed instead. Verdana is one font developed with a specific focus on web legibility. It is particulary good for lengthy text-based pages, but is not yet universally installed. Microsoft offer a free downloadable PC and Mac font package, and even provide a useful list of which fonts are automatically installed with their software. A common mistake in most amateur design is to use too many font faces in the one project. Try to achieve a consistent look and feel by limiting the number and style of fonts to one or two - perhaps a sans-serif font for body text (such as arial or verdana) and a serif font for headings (such as Times Roman). This applies whether you create graphical or HTML headers. There is a limited range to the font size attribute, beginning with very small (1) to large (7). You will notice that at certain sizes, the font becomes bold in appearance.
It is a good idea to always specify a font size, even though the default is 3, as once again, user default preferences will dominate if nothing is pre-selected. Also note that different font faces will result in slight size variations. Verdana, for example appears larger at size 1 than does Times Roman. Platform differences also play a part in deciding on which size to use, as fonts appear smaller on Mac than PC. If possible check your pages on both platforms. Size can also be set using a relative system if a base font has been pre-determined. For instance, if the Base Font size is 3, we could do the following:
An advantage in this method is that by changing the Base Font size, all other font tags change relatively. Font size
can be easily used to create stylish drop caps
Style Sheets offer even more control over font size and new technologies such as Embedded Fonts, a new standard proposed by Microsoft similar to Netscape Dynamic Fonts (TrueDoc) where a font is delivered within the web page itself, will improve the font dilemma in the future. Design-wise, again try for consistency. Keep your font sizes legible and don't introduce too many size variations As can be seen in the drop cap example above, color is another attribute of the font tag; another reason for understanding the use of hex color codes in creating your page.
Combining all these attributes produces a consistent look to a page, something we desire to achieve:
Consistency in choice of color is just as important as in other areas mentioned. Using too many colors is merely distracting. Keep font colors to a minimum and think about how they interact with the other design elements on the page - background, graphics, link colors. This tutorial series was authored by Wendy Phillips It is copyrighted which means you may not pinch any of it |