Hello dear readers! welcome back to another section of my tutorial on Html. In my last tutorial guide, i talked about Html backgrounds and the different ways we can style our Html background using either colors or images.
In this tutorial guide, am going to be discussing about Html fonts and the various font sizes and font families supported by Html.
Font play a vital role in making a web page more user friendly and increasing content readability. The Html font face and color depends completely on the computer and browser that is being used to the webpage but at the same time you can also use Html <font> tag to add style, size, and color to the text on the website, you can use a <basefont> tag to set all the text to same size, face, and color.
The font tag has three attributes called size, color, and face to customise your fonts. To change any of the font attributes at any time within the webpage, simply use the <font> tag. The text that follows will remain changed untill you close with the closing </font> tag. You can change one or all of the font attributes within one <font> tag.
Note: The font and basefont tags are deprecated and it is supposed to be removed in a future version of Html. So they shouldn't be used rather, it is suggested to make use of css to manipulate your fonts. But still for learning purpose, this tutorial guide will explain font and basefont tags in detail.
You can also read our tutorial post on: Html Tables
Set Font Size
You can set content font size by using size attribute. The accepted ranged values is from 1(smallest) to 7(largest).
The default size of a font is 3. Lets quickly look at the example below for better understanding of what we realy talking about.
Example
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<font size="1">First Font Size</font><br />
<font size="2">Second Font Size</font><br />
<font size="3">Third Font Size</font><br />
<font size="4">Fourth Font Size</font><br />
<font size="5">Fifth Font Size</font><br />
<font size="6">Sixth Font Size</font><br />
<font size="7">Seventh Font Size</font>
</body>
</html>
<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<font size="1">First Font Size</font><br />
<font size="2">Second Font Size</font><br />
<font size="3">Third Font Size</font><br />
<font size="4">Fourth Font Size</font><br />
<font size="5">Fifth Font Size</font><br />
<font size="6">Sixth Font Size</font><br />
<font size="7">Seventh Font Size</font>
</body>
</html>
If you try the above codes in your text editor you will find out that their font sizes are all different starting from the smallest to the largest. Feel free to try the above code out using your text editor to see the result for yourselves.
Relative Font Size
You can specify how many sizes larger or how many sizes smaller than the preset font size should be. You can specify it like <font size="+n"> or <font size="-n">. Lets take a look at the example below.
Example
<!DOCTYPE html>
<html>
<head>
<title>Relative Font Size</title>
</head>
<body>
<font size="-1">First Font Size</font><br />
<font size="+1">Second Font Size</font><br />
<font size="+2">Third Font Size</font><br />
<font size="+3">Fourth Font Size</font><br />
<font size="+4">Fifth Font Size</font>
</body>
</html>
<html>
<head>
<title>Relative Font Size</title>
</head>
<body>
<font size="-1">First Font Size</font><br />
<font size="+1">Second Font Size</font><br />
<font size="+2">Third Font Size</font><br />
<font size="+3">Fourth Font Size</font><br />
<font size="+4">Fifth Font Size</font>
</body>
</html>
You can try the above code out for better understanding and always feel free to ask your questions in areas you don't understand.
Setting Font Face
You can set font face using face attribute but you have to be aware that if the user viewing the web page does not have the font installed, they will not be able to see it. Instead the user will see the default font face applicable to the user's computer.
You can also read our tutorial post on: Html List
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>
<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>
You can try the above code out for better understanding and always feel free to ask your questions in areas you don't understand.
Specify alternate font faces
A visitor will only be able to see your font if they have that font installed on their computer. So it is possible to specify two or more font face alternatives by listing the font face names, separated by a comma.
<font face="airial, helvetica">
<font face="Lucida calligraphy, comic sans ms,">
<font face="Lucida calligraphy, comic sans ms,">
From the above example, you will discover that when your page is loaded, your browser will display the first font face available. If none of the given fonts are installed, then it will display the default font face Times New Roman.
Setting Font Color
You can set the font color of your choice by using the color attribute. You can specify the color that you want by either the color name or hexadecimal code for that color. Let look at a brief example below
Example
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font color="#FFFFFF">This text is in white color</font><br />
<font color="orange">This text is in orange color</font>
</body>
</html>
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font color="#FFFFFF">This text is in white color</font><br />
<font color="orange">This text is in orange color</font>
</body>
</html>
From the above code i made use of two examples, in the first one a hexadecimal code was used to set the color white to the text, while i made use of a color name in the second.
You can try the above code out for better understanding and always feel free to ask your questions in areas you don't understand.
The <basefont> Element
The Html <basefont> element is supposed to set a default font size, color, and typeface for any part of the Html page that are not otherwise contained within a Html <font> element or tag. You can use the <font> elements to override the <basefont> settings.
Html <basefont> tag also takes color, size and face attributes and it will support relative font setting by giving size a value of +1 for a size larger or -2 for two sizes smaller.
Example
<!DOCTYPE html>
<html>
<head>
<title>Setting Basefont</title>
</head>
<body>
<basefont face="arial, verdana, sans-serif" size="2" color="brown">
<p>This is the page's default font.</p>
<h2>Example of the <basefont> Element</h2>
<p>
<font size="+2" color="blue">
This is a blue text with two sizes larger
</font>
</p>
<p>
<font face="arial" size="-1" color="green">
This is an arial font, with a size smaller and green in color.
</font>
</p>
</body>
</html>
<html>
<head>
<title>Setting Basefont</title>
</head>
<body>
<basefont face="arial, verdana, sans-serif" size="2" color="brown">
<p>This is the page's default font.</p>
<h2>Example of the <basefont> Element</h2>
<p>
<font size="+2" color="blue">
This is a blue text with two sizes larger
</font>
</p>
<p>
<font face="arial" size="-1" color="green">
This is an arial font, with a size smaller and green in color.
</font>
</p>
</body>
</html>
You can try the above code out for better understanding and always feel free to ask your questions in areas you don't understand.
Alright that is it for this tutorial post, don't forget to subscribe with us, bye for now.
