Improve Web Typography with CSS Font Size Adjust

CSS font-size-adjust Property

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:

[code language=”css”]
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.

Continue reading %Improve Web Typography with CSS Font Size Adjust%

Source: Sitepoint