CSS font-size-adjust Property

Description

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
none
Applies to
All elements
Inherited
Yes
Computed value
As specified
Animatable
Yes
JavaScript syntax
object.style.fontSizeAdjust

Syntax

font-size-adjust: none | <number> 

Values

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

Example

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

Desktop
Edge Chrome Firefox Opera Safari
xx3x16.4
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
x4x16.4xx

Last updated by CSSPortal on: 31st December 2023