Skip to content
Related Articles

Related Articles

Improve Article
How to auto adjust font size using CSS ?
  • Last Updated : 31 Mar, 2021

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:

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>

Output :

Auto Adjust Font Size using CSS

Browser Support:

Only Firefox currently supports the CSS font-size-adjust property by default.




My Personal Notes arrow_drop_up
Recommended Articles
Page :