How to auto adjust font size using CSS ?

Last Updated : 08 May, 2023

The font-size-adjust property of CSS tells the browser to adjust the font size of the text to the same size regardless of font family. When the first chosen font is not available, the font-size-adjust property allows you more control over the font size. If a font isn’t available, the window defaults to the second font defined. This could lead to a significant shift in font size. Using the font-size-adjust property to stop this. The size difference between the lowercase letter “x” and the uppercase letter “X” is the “aspect value” of all fonts. When the browser knows the “aspect value” of the first font, it will determine what font-size to use when viewing text in the second font.

Syntax:

font-size-adjust: number|none|initial|inherit;

Below are the examples that illustrates the use of font-size-adjust property.

Example: In this example, we will use the font-size-adjust property.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        div.a {
            font-family: Helvetica;
        }
 
        div.b {
            font-family: 'sans-serif';
        }
 
        #div1,
        #div2 {
            font-size-adjust: 0.74;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1>
 
    <h2 style="color:blue;text-align:left;">
        Font Size Adjust Property
    </h2>
 
    <h2 style="color:orange;text-align:left;">
        Divs with same Font Size Adjust Property:
    </h2>
 
    <div id="div1" class="a">
        We offer a range of services to help you learn,
        develop, and have fun! Free tutorials, millions
        of posts, live, online, and classroom classes,
        regular coding contests, industry expert webinars,
        internships, and career openings are all available.
    </div><br>
 
    <div id="div2" class="b">
        Sandeep Jain is the founder of 'GeeksforGeeks,'
        an IIT Roorkee alumni group. He enjoys finding
        the most effective solutions to programming problems.
    </div>
 
    <h2 style="color:red;text-align:left;">
        Divs without same Font Size Adjust Property:
    </h2>
 
    <div class="a">
        Apart from GeeksforGeeks, he has worked as a web
        developer for DE Shaw and Co. and as an assistant
        professor at JIIT Noida.
    </div><br>
 
    <div class="b">
        GeeksforGeeks.org was founded with the aim of
        providing well-written, well-considered, and
        well-explained answers to specific questions.
        If you're interested in mastering algorithms,
        data structures, or just the programming language itself,
        GeeksforGeeks has you covered!
    </div>
</body>
</html>