CSS font-size

The CSS font-size property is used when we need to define the size of a font. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #myp{font-size: 160%;}
   </style>
</head>
<body>

   <h2>The font-size Property</h2>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
   <p id="myp">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
   
</body>
</html>

Output

The font-size Property

Lorem ipsum dolor sit amet consectetur adipisicing elit.

CSS font-size Syntax

The syntax of font-size property in CSS, is:

font-size: x;

The value of x should be any of the following:

xx-small - used to make the font-size smallest
x-small - used to make the font-size second smallest
small - used to make the font-size small
smaller - used to make the font-size smaller
medium - used to make the font-size medium
larger - used to make the font-size larger
large - used to make the font-size large
x-large - used to make the font-size more larger
xx-large - used to make the font-size larger than x-large
length - Unlike all the above and below, it is not a keyword. The length units like 22px, 120%, 1.4em etc. are used to define custom sized font.
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS font-size Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #a{font-size: xx-small;}
      #b{font-size: x-small;}
      #c{font-size: small;}
      #d{font-size: smaller;}
      #e{font-size: medium;}
      #f{font-size: larger;}
      #g{font-size: large;}
      #h{font-size: x-large;}
      #i{font-size: xx-large;}
      #j{font-size: 14px;}
      #k{font-size: 24px;}
      #l{font-size: 90%;}
      #m{font-size: 140%;}
      #n{font-size: 1em;}
      #o{font-size: 1.4em;}
   </style>
</head>
<body>

   <h2>Without font-size</h2>
   <h2 id="a">font-size: xx-small</h2>
   <h2 id="b">font-size: x-small</h2>
   <h2 id="c">font-size: small</h2>
   <h2 id="d">font-size: smaller</h2>
   <h2 id="e">font-size: medium</h2>
   <h2 id="f">font-size: larger</h2>
   <h2 id="g">font-size: large</h2>
   <h2 id="h">font-size: x-large</h2>
   <h2 id="i">font-size: xx-large</h2>
   <h2 id="j">font-size: 14px</h2>
   <h2 id="k">font-size: 24px</h2>
   <h2 id="l">font-size: 90%</h2>
   <h2 id="m">font-size: 140%</h2>
   <h2 id="n">font-size: 1em</h2>
   <h2 id="o">font-size: 1.4em</h2>
   
</body>
</html>