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.
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.
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>
</div>
This will produce following result:
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%">
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>
calibri
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">
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
HTML Forms
HTML DECIMAL Color Code and HEX Color Code
HTML Nested Lists
Elements and Tags In HTML
4 Primary Tags In HTML
Create Your First Web Page in HTML
Attributes in HTML Tags
HTML DOCTYPE Declaration
HEAD Tag in HTML
Meta Tags in HTML
Body Tag in HTML
H1 to H6 HTML Elements
Basic HTML Elements
HTML Table Element
Basefont HTML Element
Formatting Element in HTML
Font Element In HTML
Style Element in HTML
CSS Properties
DIV in HTML Document
List in HTML
Creating Menus With HTML list
Creating Horizontal Menu With HTML list
HTML Image Tag
Hyperlinks In HTML