 |
|
 |
|
Text Styles and Fonts |  |
|
|
There are HTML 'tags' available for use which will provide you with the capability to enhance the text on your Web pages using four different styles with many different font faces, 140 color names, and seven font sizes -- for best viewing by visitors using Netscape 3.0 and higher, or Internet Explorer 3.0 and higher.
TEXT STYLES: There are basic and distinct basic styles you can use for text on your Web pages:
1) Regular Style -- the default text font and font size -- with the
text color set by the use of text="colorname or colorcode" attribute tag
inside the body tag. Just type in your text without any added tags.
2) Italic Style -- Surround your text with the <i></i> tags -- example:
Would appear on your page as:
your text
The text font and font size will be the default font and size -- and the text color will be that determined by the text="colormane or colorcode" attribute tag inside the body tag.
3) Bold Style -- Surround your text with the <b></b> tags -- example:
Would appear on your page as:
your text
The text font and font size will be the default font and size -- and the text color will be that determined by the text="colormane or colorcode" attribute tag inside the body tag.
4) Bold Italic Style -- Surround your text with the <b><i></i></b> tags -- example:
Would appear on your page as:
your text
5) Other styles available but seldom used:
- Underline -- your text
- Typewriter -- your text
- Superscript -- your text
- Subscript -- your text
- Strike Thru --
your text
- Emphasis -- your text
- Strong -- your text
- Program Code--
your text
- Sample -- your text
- Keyboard -- your text
- Variable -- your text
- Defined -- your text
- Citation -- your text
- Small -- your text
- Big -- your text
The text font and font size will be the default font and size -- and the text color will be that determined by the text="colormane or colorcode" attribute tag inside the body tag.
FONT FACE: Using the <font face="fontname">your text</font> tag -- you have the capability to significantly increase the number of different styles for the text on your Web pages.
Keep in mind, though, that when you use the font face="fontname" tag -- not only do you have to have that font on your computer but so does the visitor to your page. Note: If the visitor doesn't have the font face on his/her system that you have used on your web page, the visitor will see your page in the default font face available to the visitor's system. As a result, it is always best to use font faces which are among the standard fonts that are installed with Windows 3.1 and Win95 -- Arial, Courier New, Comic Sans MS, Times New Roman, Brush Script MT, etc.
Having provided the basics for font face -- here is the font face HTML tag:
|
<font face="full font face names">your text</font> |
|
<font face="Arial, Century Gothic, Verdana">your text</font> |
your text
Note that the font face attribute will accept more than one font face name. You can, like the above example, specify a number of font faces (alternate similar fonts that maybe available on the visitors' computers) rather than depending upon the default fonts on visitors' computers. If you list multiple font faces, the fonts should be "similar". In Win95 Control Panel -- double click on the Fonts folder -- then in the View Menu, click on "List Fonts By Similarity".
Using the font face tag controls only the font type, your text color will be controlled by the text="colorname or color code" attribute in the <body> tag.
FONT COLOR: To further change the text presentation on your Web page, you can use font color tag to highlight text: for titles of articles or pages, to emphasize, or just to add color to your page. There are 140 colornames definitely supported by Netscape and Prodigy's browser and believed to be supported by Internet Explorer, and an almost
infinite number color codes which can be used on all browsers which support the font tags.
Here is the font color HTML tag:
|
<font color="colorname or colorcode">your text</font> |
|
<font color="red">your text</font> |
|
<font color="#ff0000">your text</font> |
your text
Font color tag can be used in combination with other font attributes, such as font face tag. When two or more font attributes are used for the same text, these attributes are combined into one font tag, such as this example using font face and font color:
|
<font face="Arial" color="red">your text</font> |
your text
FONT SIZE: In addition to font face and font color -- you can change the size of the text on your Web page by using font size tag. However, please note that the same font size will vary in apparent size depending upon the browser being used or whether a Mac or PC is being used to view the page. That is to say, the same font size coding will
appear different in size when viewed on different browsers. Too, there will be a variation in size when the page is viewed by a Mac versus a PC, even if both are using the same browser.
Another word of caution: Do not combine heading tags, like <H1>, <H2>, <H3>, etc. -- with font size tags or attributes.
There are seven (7) specific and distinct text sizes which can be used with font size="n" where "n" can be an absolute size: "n" absolute = "1", "2", "3", "4", "5", "6", and "7" -- default (absence of specified size) = "3", with "1" being the smallest and "7" being the largest type.
Here the font size HTML tag:
|
<font size="n">your text</font> |
|
<font size="6">your text</font> |
your text
Also, there are seven (7) specific and distinct text sizes which can be used with font size="n" where "n" can be a relative size to a basefont size:
Example: <BASEFONT SIZE="3"> This tag located immediately after the <body> tag sets the base font size to "3".
Now the font size is "7" -- Largest Size (BASEFONT of "3" and FONT SIZE of "+4" = "7")
Now the font size is "6"
Now the font size is "5"
Now the font size is "4"
Absence of font size will make text size="3"
Now the font size is "2"
Now the font size is "1" -- Smallest Size
Font size tag can be used in combination with other font attributes, such as font face and font color tags. When two or more font attributes are used for the same text, these attributes are combined into one font tag -- such as this example using font face, font color, and font size:
|
<font face="full font face name" color="colorname or color code" size="n>your text</font> |
|
<font face="Arial" color="red" size="6">your text</font> |
your text
If you do not use font size tag, your text size will be the default size ("3"). Never mix heading tags with font size tags or attributes. use either headings tags or font size tags or attributes. If you do not use font color tag, your text color will be controlled by the text="colorname or color code" attribute in the <body> tag.
PUTTING STYLES TOGETHER: Here's an example of using a number of these font and style tags
together:
To have your text in a bold italic, red, large size, special font type, here's the coding:
|
<b><i><font face="Arial" color="red" size="6">your
text</font></></b> |
your
text
Copy the above coding -- paste it on a Web page in your HTML editor, then change the "face name", change the "colorname", and change the "size" -- and see the effects.
Using multiple styles, varying the text colors, font sizes, and font faces, can help you to create an interesting, colorful, and easy to read Web page.
|
|
