Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to preserve the readability when font fallback occurs with CSS
The CSS font-size-adjust property helps preserve text readability when font fallback occurs. When the preferred font is unavailable and the browser falls back to another font, this property maintains consistent visual sizing by adjusting the font size based on the aspect ratio.
Syntax
selector {
font-size-adjust: value;
}
Possible Values
| Value | Description |
|---|---|
none |
Default. No adjustment applied |
number |
Aspect ratio value (typically 0.4 to 0.7) |
Example: Font Size Adjustment
The following example demonstrates how font-size-adjust maintains consistent visual sizing when fonts change −
<!DOCTYPE html>
<html>
<head>
<style>
.with-adjustment {
font-family: 'Verdana', Arial, sans-serif;
font-size: 18px;
font-size-adjust: 0.58;
padding: 10px;
margin: 10px 0;
background-color: #f0f8ff;
border: 1px solid #ddd;
}
.without-adjustment {
font-family: 'Verdana', Arial, sans-serif;
font-size: 18px;
padding: 10px;
margin: 10px 0;
background-color: #fff8f0;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<h2>Font Size Adjustment Demo</h2>
<div class="with-adjustment">
This text uses font-size-adjust: 0.58 for consistent readability.
</div>
<div class="without-adjustment">
This text has no font-size-adjust property applied.
</div>
</body>
</html>
Two text boxes appear - one with light blue background using font-size-adjust and one with light orange background without it. The adjusted text maintains more consistent visual sizing when font fallback occurs.
Key Points
- The aspect ratio value is typically between 0.4 and 0.7
- Verdana has an aspect ratio of approximately 0.58
- Arial has an aspect ratio of approximately 0.52
- This property is most useful when specifying multiple fonts in font-family
Conclusion
The font-size-adjust property ensures consistent text readability across different fonts. By specifying an aspect ratio value, you can maintain visual harmony when font fallback occurs, making your text more readable regardless of which font is actually used.
Updated on: 2026-03-15T13:20:09+05:30
171 Views
Advertisements