Using CSS's Font-size-adjust property to improve page layout detail Introduction

This article mainly introduces the use of CSS font-size-adjust properties to improve the page layout, with a certain reference value, interested in small partners can refer to

The Font-size-adjust property in CSS allows developers to specify font-size based on the height of the lowercase letters, which effectively improves the readability of the page text.

In this article, you can not only understand the importance of the Font-size-adjust attribute, but also learn how to use it in your project.

The importance of Font-size-adjust

Most of the websites you visit are made up of text, and because written text is an important part of the site, it's worth paying attention to the fonts you use to display the information. Choosing the right font will give the user a pleasant reading experience, however, using inappropriate fonts makes the site difficult to read. When you decide what font you are going to use, you will typically choose a suitable size for that font.

The Font-size property sets the size of the font you want to use under all font-family in the page, but in most cases the browser is typically the first font declared under Font-family. The browser will continue to render the page using the candidate font only if the first font is not available for some reason.

For example, take a look at the following code:

Body {  font-family: ' Lato ', Verdana, Sans-serif;}

If your browser is not available for the ' Lato ' font downloaded from Google Fonts, the Verdana font will be used in this case. However, the value of font-size in my mind seems to be set for the ' Lato ' font, not Verdana.

What is the aspect ratio of a font?

The size of the font and its readability may vary greatly due to the value of the font-size, especially as the Latin text causes it to differ greatly in case. In this case, the ratio of the height of the lowercase letter to the corresponding uppercase letter is an important factor in determining the legibility of a font, which is often called the aspect ratio of a font.

As I said before, once you set the value of Font-size, this value will work for all fonts. If the aspect ratio of the candidate font is too different from the aspect ratio of the preferred font, this may affect the readability of the candidate font.

The Font-size-adjust property plays a particularly important role in this case because it allows you to set the x-axis height of all fonts to a uniform size to improve the readability of the text.

Select the appropriate value for the Font-size-adjust attribute

Now that you know the importance of using the Font-size-adjust attribute, it's time to use it on your website. The syntax for this property is as follows:

Font-size-adjust:none | <number>

None is the default value, which means that the font size is not resized.

You can also set the value of the property to a number that will be used to calculate the x-axis height of all the fonts on a Web page, and the x-axis height is equal to the number multiplied by the font-size value. This can improve the readability of small-size fonts. The following is an example of using the Font-size-adjust property:

font-size:20px;font-size-adjust:0.6;

The x-axis height of all fonts is now 20px * 0.6 = 12px, the actual size of a font can now be modified to ensure that the x-axis height is always equal to 12px. The value of the font-size after adjustment can be calculated by the following formula

c = (a/a ') s.

Here, c refers to the adjusted font-size,s means that the previously specified font-size,a is the aspect ratio specified by the Font-size-adjust attribute, and a ' refers to the aspect ratio of the actual font.

You cannot set the value of Font-size-adjust to a negative number, and setting it to 0 causes the text to have no height, in other words, the text is hidden. In the old browser, such as Firefox 40, setting its property value to 0 is equivalent to setting to none.

In most cases, developers will typically try different font-size values to determine which value looks best for a given font. This means that, ideally, they want the x-axis height of all fonts to be equal to the x-axis height of the preferred font. In other words, the most appropriate font-size-adjust value is the aspect ratio of your preferred font.

How to calculate the aspect ratio of a font

To determine the appropriate aspect ratio for a font, you can actually experience that the resized font size should be the same as the font size that was originally declared. This means that the above formula should be equal to a ' a '.

The first step in calculating the aspect ratio is to create 2 <span> elements, and each <span> element will contain a letter and a border enclosing the letter (because we want to compare, so the letters in each <span> must be the same). At the same time, the Font-size property value should be the same for each element, but only one element will use the Font-size-adjust property. When the value of font-size-adjust equals the aspect ratio of a given font, the letters under each <span> are the same size.

In the demo below, I created a border around the letters ' t ' and ' B ' and applied different font-size-adjust attribute values to each group of letters.

The following is the relevant code:

. adjusted-a {  font-size-adjust:0.4;}. adjusted-b {  font-size-adjust:0.495;}. adjusted-c {  font-size-adjust:0.6;}

As shown in the demo below, the larger the value of the Font-size-adjust, the larger the letter appears, and the smaller the lower the size of each group of letters is equal when the value equals the aspect ratio.

Use Font-size-adjust on the website

The following demo uses Font-size-adjust values set for the ' Lato ' font in the previous Codepen demo, and will now be used to adjust the candidate font ' Verdana '. There will be a button to control whether changes occur, so you can see the changes before and after the change:

The effect is even more noticeable when you're dealing with a lot of text, but the above example should be enough to make you realize the usefulness of this property.

Browser support

Currently, only Firefox supports the Font-size-adjust property by default. Chrome and Opera are supported as test features from versions 43 and 30, and developers need to go to chrome://flags to turn on the experimental Web Platform Features option. Edge and Safari do not support this property.

If you decide to use this property, the support of the low-version browser will not be a problem, this property has been designed to consider backward compatibility, unsupported browsers will display text correctly, supported browsers will be based on the value of the property to adjust the font size.

Summarize

After reading this article, you should know what the Font-size-adjust property is, why it is important, and how to calculate the aspect ratio of the different fonts.

Because Font-size-adjust is gracefully degraded in the old browser, you can apply this attribute directly to your production environment today to improve the readability of the page text.

Do you have any other tools or methods to help developers calculate the aspect ratio more quickly? Leave a message and tell them.