The CSS font-size attribute is employed to define the dimensions and scale of the font, impacting the text size within an element. By default, it is set to medium and is applicable to all elements. Options for this attribute consist of xx-small, small, x-small, and more.
Syntax
font-size: medium|large|x-large|xx-large|xx-small|x-small|small|;
The font-size can be relative or absolute.
Absolute-size
It is employed to establish the text at a specific size. When utilizing absolute-size, modifying the text size uniformly across all browsers is not achievable. This method proves beneficial when the exact physical dimensions of the output are known.
Relative-size
It is utilized to specify the text size in relation to surrounding elements. By using relative-size, you can adjust the text size within web browsers.
NOTE: If we do not define a font-size, then for the normal text such as paragraphs, the default size is 16px, which is equal to 1em.
Font-size with pixels
When specifying the text size using pixels, it grants complete control over the text's dimensions.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#first {
font-size: 40px;
}
#second {
font-size: 20px;
}
</style>
</head>
<body>
<p id="first">This is a paragraph having size 40px.</p>
<p id="second">This is another paragraph having size 20px.</p>
</body>
</html>
Font-size with em
It is employed to adjust the text dimensions. Many programmers favor em over pixels. This approach is endorsed by the World Wide Web Consortium (W3C). As mentioned earlier, the standard text size in web browsers is 16px. Therefore, we can conclude that the default measurement of 1em equals 16px.
The equation for converting pixel measurements to em units is represented as em = pixels/16.
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>
Responsive font size
We have the ability to determine the text's dimensions by employing a vw unit, which represents the 'viewport width'. The viewport refers to the dimensions of the browser window.
1vw = 1% of viewport width.
If the width of the viewport measures 50 centimeters, then 1vw corresponds to 0.5 centimeters.
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>
Font-size with the length property
It is utilized to establish the dimensions of the font in various units such as centimeters, pixels, points, and more. Negative values are prohibited for the length property when defining font sizes.
Syntax
font-size: length;
Example
<!DOCTYPE html>
<html>
<head>
<style>
.length {
color:red;
font-size: 5cm;
}
</style>
</head>
<body>
<h1>font-size property</h1>
<p class = "length">A paragraph having length 5cm.</p>
</body>
</html>