How to auto-adjust font size using CSS?

CSS Web Development Front End Technology

We can adjust the font size of the text using the “font-size-adjust” property given to us by the CSS. The “font-size-adjust” property allows us to adjust to a common font size regardless of the different font families used in the document if any. With this, we can adjust the font size of the lower-case letters, used in the document, with respect to the font size of the uppercase letters in the document.

Syntax

font-size-adjust: number | initial | none | inherit | revert | revert-layer | unset

“font-size-adjust” can take on many values that are listed above. These values help us to adjust to a common font-size regardless of the font-families used.

Note − Before proceeding towards the examples, please make sure to use Firefox as the “font-size-adjust” property is currently only available to use in firefox as a major browser.

Example 1

In this example, we will adjust the font size of the lowercase letters to be half of the default font size of the different font families used.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to auto adjust font size using CSS?</title>
   <style>
      p {
         font-size-adjust: 0.5;
      }
      .a {
         font-family: 'Times New Roman', Times, serif;
      }
      .b {
         font-family: Helvetica;
      }
   </style>
</head>
<body>
   <h3>How to auto adjust font size using CSS?</h3>
   <p class="a">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus ipsa maiores ratione dolores consectetur soluta a hic recusandae fugiat quibusdam beatae voluptatum, repudiandae ipsam ex fuga nobis numquam corporis magnam?
   </p>
   <p class="b">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus ipsa maiores ratione dolores consectetur soluta a hic recusandae fugiat quibusdam beatae voluptatum, repudiandae ipsam ex fuga nobis numquam corporis magnam?
   </p>
</body>
</html>

Example 2

In this example, we will adjust the font size of the lowercase letters to be half of the default font size of the default font family used.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to auto adjust font size using CSS?</title>
   <style>
      p {
         font-size-adjust: 0.5;
      }
   </style>
</head>
<body>
   <h3>How to auto adjust font size using CSS?</h3>
   <p class="a">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus ipsa maiores ratione dolores consectetur soluta a hic recusandae fugiat quibusdam beatae voluptatum, repudiandae ipsam ex fuga nobis numquam corporis magnam?
   </p>
   <p class="b">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus ipsa maiores ratione dolores consectetur soluta a hic recusandae fugiat quibusdam beatae voluptatum, repudiandae ipsam ex fuga nobis numquam corporis magnam?
   </p>
</body>
</html>

Conclusion

In this article, we learned what is “font-size-adjust” property is and we used it to auto-adjust the font size of the texts in a document using CSS, with the help of two different examples. In the first example, we adjusted the font size of the lowercase letters to half of the default font size of a custom font, and in the second example, we adjusted the font-size of the lowercase letters to half of the default font-size of the default font.