CSS Font-size

The font-size property in CSS is used to specify the height and size of the font element. It affects the size of the content of an element.

Syntax:

font-size: medium|large|x-large|xx-large|xx-small|x-small|small|;

Font-size can be relative or absolute.

Absolute-size:

It is not possible to change the size of the text in all browsers.

Relative-size:

It is possible to change the size of the text in browsers.

Font-size with pixels:

Set the size of text with pixels.

Example:

<!DOCTYPE html>
<html>
<head>
<style>

#first {
 font-size: 45px;
}
#second {
 font-size: 20px;
}
</style>
</head>
<body>

<p id="first">This is a paragraph having size 45px.</p>
<p id="second">This is another paragraph having size 20px.</p>

</body>
</html>

OUTPUT:

CSS Font-size

Font-size with em:

It is used to resize the text. Most of the programmers prefer em instead of pixels. The default text size in browsers is 16px. that the default size of 1em is 16px.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#first {
 font-size: 2.5em; /* 40px/16=2.5em */
}

#second {
 font-size: 1.875em; /* 30px/16=1.875em */
 }

#third {
 font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>

<p id='first'>First paragraph.</p>
<p id='second'>Second paragraph</p>
<p id='third'>Third Paragraph.</p>
</body>
</html>

OUTPUT:

CSS Font-size

Responsive font size:

The size of the text by using a vw unit, which stands for the ‘viewport width‘.

1vw = 1% of viewport width.

Example:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<p style="font-size:5vw;">First paragraph having the width of 5vw.</p>
<p style="font-size:10vw;">Second paragraph having the width of 10vw.</p>

</body>
</html>

OUTPUT:

CSS Font-size

Font-size with the length property:

Set the size of the font in length. The font in length can be in cm, px, pt, etc. Negative values of length property are not allowed in the font-size element.

Syntax

font-size: length;

Example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .length {
         color:red;
         font-size: 3cm;
       }
    </style>
  </head>

  <body> 

    <p class = "length">A paragraph having length 3cm.</p>
  </body>
</html>

OUTPUT:

CSS Font-size