Each font to make it unique, there is the
x-height value. In printing, this is a term that refers to the distance in a printed character between the baseline and the median line. In general, it corresponds to the height of the letter x of the font (it is from this that the term comes) because the other letters generally present optical corrections that increase their sizes.
The
font-size-adjust property allows you to specify an optimal aspect ratio for when a fallback font is used; if the substitute font has a different aspect ratio than the preferred one, the text’s x-height will be preserved. By knowing the aspect ratio of the primary font, the browser figures out what dimension of the text to apply to the alternative font, keeping the x-height unchanged.
How to build it
The CSS syntax is pretty easy: font-size-adjust: number | none | inherit;
The possible values are the following:
■ number Defines the aspect ratio value to use
■ none The default value
■ inherit Inherits the font size adjustment from parent elements
You might be wondering how the aspect ratio value is calculated. The W3C specifications are very clear and provide a simple way of carrying out this calculation:
h1 {
font-size: 60px;
}
p {
font-size: 14px;
}To make their display uniform, we need the font-size-adjust attribute:
.adjust {
font-size-adjust: 0.48;
}
