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 <font> tag.The <font> 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 <font size = “+n”> or <font size = “−n”>

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 <font> tag. You can use the <font> 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 <FONT> 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