How to set text font size, font face and font color in HTML?

What are Fonts in HTML?

To make your website more beautiful, colourful and interactive fonts play a very important role. Font face and color depends entirely on the computer and browser that is being used to view your page but you can use HTML <font> tag to add style, size, and color to the text on your website. The content of your website shows revealing with the use of different fonts for different sections of web page. You can use a <basefont> tag to set all of your text to the same size, face, and color.

The font tag is having three attributes. The font size, font color and font face to customize your web page. To change any of the font attributes at any time within your webpage, simply use the <font> tag. To change the properties of text use <font> tag followed by closing </font> tag. You can change one or all of the font attributes within one <font>—</font> tag.

The fonts can be made more interactive and beautiful with the help of CSS (Cascading Style Sheet)-a way to set properties of fonts by targeting the particular section.

How to set Font Size in HTML?

You can set font size of content of your web page using size attribute. The range of accepted font size values is from 1(smallest) to 7(largest). The default size of a font is 3. The more is the font size given to the text, the bigger is the size of text. Let us write a code to check all seven levels font size of text with an example shown below.

<!DOCTYPE html>
<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<p>Explore different font size in HTML</p>
      <font size = "1">Font size level first</font><br />
      <font size = "2">Font size level second </font><br />
      <font size = "3">Font size level third </font><br />
      <font size = "4">Font size level fourth</font><br />
      <font size = "5">Font size level fifth </font><br />
      <font size = "6">Font size level sixth </font><br />
      <font size = "7">Font size level seventh </font>
   </body>
</html>

The result of different font sizes is shown below:

How to set Font Size in HTML?, www.programmingtutorial.in

How to set Font Face in HTML?

Font face is nothing but, it is a type of font you want to use for your web page. To see the applied font, the user should have font face installed in the system. You can set font face using face attribute. If the applied font face is not available then user will see the default font face applicable to the user’s computer. Let us take example of different font face in our code.

<!DOCTYPE html>
<html>
<head>
<title>Font Face</title>
</head>
<body>
<p>Explore different font face in HTML</p>
<font face = "Times New Roman" size = "5">Times New Roman</font><br />
<font face = "arial" size = "5">Arial</font><br />
<font face = "calibri" size = "5">Calibri</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>

The result of above code is as follows:

How to set Font Face in HTML?, www.programmingtutorial.in

How to set Set Font Colour in HTML?

Font colours make web page very beautiful and attracts more users towards your website. So, while developing web page, colour combination should be properly set on your web page. You can specify the colour that you want by either the colour name or hexadecimal code for that colour. Let us understand colour concept with the help of an example.

<!DOCTYPE html>
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font color = "#FF00FF">First example of colour setting in your page</font><br />
<font color = "red"> Second example of colour setting in your page </font>
</body>
</html>

It results as follows:

How to set Set Font Colour in HTML?, www.programmingtutorial.in

How to set <basefont> element in HTML?

The <basefont> element is used to set a default font size, colour, and font face for any parts of the document that are not otherwise contained within a <font> tag. You can use the <font> elements to override the <basefont> settings.

The <basefont> does not support in HTML5.

How to specify alternate font faces?

When a visitor visits your website, he will be able to see font of your website if that font is installed in visitor’s computer also, otherwise he won’t be able to see your web page in correct form. So, it is possible to specify two or more font face alternatives by listing the font face names, separated by a comma while developing your web page.

<font face = "arial,verdana">
<font face = "Comic Sans MS,Lucida Console, corsiva">

When your page is loaded, their browser will display the first font face available. If none of the given fonts are installed, then it will display the default font face as Times New Roman.