Improve Web Typography with CSS Font Size Adjust

CSS font-size-adjust Attributes: A powerful tool to improve the readability of web page typesetting

font-size-adjust CSS attribute allows developers to specify font sizes based on the height of lowercase letters rather than the height of uppercase letters, thereby significantly improving the readability of web text, especially when using alternate fonts.

This article will explore in-depth the importance of font-size-adjust attributes and their correct use in projects.

The importance of

font-size-adjust Most websites are mainly composed of text. Since text is crucial in a website, it is especially necessary to pay special attention to the fonts used. Choosing the right font can bring a pleasant reading experience, otherwise it may make the website difficult to read. After determining the font, you usually need to select the appropriate font size.

Properties set the font size of all font series on the website. However, it is often chosen for the preferred font family. The problem arises when the preferred font is unavailable for some reason, the browser uses one of the alternate fonts listed in the CSS document to render the text.

font-sizeFor example, given the following CSS rules:

If the browser cannot download "Lato" from Google Fonts, the next alternate font, Verdana, will be used instead. However, the

body {
  font-family: 'Lato', Verdana, sans-serif;
}

value is most likely chosen with the consideration of "Lato" rather than Verdana.

font-size

Aspect ratio of web fonts

For constant font size values, the visual size of the font and its readability may vary greatly. This is especially true for texts such as Latin that are case sensitive. In this case, the ratio of lowercase letter height to its uppercase letter height is an important factor in determining the readability of the font. This ratio is often called the aspect ratio of the font.

As mentioned earlier, once the

value is set, it will remain the same for all font families. However, if the aspect ratio of the alternate font is too different from the preferred font, it may affect the readability of the alternate font.

The font-size

property is very important in this case because it allows you to set the x height of all fonts to the same value, thereby improving its readability.

font-size-adjust

Select the appropriate

value font-size-adjust Now that you understand the importance of using the

attribute, learn how to use it on your website. This property has the following syntax:

font-size-adjust The initial value of

font-size-adjust: none | <number>

is

. The font-size-adjust value means that the none value of different font series will not be adjusted. none

You can also set the value of the font-size-adjust attribute to a number. This number is used to calculate the x height of all fonts on a web page to the same value. x height equals the given number multiplied by the font size. This can significantly improve the readability of small size fonts. Here is an example of how to use the font-size-adjust attribute:

body {
  font-family: 'Lato', Verdana, sans-serif;
}

The x height of all fonts will now be 20px * 0.6 = 12px. The actual size of a given font can now be changed to ensure that the x height remains at 12px at all times. The new adjusted font size for a given font can be calculated using the following formula:

c = (a / a') s.

Here, c is the adjusted font size to be used, s is the specified font size value, a is the aspect ratio specified by the font-size-adjust attribute, and a' is the aspect ratio of the font that needs to be adjusted.

You cannot set font-size-adjust to a negative value. A value of 0 will cause the text to have no height, in other words, the text will actually be hidden. In older browsers such as Firefox 40, a value of 0 is equivalent to setting font-size-adjust to none.

In most cases, developers usually try several font size values ​​to see which value is best for a given font. This means that ideally they want the x height of all font options to be equal to the x height of their preferred font. In other words, the most suitable value for the font-size-adjust attribute is the aspect ratio of the preferred font.

How to determine the aspect ratio of a font

To determine the correct aspect ratio of a font, you can rely on the fact that its resized font size should be the same as the original font size you specified. This means that in the preceding equation, a should equal a'.

The first step in calculating the aspect ratio is to create two elements. Both elements will contain a single letter and its surrounding border (the two letters must be the same because we need to compare between these two elements). Additionally, the font-size attribute values ​​for both elements are the same, but only one of them will also use the font-size-adjust attribute. When the value of font-size-adjust is equal to the aspect ratio of a given font, the size of the two letters in each element will be the same.

Use on the website font-size-adjust

Browser support: Currently, only Firefox supports font-size-adjust by default. Starting with versions 43 and 30, Chrome and Opera support this property after the Experimental Web Platform Features flag (enabled in chrome://flags). Edge and Safari do not support the font-size-adjust attribute at all.

If you decide to use this property, lower browser support should not be a problem at all. This property is designed with backward compatibility in mind. Browsers that do not support this property will display text normally, while browsers that support this property will adjust the font size according to the value of the font-size-adjust property.

Conclusion

After reading this tutorial, you now know the role of the font-size-adjust attributes, their importance, and how to calculate the aspect ratios of different fonts.

Because font-size-adjust can be downgraded gracefully in older browsers, you can start using it right away to improve the readability of text in your production website.

(The picture at the end of the article is the same as the beginning of the article)

The above is the detailed content of Improve Web Typography with CSS Font Size Adjust. For more information, please follow other related articles on the PHP Chinese website!