Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to auto-adjust font size using CSS?
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.
687 Views
