background

When writing a web page, we usually specify the font and size for the page.

body {
  font-family: Verdana, Times;
	font-size: 20px;
}
Copy the code

The text on the page is specified to be 20px, and the font sequence Verdana, Times is used – if Verdana is not included in the current operating system, then Times is used.

One problem is that when we compare different font displays at 20px, we see a significant difference.

The online demo

As you can see, the same font size is 20px, but the readability of Times font is obviously less than that of Verdana, which leads to an inconsistent user experience, as if the user is visiting two completely different websites.

The problem here is that the default character size varies from font to font. This is one of the reasons why the font-size-adjust attribute was introduced.

font-size-adjust

The default value of the font-size-adjust property is None and does nothing. It can accept a value of numeric type, usually between 0 and 1.

Like this:

body {
  font-family: Verdana, Times;
	font-size: 20px;
  font-size-adjust: 0.5;
}
Copy the code

Take a look at the results:

One notable change was to use a different font, but the resulting display was much more consistent than before font-size-adjust was used.

This is the consistent experience of using font-size-adjust.

Mechanism of action

The font-size-adjust property is used to set the small letter size of a font when used as follows

body {
  font-family: Verdana, Times;
	font-size: 20px;
  font-size-adjust: 0.5;
}
Copy the code

This means that both Verdana and Times are 20px by 0.5, or 10px (font-size * font-size-adjust).

This is why the previous page behaved uniformly after using the font-size-adjust attribute. Because in an English web page, the biggest factor affecting the readability of the page is the large number of lowercase letters, controlling the size of lowercase letters is basically equal to controlling the overall effect.

By default, Verdana’s font-size-adjust property evaluates to 0.549 and Times’s font-size-adjust property evaluates to 0.444. This is why the text looks so different when you set the same font size at the same time.

(after)