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

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