There are some key things to note about the font-size property: The font-size CSS property sets the size of the font overall. Now, let’s take a brief look at the CSS font-size property more broadly before diving into the CSS font-size-adjust property. The CSS font-size-adjust attribute isn’t currently supported by Edge or Safari. Chrome and Opera support this property behind the “Experimental Web Platform Features” flag, which may be activated in chrome:/flags, and ranges from version 43 to 30. As of writing of this article, the CSS font-size-adjust property is currently only supported by Firefox by default. Browser compatibility for font-size-adjustīefore we move into the details, let’s review browser support for the font-size-adjust property. Let’s take a look at browser compatibility in the next section. However, not all typefaces are supported by all browsers, and using unsupported typefaces may make your website look weird, as previously discussed. Using the font-size-adjust attribute can help prevent this from happening by giving you more control over the font size. This is where font-size-adjust comes in handy - in the second line, the attribute adjusts the size of the letters in the second font to match the x-height of the first font’s letters.įont-size-adjust is useful because it determines font readability based on the size of lowercase letters, rather than the size of capital letters, and adjusts the size of lowercase letters to the size of those in the font currently in use. Though both examples use the same two fonts, in the first line without font-size-adjust applied, all of the lowercase letters in the first font are much taller than those in the second font. ![]() This example compares two typefaces with differing x-heights and demonstrates how the x-height of one may be adjusted to match the x-height of the other using font-size-adjust. To give a better depiction of this as it would appear when implemented, take a look at the below illustration. When a font cannot be accessed, the browser falls back on the second font provided, which may cause a significant shift in font size, and, in turn, shift around other parts of our UI. ![]() A developer might, for example, use the Open Sans typeface for headlines and the Roboto Mono font for the body.
0 Comments
Leave a Reply. |