Text Formatting


Formatting webpage is probably the most visible part of web design; in this chapter we will learn text formatting.
We can change face (font style) and size of fonts using <FONT>...</FONT> tags by setting the respective parameters (attribute) of this tag.

Font size
To change size of font in a part of text, enclose it with a <FONT> tag as below:
<FONT SIZE=7>This text will be big</FONT>
You can change the “7” size of font. Size of font must be a number between 1 and 7. If you insert some text without determining its size default size will be 3.

<HTML>
<HEAD>
<title> Bengallery Info. Tech. (BIT) the leading web solution developer </title>

</HEAD>
<BODY>
<FONT SIZE=1>very small</FONT><br>
<FONT SIZE=2>still small</FONT><br>
<FONT SIZE=3>normal size</FONT><br>
<FONT SIZE=4>getting big</FONT><br>
<FONT SIZE=5> getting bigger </FONT><br>
<FONT SIZE=6>and bigger</FONT><br>
<FONT SIZE=7>Wow! The biggest</FONT><br>
</BODY>
</HTML>



The font size screenshot

 

Font style or face
Lets now see how we can use a font to set the style or face for a text.
<FONT FACE="Font Name Here">...</FONT>
You must add font name in double quotes as we have in the above line.
The code below shows an example.

<HTML>

<HEAD>
<title> Bengallery Info. Tech. </title>
</HEAD>
<BODY>
<FONT FACE="ARIAL">This is a popular font</FONT><br>
<FONT FACE="IMPACT">This text is in IMPACT font</FONT><br>
</BODY>
</HTML>

Below is the preview

Note: if the fonts type you use for the FACE this not take effect, try to check the correct spelling of the type and if you are certain about this and it still did not take effect then it is possible that the specified font is not installed on your computer.
So be careful while using new fonts. It's better to use popular and readable fonts in your design.

Alternatively you can use several font faces for each part of your text. In this way your browser will try alternative fonts if it could not find the primary one, see the line below for an example.
<FONT Face="Arial,HELVATICA">...</FONT>

Font color
Colour no doubt can be pleasant to the eyes and can make your website beautiful, but as a fine artist I will advise you to apply colors properly. Below are some tips:

No color riot: newbie to web design, are tempted to use almost all colours in their design and this is not professional. You are not supposed to use more than four colors in your design.

Color complementation: apart from the number of color, try to use colors that complement each other so that users can easily different the other text from each other for example, red is a compliment to green or better still black.

Visible colors: color visibility is very important in design, because some people a actually color blind in order not to surfer your web visitor avoid using a light font color of text on a light colored background, for example never use a yellow font color on a white background, because the visibly with be awful, but same yellow font color would be perfect if use on a black background.

Color usage: know who you client is and the purpose of the website, for example it could be ridiculous to use a pink font color of text for a own website that belongs to a law firm, while the same color could be perfect for a children game website.

Finally avoid too flashy or bright color such as raw blue or pink colors for a background, if you have to use any of such color you should consider tinting (making it light) or shading (making it darker).

Meanwhile if you’re really confuse about this whole color thing I think it would be better it you settle for a white background and a black text, as you can see almost every major website such as Google, Yahoo, Facebook etc. uses this combinations because it is more readable.  

 

Let’s take a quick look at how to apply a font color below:
<HTML>
<HEAD>
<TITLE> Bengallery Info. Tech. </TITLE>
</HEAD>
<BODY>
<FONT COLOR="#FF0000">This text is in red color.</FONT><br>
<FONT COLOR="#00FF00">This text is in green color.</FONT><br>
<FONT COLOR="#0000FF">This text is in blue color.</FONT><br>
</BODY>
</HTML>

In the above example different colors are used. You can change text color by changing color number.

Combining Font attributes
It is likely you may want to apply FONT SIZE, COLOR and FACE all to a particular text, your can do so by combining all this <FONT> tag parameter or attribute. In this way we will be able to have text with different colors, font faces and font sizes.

<HTML>
<HEAD>
<TITLE> Bengallery Info. Tech. </TITLE>
</HEAD>
<BODY>
<FONT SIZE="7" FACE="IMPACT" COLOR="#00FF00">
Welcome to my website.
</FONT>
</BODY>
</HTML>

 

Next »


Creating webpage with HTML »

META Data »

Background colour »

HTML Versions »

Setting up a website »

Break Line, paragraph and alignment »

Special character, bold, italics, underline and marquee »

Text Formatting »

Listing items and Horizontal rule »

Images »

Tables »

Hyperlink »

Form »