Font tag size & CSS in html code

By using font tag we can control the display of fonts in a web page. Font tag is very commonly used tag in web page design. We will discuss some basic font tags and its uses in developing sites.

Using the font tag we can manage the size, color and face of the font. Here we can specify which font to be used for displaying the text. The face of the font can be Times New Roman or it can be Verdana font. What ever we specify the face of the font tag , that font must be available with the client computer. Otherwise default font will be displayed. So it is advisable to use common fonts and if you have any special requirement then create one image with the text and style of font you use and then display it as an image.

Font Size:

Font Size in HTML for webpages

Font tag will have one starting and ending tag. The text between the staring and ending of the tags will follow the attributes set inside the tag. We can define the size of the font by using size attribute. Size can be from 1 to 7. Here is the basic font tag with size.

<font size=1>font size is 1</font> font size is 1
<font size="2">font size is 2</font> font size is 2
<font size="3">font size is 3</font> font size is 3
<font size="4">font size is 4</font> font size is 4
<font size="5">font size is 5</font> font size is 5
<font size="6">font size is 6</font> font size is 6
<font size="7">font size is 7</font> font size is 7

Managing font size through CSS

We can apply our font size to any element of the page by using style property. Here are some examples.

Absolute - size keywords

We can define size by using keywords and set the value of the font. List of such keywords are here.

xx-small, x-small, small, medium, large, x-large, xx-large
Demo: font size by absolute keywords

Relative size

We can keep font as larger or smaller which will make the font size large or small relative to parent element font size. List is here.

Larger, smaller
Demo: font size by relative to parent element

Percentage size

This is relative to parent font size.

60%, 80%, 120%

Pixels size

We can define in pixels like 14px, 18px etc. This will fix the size irrespective of parent font size. Bu using this we can define all child elements size related to this in relative terms like 80% ( i.e 80% of parent font size) .

16px, 18px, 14px
Demo: font size by pixels

Em size

We can relatively define the font size with respective to parent font size in ratio.
Example : 1.5em is equal the 1.5 times the font size of parent element. If parent element font size is 8px then the child element will be 1.5x8 = 12px.

If the font size is not set and the child element is set at 1.8em then the font size will be based on the browser default font size. Usually by default the browser font size is 16px. So in this case 1.8em will be equal to 1.8em=28.8px


Font size will be inherited from the parent font size.


Font size will be reset the value to its parent element in case of inherit. If it is not inherited then reset to initial value.
Generate CSS with different Font size Typography in boostrap style
Type of fonts Font Color
HTML Strikeout text SPAN tag


* indicates required
Subscribe to plus2net

    Post your comments , suggestion , error , requirements etc here

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 All rights reserved worldwide Privacy Policy Disclaimer