Art & Algorithms

The font-size-adjust property in CSS is used to preserve the readability of the text when the fallback font is different from the primary font. Here’s an explanation of the font-size-adjust property from the given code:

article {
  font-family: "Iowan Old Style", "Palatino Lintype", serif;
  font-size: 1.4rem;
  font-size-adjust: from-font;
}
code {
  font-family: "Courier New", monospace;
}

• font-size-adjust: from-font;: This property ensures that the x-height (the height of the lowercase ‘x’ character) of the secondary fonts is maintained relative to the primary font. The value from-font means that the browser will automatically adjust the font-size of secondary fonts to match the x-height of the primary font family (Iowan Old Style in this case).

Purpose:

1. Consistency in Height: Text remains visually consistent in height across different fonts, preventing drastic changes in text size when the primary font is unavailable.
2. Readability: Maintains legibility by adjusting the fallback fonts to have a similar perceived size to the primary font.

Until the from-font value is supported, you can manually set the font-size-adjust value based on a calculation.

article {
  font-family: "Iowan Old Style", "Palatino Lintype", serif;
  font-size: 1.4rem;
  font-size-adjust: 0.47;
}
code {
  font-family: "Courier New", monospace;
}

In this example, 0.47 is a slight adjustment from the standard 0.5 value typically deferred from dividing the font’s x-height by the font-size. The value requires manual adjustment based on the fonts used in each scenario.