FONT Tag and Its Elements

FONT Element In HTML

Font is very important element of HTML. With font tag you can increase the font size which make the contents more readable. You can apply different font on your heading and give different color. You can also use a <basefont> tag to set the over all of your text to the same size, face, and color. The font tag are used with three attributes which are size, color, and face to customize your fonts.

Font Size Attribute

You can set content font size using size attribute. The size attribute value can be absolute or relative.

Absolute Font size

Absolute font size always fixed and remain the same in all browser and user can not change. When you know about the physical size of the output for example screen resolution etc then use Absolute font size.

when you do not specify a font size then default font size of normal paragraphs is 16px or 3 or 1em or 12pt.

There are different number from 1 ( which is smallest value of font size ) to 7 (which is largest value of font size) are used to define the size of text in your webpage.

<font size="1">Font size="1"</font><br />
<font size="2">Font size="2"</font><br />
<font size="3">Font size="3"</font><br />
<font size="4">Font size="4"</font><br />
<font size="5">Font size="5"</font><br />
<font size="6">Font size="6"</font><br />
<font size="7">Font size="7"</font>

This will produce following result:

Font size="1"
Font size="2"
Font size="3"
Font size="4"
Font size="5"
Font size="6"
Font size="7"

You can also define the font size in pixel and em and point. for example

<font size="16px">This is font size in pixel</font>

<font size="1em">This is font size in pixel</font>

<font size="12pt">This is font size in pixel</font>

Note: - Font size in 16px or 12pt or 3 or 1em are same.

Relative Font Size

The relative font size depend on the font size of the parent element. you specify the relative size in % or in em.

For example:

<div style="font-size=16px">

This is normal text<br />

<p style="font-size=2em;">This font size is twice of normal font which is 16px </p>


This will produce following result:

This is normal text

This font size is twice of normal font which is 16px

Note: - In above example <p> with size 2em is parent of an div element with size 16px .So <p> font size is 2 time bigger form div size which is 16*2=32px. So where normal text is 16px or 12pt <p> font size is 32px or 24pt. You can also use <p> size in % to make its relative. for example <p style="font size=200%">

Font Face Attribute

You can set font of your text using font face attribute. if your specified font face not available on user computer then user will see the default font face.

<font face="calibri" size="5">calibri</font>


Alternate font faces

If you define a font face in your webpage, and its not available on user computer then the default font will be display in place of your specified font face. So it is also possible that you specify the two or more font face. All the font face names are separated by a comma ( , ). For example

<font face="calibri , arial">

 Font color Attribute

With the help of Font color attribute you can set the display color of you text. You can specify the color that you want by either the color name or hexadecimal code for that color.

<font color="#FF00FF">This text is in pink</font>

This text is in pink