Changing Text Size, Text Color & Font Face
Print This Post
One CommentRelated Reading |
In this lesson of our free online web design course, we are going to add more flavor to our text by changing its color, size and font type. To do that, we’re going to use the <font> tag along with “size”, “color” and “face” attributes.
Copy and paste the below HTML code into your notepad:
| <html> <head> </head> <font color=”red” size=”5″ face=”arial”> This is a red text with a size of 5, written in the “Arial” font. </font> </body> |
As our text indicates, we have created a red text with a size of 5, written in the “Arial” font by using the <font> tag and the “color”, “size” and “face” attributes. Now, save your file as HTML and double-click it to open in your web browser. You should get the below output:
| This is a red text with a size of 5, written in the “Arial” font. |
The font tag has only these three attributes – color, size and face. Color can be anything from black to white. You can use the name, or the color hex code (i.e. #FF0000,#559A2E, etc.) to indicate the color. The size can vary from 1 to 7, where 1 is the smallest and 7 is the biggest.
A Word About Font Faces
Font types (i.e. font “faces”) are a bit of a grey area – there is a huge number of font faces on the internet, but very few of them can be used effectively; as most font faces can not be found on most end-users’ machines. That means, if you use the rare face “Aircut” in your site, many people won’t be able to view your site like you do, as they probably do not have the “Aircut” face installed on their computers. To negate this, you can define more than one font face (i.e. substitute font faces) for your text by separating them with a comma. For example you can use <font face=”aircut,arial”> and the end user’s browser will first look for the font face “Aircut”, and if that face is not available, it will use “Arial” instead. The most commonly used font faces are: Times New Roman, Arial, Verdana, Courier, Mono, Serif and Sans-Serif. I generally prefer “Verdana”.
Setting Attributes Of The <Font> Tag
Now that we’ve talked about font faces, let’s resume our free online web design course by delving deeper into setting the attributes of the <font> tag.
When writing a <font> tag, you don’t need to include all three attributes. You can use the <font> tag even if you only want to change the color of a certain text and not the size or the font face, for example. For that you need to include only the “color” attribute:
| <html> <head> </head> <font color=”red”> <br><br> <font color=”blue”> <br><br> <font color=”green”> </body> |
The output is:
| Red Text
Blue Text Green Text |
Or you might wish to change the size of a certain text. For that you ought to use only the “size” attribute of the <font> tag:
| <html> <head> </head> <font size=”2″> <br><br> <font size=”4″> <br><br> <font size=”7″> </body> |
In this case, our output would be:
| Small Text
Medium Text Big Text |
Or maybe, you want to change the font face of your text. For that purpose, you can use the “face” attribute alone:
| <html> <head> </head> <font face=”verdana”> <br><br> <font face=”arial”> <br><br> <font face=”times new roman”> </body> |
And we have this output:
| Text In Verdana
Text In Arial Text In Times New Roman |
You can also use two attributes at the same time:
| <html> <head> </head> <font face=”verdana” size=”5″> </body> |
To get an output like this:
| Big Text In Verdana |
Anyway, I am sure you get my point… 
If you enjoyed this lesson, please link to it
Our basic text formatting lesson is over. Proceed to the next lesson of online web design course to learn about web colors and color hex codes.
Loading ...
It give me more benefit , thanks for being here.
Sushila Sapkota