Improve Web Typography with CSS Font Size Adjust

Share this article

CSS font-size-adjust Property
CSS font-size-adjust Property

This article was peer reviewed by Panayotis Matsinopoulos. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

The font-size-adjust property in CSS allows developers to specify the font-size based on the height of lowercase letters instead of uppercase letters. This can significantly improve the legibility of text on the web.

In this article, you will learn about the importance of the font-size-adjust property and how to use it properly in your projects.

The Importance of font-size-adjust

Most websites that you visit consist primarily of text. Since the written word is such an important part of a website, it makes sense to pay special attention to the typeface you are using to display your information. Choosing the right typeface can result in a pleasant reading experience. However, using the wrong one can make the website illegible. Once you have decided the typeface you want to use, you generally choose a proper size for it.

The font-size property sets the size of all the font-family options that you want to use on a website. However, most of the times it is generally chosen in such a way that your first font-family option looks good. The problem arises when the first choice is not available for some reason and the browser renders the text using one of the fallback fonts listed in the CSS document.

For instance, given this CSS rule:

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

If ‘Lato’, which your browser downloads from Google Fonts, is not available, the next fallback font, in this case Verdana, will be used instead. However, it’s likely that the font-size value was chosen with ‘Lato’ in mind, rather than with Verdana.

What Is the Aspect Value of a Web Font?

The apparent size of a font as well as its legibility can vary greatly for a constant font-size value. This is especially true for scripts like Latin that distinguish between upper and lowercase letters. In such cases, the ratio of the height of lowercase letters to their uppercase counterparts is an important factor in deciding the legibility of the given font. This ratio is commonly called the aspect value of a font.

As I mentioned earlier, once you set a font-size value, it will remain constant for all the font families. However, this may affect the legibility of the fallback font if its aspect value is too different from the aspect value of the first choice font.

The role of the font-size-adjust property becomes very important in such situations, as it allows you to set the x-height of all the fonts to the same value thereby improving their legibility.

Choosing the Right Value for font-size-adjust

Now that you know the importance of using the font-size-adjust property, it is time to learn how to use it on your website. This property has the following syntax:

font-size-adjust: none | <number>

The initial value of font-size-adjust is none. The value none means that no adjustment will be made to the value of the font-size of different font-family options.

You can also set the value of the font-size-adjust property to a number. This number is used to calculate the x-height of all the fonts on a webpage to the same value. The x-height is equal to the given number multiplied by the font-size. This can improve the readability of fonts at small sizes quite a bit. Here is an example of using the font-size-adjust property.

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

The x-height of all the fonts will now be 20px * 0.6 = 12px. The actual size of a given font can now be changed to make sure that the x-height always stays at 12px. The new adjusted font-size of a given font can be calculated using this formula:

