How to automatically adjust font size with CSS
How to Automatically Adjust Font Size with CSS
We can use the “font-size-adjust” property given to us by CSS to adjust the font size of text. The `font-size-adjust` property allows us to adjust to a common font size regardless of the different font families (if any) used in the document. With this property, we can adjust the font size of the lowercase letters used in the document based on 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 many of the values listed above. These values help us adjust to a common font size regardless of the font family used.
Note — Before following the examples, make sure you are using Firefox, as the `font-size-adjust` property currently only works in Firefox, a major browser.
Example 1
In this example, we’ll adjust the font size of lowercase letters to half the default font size for the different font families we’re using.
<!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.
</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 lowercase letters to half 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.
</p>
<p class="b">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. </p>
</body>
</html>
Summary
In this article, we learned what the “font-size-adjust” property is and used it to automatically adjust the font size of text in a document with the help of two different examples. In the first example, we adjusted the font size of lowercase letters to half the default font size of a custom font; in the second example, we adjusted the font size of lowercase letters to half the default font size.