CSS font-size-adjust property
The font-size-adjust property in CSS asserts the size of the lower-case letters related to the current font size, defining the size of the upper case letters. This property is useful as the legibility of fonts at small sizes gets determined by the size of lowercase letters than the size of capital letters. This property is either specified as a number that the font-size property is multiplied by.
Syntax for font-size-adjust property:
Following is the syntax for the font-size-adjust property.
font-size-adjust: number|none|initial|inherit;
Example: CSS font-size-adjust property
Here in the example below, we are using the font-size-adjust property with different border styles, colors, and different values. In this case, we have given the font-size-adjust property value as 0.58. So the text gets in a size of about 0.58 px.
<!DOCTYPE html>
<html>
<head>
<title>The font-size-adjust property in CSS</title>
<style type="text/css">
.times {
font-family: Times, serif;
font-size: 10px;
}
.verdana {
font-family: Verdana, sans-serif;
font-size: 10px;
}
.adjtimes {
font-family: Times, serif;
font-size-adjust: 0.58;
font-size: 10px;
}
</style>
</head>
<body>
<p class="times">This text uses the Times font (10px), which is hard to read in small sizes.</p>
<p class="verdana">This text uses the Verdana font (10px), which has relatively large lowercase letters.</p>
<p class="adjtimes">This is the 10px Times, but now adjusted to the same aspect ratio as the Verdana.</p>
</body>
</html>
Output:
Example 2: CSS font-size-adjust property
Here in the example below, we are using the font-size-adjust property with different border styles, colors, and different values. In this case, we have given the font-size-adjust property value as none. This means we are not specifying any value for the font size of our text. So, for that case, the text gets in the size which is set as default for the browser.
<!DOCTYPE html>
<html>
<head>
<title>The font-size-adjust property in CSS</title>
<style type="text/css">
.times {
font-family: Times, serif;
font-size: 10px;
}
.verdana {
font-family: Verdana, sans-serif;
font-size: 10px;
}
.adjtimes {
font-family: Times, serif;
font-size-adjust: none;
font-size: 10px;
}
</style>
</head>
<body>
<p class="times">This text uses the Times font (10px), which is hard to read in small sizes.</p>
<p class="verdana">This text uses the Verdana font (10px), which has relatively large lowercase letters.</p>
<p class="adjtimes">This is the 10px Times, but now adjusted to the same aspect ratio as the Verdana.</p>
</body>
</html>
Output:
Live Example
Here in this live example, you can test the code and execute the example using different values or even edit the code example.
Browser Compatibility
There are many browsers which do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
43 |
43 |
| Edge |
79 |
79 |
| Firefox |
40 |
40 |
| Internet Explorer |
no |
no |
| Opera |
30 |
30 |
| Safari |
no |
no |
| Webview Android |
no |
no |
| Chrome Android |
43 |
43 |
| Firefox Android |
4 |
4 |
| Opera Android |
30 |
30 |
| IOS Safari |
no |
no |
| Samsung Internet |
no |
no |
Conclusion
The initial value for the font-size-adjust property in CSS is none. This property is applicable to all elements and also to the ::first-letter and ::first-line. It is an inherited property. The computed value for this property is the as specified one. The animation type for this property is a number.
