Having Fun With Your Text To Make A Statement On Your Site
When you are creating a website, you want your content to be read and understood. The type, color and size of your font can affect how user friendly and practical your website will be.
You don't really want all text to be exact. To break up the monotony, such as to differentiate between your headline, sub-headline, main content, footnotes and so forth.
There are two basic ways to approach the text solution on your website - direct html codes or use of css style sheets.
I would highly recommend the later. In a style sheet you can layout your standards from one file and change them as you need it. To change your font styles directly using only html will limit what you can do.
Direct Codes Into Your HTML
Header Size
One of the things are included in all document types is the header sizes such as:
- <H1>
- <H2>
- <H3>
- <H4>
- <H5>
- <H6>
H1 is the largest and H6 is the smallest.
Font Tags
Another way to change your font size is within a <font> </font> tags where you can add on more attributes to your text. These font tags will work for most using HTML 4.0 or earlier, but will not work on XHTML at all.
To change the size of your text using the font tags you would use these tags <font size="#"> and </font>. The # can range from very small -3 to very large +10.
Here are a few samples of these font sizes on text:
- <font size="-3">
- <font size="-1">
- <font size="+1">
- <font size="+3">
- <font size="+10">
However, it is better to use the Header tags for size.
When you use the font tags, you can also create attributes to the color of the text in between the tags. The specific command to color would be <font color="#RGB"> . Use the color code chart to find the color you want to use to replace RGB.
You can also use this font command to change the physical look of the text by using <font face="font type">.
Note: Some of the texts you are seeing on your screen will not look exactly the same on some browsers. Why? Because not everyone will have the same fonts their browsers can read. Unless they specifically download all of these fonts, they will not see anything unique in the font you use. Be on the safe side, stick with Times, Arial, and Rockwell which almost everyone has by default.
Just be sure to temper some of the outlandish fonts with something toned down. It would be very hard to read if all your text were in Storybook or one of the fancy fonts, although they make great headlines and sub-headlines.
A complete tag example that would change the font face, size and color would look like this:
<font face="Vogue" size="+2" color="#800000"> </font>
CSS Style Sheets
As I mentioned earlier, using a style sheet is a more effective way of creating your text differences. For instance, if I wanted all the header tags in my site to look like this:
THIS IS A HEADER ONE
The style sheet would read:
h1{font-family: "Lucida Sans", "Arial Black", Sans-serif;font-size: 120%;text-align: center;color:#FF0000;}
So everywhere in my site where I would have an H1 tag, all text would look like the above example with Lucida Sans as the main text followed by the choice of Arial Black for those without Lucida Sans and a last choice of Sans-serif for those without either. The text will be 120% times the standard size. The text will be centered and the color will be red.
To change things a bit, if I didn't want to settle for a standard paragraph tag, I could make sure certain sections labelled in a content area had specifics such as:
.content {font-family: Arial, "News Gothic", Sans-serif; font-size: 90%;color: #000000;background: #CEFFE3;text-indent: 20px;text-align: left;}
You are reading in a section made from that exact code above.
My fonts are defined in order from preferences. It is always good to give 3 or more choices because not everyone will have the same fonts installed on their computers as you do. If your font-type is more than one word, be sure to put it in quotation marks like the "News Gothic" above.
I have the font set at 90% of the normal. You could express your font-size in percent, pixels, decimals or even ems.
You can even set the background behind your text as well as the color of the text itself. It will really highlight your text if your background is a different color from the normal background of your page. Don't overdo that effect, or at least use it consistently.
Just remember, the color command is for the text color itself and the background command is for the color behind your text.
You can also choose to indent your paragraphs by adding a text-indent command and follow it in percent, pixels, decimals or ems for the degree of indentation you want to achieve.
To align your text, you have to use the command text-align and choose left, right, or justify.
 |
JCE Enterprises Related Sites |