CSS font-size-adjust Property


The font-size-adjust CSS property is used to control the aspect ratio of a font's uppercase letters, allowing web designers to maintain consistent readability and aesthetics across different fonts and devices. By specifying a numerical value, typically between 0 and 1, designers can influence how much a font's uppercase letters are adjusted in size to match the x-height, which is the height of a lowercase letter. This property is particularly useful when you want to ensure that different fonts with varying x-heights maintain a similar visual size when displayed in a paragraph of text, enhancing the overall readability and design consistency of a web page.

Initial value
Applies to
All elements
Computed value
As specified
JavaScript syntax


font-size-adjust: none | <number> 


  • noneChoose the size of the font based only on the font-size property.
  • <number>Choose the size of the font so that its lowercase letters (as determined by the x-height metric of the font) are the specified number times the font-size.


<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>
.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;

Browser Support

The following table will show you the current browser support for the CSS font-size-adjust property.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 31st December 2023