CSS font-size-adjust Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

HTML

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

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

Result

Editor