The issue of character size variations across different fonts.
When we set the same font size for a block of text, the displayed size can vary significantly depending on the font type.
For example, the Times font in English appears smaller than the Verdana font.
To ensure a more consistent visual appearance across fonts, the font-size-adjust CSS property was designed, allowing you to adjust the font size accordingly.
See the code and screenshot below for an example:
<h4>English text</h4>
<p style="font-family: verdana">Welcome to support my new book - HTML is not simple</p>
<p style="font-family: Times">Welcome to support my new book - HTML is not simple</p>
Different fonts can take up vastly different amounts of space, leading to content that fits in one line on some devices but spills into two lines on others, causing layout problems.
We can use font-size-adjust to make precise adjustments and perfect the details.
Use the Example case
How to adjust? You can uniformly adjust it based on the proportion of the lowercase “x” height.
To continue with the example above, simply add this line of code:
p {
font-size-adjust: 0.545;
}
Why is the value 0.545 here?
Because the aspect ratio of the Verdana font is precisely 0.545. When we set this value, the lowercase “x” of any font will be rendered with an aspect ratio of 0.545. As a result, the visual appearance of fonts like Times will be more similar to Verdana.
This is the principle behind the font-size-adjust property. However, the font-size-adjust property does more than just this. What if we want to base it on uppercase letters? What if we want to base it on the character width?
These options are supported by the font-size-adjust property. Now, let’s dive deeper into the syntax of the font-size-adjust property.
Let’s take a closer look at the font-size-adjust syntax
First, let’s take a look at some examples of syntax usage:
font-size-adjust: none;
font-size-adjust: 0.5;
font-size-adjust: from-font;
font-size-adjust: ex-height 0.5;
font-size-adjust: ch-width from-font;
Here, from-font can be understood as the default value. This keyword means using a specific feature from the first recognized font, which corresponds to the current default font rendering rule.
Therefore, the key focus should be on the value types. These can either be a direct numeric value or a combination of “font metric” and a number.
Font Metrics
There are five types of font metrics in total, which are:
- ex-height: The default metric type. When only a numeric value is provided, it refers to ex-height, which represents the height of the lowercase “x” as a proportion of the font size.
- cap-height: This adjusts the fallback font size based on the ratio of the capital letter height to the font size. It’s used to standardize the capital letters across different fonts.
- ch-width: “ch” refers to the width of the letter “0” (ZERO, U+0030). By adjusting the ratio of the “0” width and the font size, we control the rendering size of the text.
- ic-width: The “ic” unit is related to the Chinese character for “water.” ic-width adjusts the width occupied by “water” and the font size ratio. Although this metric type is designed for Chinese typography, it’s rarely used in daily development. Based on my observations, Chinese fonts are naturally monospaced, and most common Chinese fonts have a width and height ratio of 1em, so there’s little need for adjustments.
- ic-height: Adjusts the height occupied by “water” and the font size ratio.
Through my experiments with these font metric types, I’ve concluded that they are mostly suited for English scenarios. While Chinese font types are supported, they’re largely unnecessary in practice.
For instance, in the case above, even though we used ex-height to make the character size of KaiTi similar to PingFang (similar to Microsoft YaHei), the width of the text noticeably increased.
This behavior is different from English fonts. In English, the character width-to-height ratio typically changes proportionally: as characters shrink, their width also narrows. This is why using ex-height adjustments works well, making both the character size and width look consistent.
Does the use of font-size-adjust affect relative units such as em?
The font-size-adjust property allows text to be scaled up or down, but does it affect the calculation of relative units like em? I don’t think it does. Let’s take a look at an example:
<p><img src="icon_del.png">Delete</p>
p {
font-size-adjust: ic-width 2;
}
p img {
width: 1em;
height: 1em;
}
Setting the icon size to be exactly the same as the font size: the text appears large, but the icon is small. This is because the font size is scaled to 200%, while the icon is at 100%. This demonstrates that the font-size-adjust property does not affect the behavior of the em unit.
What is the relationship between text-size-adjust and size-adjust?
The font-size-adjust property has two closely related CSS properties: text-size-adjust and size-adjust.
text-size-adjust is generally used on mobile devices, and it is typically set to none. For example:
body {
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
Here’s the thing: on mobile devices, when viewing a web page in landscape mode, the browser automatically adjusts the font size for a better reading experience due to the increased screen width.
However, in actual development, we often don’t want this automatic font size adjustment, so we need to set text-size-adjust: none.
What about the size-adjust property?
I previously discussed size-adjust in a 2022 article, “Using CSS size-adjust and unicode-range to change the size of any text.”
This CSS property also adjusts the visual size of text, but it must be used with custom fonts and set within the @font-face rule.
I believe that with the introduction of font-size-adjust, the use of size-adjust will decrease significantly because the former is more flexible and has lower usage costs.
However, size-adjust is still useful if you only need certain text to have a different font size. For example, if you want all Chinese text to be larger while keeping letters and numbers normal, you would use size-adjust, as it can work with unicode-range to specify the character set for size adjustments.
In conclusion, modern CSS provides increasingly powerful control over text sizing.
Browser Compatibility
font-size-adjust is still a relatively new CSS property, but it is now supported by all modern browsers, as shown in the image below:
I checked the release date, and Chrome only started supporting it in July 2024, which means it’s been around for just half a year.
Widespread adoption will take a few more years. In the meantime, you can use the size-adjust property as a temporary solution.