Font size unit in CSS3

How to set the units to define the length of the font using CSS

Units

CSS has several units for different units such as width, margin, padding, font-size, border-width, etc.length indicates by using numerical value followed by length units such as px,dp,em,etc. It does not allow white spaces in between numerical values and length units.Length units has divided as follows

relative units
absolute units

Relative units

Relative units specify a length relative to another length property. Relative length units scales better between different rendering mediums.

em- Relative to the font-size of the element (2em means 2 times the size of the current font)
ex- Relative to the x-height of the current font (rarely used)
ch- Relative to width of the "0" (zero)
rem- Relative to font-size of the root element
vw- Relative to 1% of the width of the viewport*
vh- Relative to 1% of the height of the viewport*
vmin- Relative to 1% of viewport's* smaller dimension
vmax- Relative to 1% of viewport's* larger dimension

<p><i style="color:blue; font-size:20px;">Relative units</i></p>
    <p style="font-size:2em">TechFunda</p>
    <p style="font-size:3ex">TechFunda</p>
    <p style="font-size:4vw">TechFunda</p>
    <p style="font-size:5vh">TechFunda</p>
    <p style="font-size:6vmin">TechFunda</p>
    <p style="font-size:5vmax">TechFunda</p>

In the above code snippet we have defined the relative units by giving the different unit values to display the fontsizes

output

Absolute units

The absolute units are fixed and a length expressed in any of these will appear as exactly that size, absolute units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for print layout.

cm centimeters
mm millimeters
in inches (1in = 96px = 2.54cm)
px * pixels (1px = 1/96th of 1in)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)

<body>
    <p><i style="color:blue; font-size:20px;">Absolute units</i></p>
   <p style="font-size:1cm">TechFunda</p>
    <p style="font-size:4mm">TechFunda</p>
    <p style="font-size:1in">TechFunda</p>
    <p style="font-size:20px">TechFunda</p>
    <p style="font-size:30pt">TechFunda</p>
</body>

Absolute units

In the above code snippet we have defined the absolue units which defines the values according to their values

output