Font-size property in CSS :

  1. Font-size property controls the size of fonts.
  2. Font Size can be relative,absolute.

Possible values for font-size property :

NoPossible values of font-sizeExample 1Example 2
1absolute-sizeh1h2
2relative-sizesmallerlarger
3length12px20px
4percentage20%60%

A. Absolute Size of Font :

We can have different Absolute keywords that can be used to specify the font size.

Absolute KeywordHTML
XX-Large<h1>
X-Large<h2>
Large<h3>
Medium<h4>
Small<h5>
X-Small<h6>
XX-SmallN/A

Explanation :

  1. We have different Absolute keywords specified in the table.
  2. We can specify the heading tags to show text in HTML. however we can style the H1,….H6 tags using CSS.
  3. Heading tags are the most useful and simple useful way to show HTML tags.
  4. H1 heading is having larger font size than H2 heading. Similarly H6 is smallest heading.

B. Length / Percentage

We can directly specify length to the font-size property like we can specify 20px or 15px as font size.In the percentage unit user can directly use 20% or 30%

h1 {
            font-size: 1.5em;
            font-weight: normal;
        }
        p {
            font-size: 150%;
        }

Explanation :

In the above CSS code snippet -

  1. we can see font-size of <h1> tag is specified in length whereas font size of the <p> is specified in the percentage.
  2. Percentage font-size means , 150% larger than the default font.
  3. Generally 1em = 100% i.e 1em is equivalent to 100% therefore 1.5em will have same effect as that of 150%.
  4. Font sizes can be in inches, centimeters, millimeters, points, and picas , em, ex, pixels and percentage measurement.

Live Example :

<html>
    <head>
        <style>
            h1 {
                font-size:1em;
            }
            h2 {
                font-size:100%;
            }
            h3 {
                font-size:16px;
            }
        </style>
    </head>
    <body>
        <h1>This is heading 1</h1>
        <h2>This is heading 2</h2>
        <h3>This is heading 3</h3>
    </body>
</html>

Output :

Font Size in CSS

Relation Between Em Vs Pixel Vs Percentage :

1 Em = 100% = 16px