c = ( a / a' ) s.

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

You cannot set font-size-adjust to a negative value. A value of 0 will result in text with no height. In other words, the text will effectively be hidden. In older browsers, like Firefox 40, a value of 0 is equivalent to setting font-size-adjust to none.

In most cases, developers generally experiment with a few font-size values to see what looks best for a given font. This means that ideally, they would want the x-height of all the font options to be equal to the x-height of their first choice font. In other words, the most suitable value for the font-size-adjust property is the aspect value of your first choice font.

How to know the Aspect Value of a Font

To determine the right aspect value for a font, you can rely on the fact that its adjusted font-size should be the same as the original font-size that you specified. This means that a should be equal to a' in the previous equation.

The first step to calculate the aspect value is the creation of two <span> elements. Both elements will contain a single letter and a border around each letter (the letters have to be the same for both <span> elements because we’ll need to make a comparison between them). Also, both elements will have the same value for the font-size property, but only one of them will also use the font-size-adjust property. When the value of font-size-adjust is equal to the aspect value of a given font, both letters in each <span> element will be of the same size.

In the following demo, I have created a border around the letters ‘t’ and ‘b’ and applied a different font-size-adjust value for each pair.

Here’s the relevant snippet:

.adjusted-a {
  font-size-adjust: 0.4;
}

.adjusted-b {
  font-size-adjust: 0.495;
}

.adjusted-c {
  font-size-adjust: 0.6;
}

As you can see in the live demo below, a higher font-size-adjust value makes the letters larger and a lower value makes the letters smaller. When font-size-adjust becomes equal to the aspect value, the pairs attain equal size.

See the Pen Determining Aspect Value by SitePoint (@SitePoint) on CodePen.

Using font-size-adjust on Websites

The following demo uses the font-size-adjust value that was calculated in the previous CodePen demo for the ‘Lato’ font to adjust the font-size of ‘Verdana’, which acts as fallback font. A button will turn the adjustment on or off so that you can see the difference yourself:

See the Pen Using font-size-adjust on Websites by SitePoint (@SitePoint) on CodePen.

The effect is more noticeable when you are working with a larger amount of text. However, the above example should still be enough to give you an idea of the usefulness of this property.

Browser Support

At present, only Firefox supports font-size-adjust by default. Starting from version 43 and 30, Chrome and Opera support this property behind the “Experimental Web Platform Features” flag that can be enabled in chrome://flags. Edge and Safari don’t support the font-size-adjust property at all.

If you decide to use this property, lower browser support should not be an issue at all. This property has been designed with backward compatibility in mind. Non supporting browsers will display the text normally while supporting browsers will adjust the font-size based on the font-size-adjust property’s value.

Conclusion

After reading the tutorial, now you know what the font-size-adjust property does, why it’s important, and how to work out the aspect value of different fonts.

Because font-size-adjust degrades gracefully in older browsers, you can go ahead and start using it today to improve the legibility of text in production websites.

Do you know some other tools or tips that can help users calculate the aspect values of a font quickly? Let fellow readers know in the comments.

Frequently Asked Questions on Improving Web Typography with CSS Font Size Adjust

What is the importance of CSS font size adjust in web typography?

CSS font size adjust is a crucial property in web typography as it allows developers to adjust the aspect value of fonts that don’t have their own. This is particularly useful when using fallback fonts, as it ensures that the x-height is preserved, regardless of the font used. This means that even if the primary font fails to load, the fallback font will still maintain the readability and overall aesthetic of the website.

How does CSS font size adjust improve the readability of a website?

CSS font size adjust improves the readability of a website by maintaining the x-height of all fonts used. The x-height is the height of lowercase letters, which is a critical factor in readability. By preserving the x-height, CSS font size adjust ensures that the text remains consistent and easy to read, regardless of the font used.

How can I use CSS font size adjust in my web design?

To use CSS font size adjust in your web design, you need to include it in your CSS style sheet. The property takes a number as its value, which represents the aspect value of the font. For example, if you want to set the aspect value to 0.5, you would use the following code:

p {
font-size-adjust: 0.5;
}

What are the limitations of CSS font size adjust?

One of the limitations of CSS font size adjust is that it is not supported by all browsers. As of now, it is not supported by Internet Explorer and some versions of Safari. Additionally, it only works with fonts that have an aspect value, which excludes some fonts.

Can I use CSS font size adjust with web-safe fonts?

Yes, you can use CSS font size adjust with web-safe fonts. However, keep in mind that not all web-safe fonts have an aspect value, so the property may not have any effect on these fonts.

What is the difference between CSS font size adjust and other CSS font properties?

Unlike other CSS font properties, CSS font size adjust does not directly change the size of the font. Instead, it adjusts the aspect value, which affects the x-height of the font. This makes it a unique tool for improving readability and consistency in web typography.

How does CSS font size adjust affect the loading time of a website?

CSS font size adjust does not significantly affect the loading time of a website. However, it can improve the user experience by ensuring that the text remains readable even if the primary font fails to load.

Can I use CSS font size adjust with responsive web design?

Yes, CSS font size adjust can be used with responsive web design. It can help maintain the readability of text across different devices and screen sizes by preserving the x-height of the font.

What is the default value of CSS font size adjust?

The default value of CSS font size adjust is ‘none’, which means that the property is not applied. To use it, you need to specify a number as the value.

Can I use CSS font size adjust with CSS animations?

Yes, CSS font size adjust can be used with CSS animations. However, keep in mind that changing the aspect value can affect the flow of the animation, so it should be used carefully.

Gajendar SinghGajendar Singh
View Author

Gajendar is a web developer with a keen interest in learning new things in web development. He has been developing websites for five years and occasionally writes tutorials on topics he feels confident about.

AdvancedCSSCSScss font-size-adjustmariap
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week