Font Faces and Font Colors in HTML

Different font styles (faces) are used in the webpages as well as in other documents to show the text in different styles and formats. For this purpose HTML provides us element. Using font element we can format the text in different styles, color and size. Let have look at each of the following!

Font Face:

Font face is the name of the Font which you are using currently in for your webpage or part/section of the webpage. Different famous and mostly used font faces are Arial, Comic Sans, Courier, Georgia, Times New Roman and Verdana.

Example:

Code:

<font face="Arial">I’m <b>Arial</b> style text</font><br />
<font face="Courier">I’m <b>Courier</b> style text</font><br />
<font face="Times New Roman">I’m <b>Times New Roman</b> style text</font><br />
<font face="verdana">I’m <b>Verdana</b> style text</font><br />

Result:

I’m Arial style text
I’m Courier style text
I’m Times New Roman style text
I’m Verdana style text

Font Color:

Color property of the Font element is used to display the text in different colors instead of default black. HTML provides some color names-such as red, green, blue, sky blue, white, etc. - which can be used as value of the color property.

Example:

Code:

<font color="green">I’m <strong>Green</strong> colored text</font><br />
<font color="blue">I’m <strong>Blue</strong> colored text</font><br />
<font color="purple">I’m <strong>Purple</strong> colored text</font><br />
<font color="orange">I’m <strong>Orange</strong> colored text</font><br />

Result:

I’m Green colored text.
I’m Blue colored text.
I’m Purple colored text.
I’m Orange colored text.

Font Size:

Size is also a property of the font element which is used to display text in different size. It ranges from 1 to 7 units.

Example:

Code:

<font size="1">I’m size <strong>1</strong> text</font><br />
<font size="2">I’m size <strong>2</strong> text</font><br />
<font size="3">I’m size <strong>3</strong> text;</font><br />
<font size="4">I’m size <strong>4</strong> text</font><br />
<font size="5">I’m size <strong>5</strong> text</font><br />
<font size="6">I’m size <strong>6</strong> text</font><br />
<font size="7">I’m size <strong>7</strong> text</font><br />

Result:

I’m size 1.
I’m size 2.
I’m size 3.
I’m size 4.
I’m size 5.
I’m size 6.
I’m size 7.