HTML Fonts

HTML fonts play an important role in building a website more user-friendly. They increase readability. Font face and color depend upon the computer and the browser that is being used to view your page.

HTML Fonts

You can customize your fonts by using tag.The tag three attributes like size,color, and face.You can use the tag <basefont> to set all your text to the same size,face,color.

Set Font Size

You can set the content font size using a size attribute. While the range of accepted values is from 1 to 7.And the default size of a font is 3.

Example:

<!DOCTYPE html>
<html>
   <head>
      <title>Font Size</title>
   </head>
   <body>
   <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>
   </body>

</html>

Relative Font Size

You can specify how many sizes larger or how many sizes smaller than the preset font size should be. You can give it like or

Example:

<!DOCTYPE html>
<html>
   <head>
      <title>Relative Font Size</title>
   </head>
   <body>
     <font size="-1">Font size ="-1"</font><br/>
     <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>
   </body>
</html>

Setting Font Face

Font face can be set using the face attribute. But if the user viewing the page doesn’t have the font installed, they will not be able to see it. In this case, the user will see the default font face applicable to the user’s computer.

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Font Face</title>
  </head>
  <body>
  <font face="Times New Roman"size="5">Times New Roman</font><br/>
  <font face="Verdana"size="5">Verdana</font><br/>
  <font face="Comic sans MS" size=" 5">Comic Sans MS</font><br/>
  <font face="WildWest"size="5">WildWest</font><br/>
  <font face="Bedrock"size = "5">Bedrock</font><br />
  </body>
</html>

Alternate Font Faces

A user will be able to see your fonts if they are installed on their computers. Therefore it is better to specify two or more font face alternatives by listing the font face names separated by a comma. When your page is loaded the browser displays the first font face available. If none of the fonts are installed then it displays the default font face Times New Roman.

Example:

<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">

Setting Font Color

Any font color can be set using the color attribute. You can specify the color you require either by color name or hexadecimal color code.

Example:

<!DOCTYPE html>
<html>
   <head>
      <title> Font Color</title>
   </head>	
   <body>
    <font color = "#FF00FF">This text is in pink</font><br />
    <font color = "red">This text is red</font>
   </body>	
</html>

The <basefont> Element

The <basefont> element sets a default font size, color, and typeface for any parts of the document that are not contained within a tag. You can use the elements to override the <basefont> settings.

The <basefont> tag also takes color, size and face attributes and it also supports relative font setting by giving size value of +1 for a size larger or −2 for two sizes smaller.

Example:

<!DOCTYPE html>
<html>
   <head>
      <title> Basefont Color</title>
   </head>	
   <body>
     <basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
     <p>This is the page's default font.</p>
     <h2>Example of the &lt;basefont&gt; Element</h2>      
     <p><font size = "+2" color = "darkgray">
            This is darkgray text with two sizes larger
         </font>
      </p>
      <p><font face = "courier" size = "-1" color = "#000000">
            It is a courier font, a size smaller and black in color.
         </font>
      </p>
   </body>	
</html>

HTML/XHTML Standard Fonts

Fonts are specific to the platform. The look and feel of any web page vary from one OS to another.HTML tag are deprecated in version 4.0 onwards and it is suggested to use CSS.

Syntax: body { font-family: “new century schoolbook”; }

(or)

<body style = “font-family:new century schoolbook;” >

Fonts for Microsoft OS and Browsers

Font	Font	Font
Andale Mono	Aria	Arial Bold
ArialItalic	Arial Bold Italic	Arial Black
ComicSans MS	Comic Sans MS Bold	Courier New
Courier New Bold	Courier New Italic	Courier New Bold Italic
Georgia	Georgia Bold	Georgia Italic
Georgia Bold Italic	Impact	Lucida Console
Georgia Bold Italic	Impact	Lucida Console
Lucida Sans Unicode	Marlett	Minion Web
Symbol	Times New Roman	Times New Roman Bold
Times New Roman Italic	Times New Roman Bold Italic	Tahoma
Trebuchet MS	Trebuchet MS Bold	Trebuchet MS Italic
Trebuchet MS Bold Italic	Verdana	Verdana Bold
Verdana Italic	Verdana Bold Italic	Webdings

Fonts for Macintosh Systems

Following are the list of fonts supported by Macintosh System 7 and higher versions

Font	Font	Font
American Typewriter	Andale Mono	Apple Chancery
Arial	Arial Black	Brush Script
Baskerville	Big Caslon	Comic Sans MS
Copperplate	Courier New	Gill Sans
Futura	Herculaneum	Impact
Lucida Grande	Marker Felt	Optima
Trebuchet MS	Verdana	Webdings
Palatino	Symbol	Times
Osaka	Papyrus	Times New Roman
Textile	Zapf Dingbats	Zapfino
Techno	Hoefler Text	Skia
Hoefler Text Ornaments	Capitals	Charcoal
Gadget	Sand

Fonts for Unix Systems

Following are the list of fonts supported by most Unix System variants

Font	Font	Font
American Typewriter	Andale Mono	Apple Chancery
Charter	Clean	Courier
Fixed	Helvetica	Lucida
Lucida bright	Lucida Typewriter	New Century Schoolbook
Symbol	Terminal	Terminal
Utopia