CSS Tutorial
CSS Properties
CSS Advance
CSS Design
CSS Questions
Miscellaneous
CSS MCQ
- css-mcq
Interview Questions
- css-interview-questions

How to change the font size in CSS?

Similar questions

Which CSS property controls the text size?
How to change the text size in CSS?

The font-size property in CSS affects the size of the text of an element. It is used to specify the height and size of the font. The default value of this property is medium and can be applied to every element. The values of this property are xx-small, small, x-small, etc.

This property has numerous values that are responsible for changing the size of the content. There is the length value that can be in cm, px, pt, etc. Negative values of length are not allowed in font-size.

NOTE: If we do not define a font-size, then for the normal text such as paragraph, the default size is 16px, which is equal to 1em.

The font-size can be absolute or relative. The absolute size sets the text to a definite size, whereas the relative size sets the text relative to the neighboring elements.

Syntax

font-size: medium | large | x-large | xx-large | xx-small | x-small | small |smaller| larger | length;

Let's understand how to change the size of font by using some illustrations.

Example - Using font-size values

<!DOCTYPE html>  
<html>  
<head>  
<style>  
  
#p1 {  
  font-size: medium;  
}  
#p2 {  
  font-size: large;  
}
#p3 {  
  font-size: x-large;  
}  
#p4 {  
  font-size: xx-large;  
}  
#p5 {  
  font-size: xx-small;  
}  
#p6 {  
  font-size: x-small;  
}
#p7 {  
  font-size: small;  
}    
#p8 {  
  font-size: smaller;  
}    
#p9 {  
  font-size: larger;  
}        
</style>  
</head>  
<body>  
  
<p id="p1">A paragraph with font-size: medium;</p>  
<p id="p2">A paragraph with font-size: large;</p>  
<p id="p3">A paragraph with font-size: x-large;</p>  
<p id="p4">A paragraph with font-size: xx-large;</p>  
<p id="p5">A paragraph with font-size: xx-small;</p>  
<p id="p6">A paragraph with font-size: x-small;</p>  
<p id="p7">A paragraph with font-size: small;</p>  
<p id="p8">A paragraph with font-size: smaller;</p>  
<p id="p9">A paragraph with font-size: larger;</p>  
  
</body>  
</html>

Test it Now

Output

Example - Using length value

In this example, we are using the length value with em, vw, px, and cm.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
  
#p1 {  
  font-size: 2.5em; /* 40px/16=2.5em */  
}  
#p2 {  
  font-size: 5vw;  
}
#p3 {  
  font-size: 40px;  
}  
#p4 {  
  font-size: 1.5cm;  
}  
       
</style>  
</head>  
<body>  
  
<p id="p1">A paragraph with font-size: 2.5em;</p>  
<p id="p2">A paragraph with font-size: 5vw;</p>  
<p id="p3">A paragraph with font-size: 40px;</p>  
<p id="p4">A paragraph with font-size: 1.5cm;</p>    
</body>  
</html>

Test it Now

Output