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
Font size adjust of an element with CSS
The font-size-adjust CSS property enables you to adjust the x-height to make fonts more legible when fallback fonts are used. It helps maintain consistent visual font sizes across different font families.
Syntax
font-size-adjust: none | number;
Parameters
- none - Default value. No font size adjustment.
- number - A positive number that specifies the aspect ratio (x-height divided by font size).
How It Works
The property calculates: adjusted font size = specified font size × (font-size-adjust value ÷ aspect ratio of actual font)
Example
<!DOCTYPE html>
<html>
<head>
<style>
.normal {
font-family: 'Times New Roman', serif;
font-size: 20px;
}
.adjusted {
font-family: 'Times New Roman', serif;
font-size: 20px;
font-size-adjust: 0.5;
}
</style>
</head>
<body>
<p class="normal">Normal text without font-size-adjust</p>
<p class="adjusted">Text with font-size-adjust: 0.5</p>
</body>
</html>
Common Use Cases
- Font fallbacks: Maintain consistent appearance when primary fonts fail to load
- Cross-browser compatibility: Ensure text remains readable across different font rendering
- Accessibility: Improve legibility for users with different font preferences
Browser Compatibility
Currently supported in Firefox. Limited support in other browsers. Always test with fallback fonts.
Conclusion
The font-size-adjust property helps maintain consistent text appearance across different fonts by adjusting the x-height. While browser support is limited, it's useful for enhancing typography consistency.
Updated on: 2026-03-15T23:18:59+05:30
268 Views
Advertisements