How to change the font size in CSS
CSS is all about presentation. Discover how How to change the font size in CSS works to transform plain HTML into a premium user experience in the guide below.
Similar inquiries
- What CSS attribute manages the font size?
- What is the process for adjusting text size using CSS?
The CSS font-size property impacts the text size within an element, determining the font's height and dimensions. By default, it is set to medium and can be assigned to any element. The property offers various values such as xx-small, small, x-small, and more.
This attribute contains multiple values that control the dimensions of the content. It includes the length value, which can be specified in centimeters, pixels, points, and other units. Font-size does not permit negative length values.
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 specified as either absolute or relative. Absolute size assigns a fixed text size, while relative size adjusts the text in relation to surrounding elements.
Syntax
font-size: medium | large | x-large | xx-large | xx-small | x-small | small |smaller| larger | length;
Let's explore how to adjust the font size with the help of visual aids.
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>
Output
Example - Using length value
In this instance, we are employing the length property with em, vw, px, and cm units.
<!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>
Output
