Font Size Adjustments

The Details

Initial View

Font vary in their base heights. For example, here's a stylesheet that loads two fonts (Tauri and Teachers) and defines classes for each set at 4rem:

<style>
  @font-face {
    font-family: "Tauri-base";
    src: url("https://fonts.gstatic.com/s/tauri/v20/TwMA-IISS0AM3IpVWHU_TBqO.ttf");
  }

  @font-face {
    font-family: "Teachers-base";
    src: url("https://fonts.gstatic.com/s/teachers/v6/H4c5BXKVncXVmUGsgTwx4E9oHx2xfjBr3powY55O4AS32A.ttf");
  }

  .tauri-base {
    font-size: 4rem;
    font-family: "Tauri-base";
  }

  .teachers-base {
    font-family: "Teachers-base";
    font-size: 4rem;
  }
</style>

Displaying five lowercase "x" characters for each font face shows us the different heights:

<p>
  <span class="tauri-base">xxxxx</span>
  <span class="teachers-base">xxxxx</span>
</p>

Even though both fonts are set to 4rem; the x characters from the Tauri font is significantly taller than the Teachers font. This makes working with type scales harder. If you don't take the height differences into account they won't be accurate across different fonts.

Font Size Adjustments

The size-adjust descriptor became available in major browsers as part of Baseline 2023. It provides a mechanism to normalize heights across fonts. The @font-face declarations provided on this page include the descriptor. For example, Tauri's size-adjust is 90.2201%. Teachers' is 113.6622%. We can use those values to make a new set of styles:

<style>
  @font-face {
    font-family: "Tauri-adjusted";
    src: url("https://fonts.gstatic.com/s/tauri/v20/TwMA-IISS0AM3IpVWHU_TBqO.ttf");
    size-adjust: 90.2201%;
  }

  @font-face {
    font-family: "Teachers-adjusted";
    src: url("https://fonts.gstatic.com/s/teachers/v6/H4c5BXKVncXVmUGsgTwx4E9oHx2xfjBr3powY55O4AS32A.ttf");
    size-adjust: 113.6622%;
  }

  .tauri-adjusted {
    font-size: 4rem;
    font-family: "Tauri-adjusted";
  }

  .teachers-adjusted {
    font-family: "Teachers-adjusted";
    font-size: 4rem;
  }
</style>

Using them to output the x characters again shows the height are the same:

<p>
  <span class="teachers-adjusted">xxxx</span>
  <span class="tauri-adjusted">xxxx</span>
</p>

The Calculations

The `size-adjust` values are based off that `Aspect Value` of each font. You can learn more about it on the font-size-adjust page on MDN. It includes a section on Determining the aspect value of a font. I built a process that did the calculation for the Google, Nerd, and System fonts available in the search.

The resulting aspect values are values ranging from about 0.3 to about 0.8. The `size-adjust` declaration needs a percentage. I defined 0.5 as 100%. The values for each font are based off it (e.g. Teachers' aspect value is `0.4399` which translates into `113.6622%`). Values are carried out to 4 significant digits. That's probably overkill, but I'd rather go to far than leave it short.

Notes

• The process I ran used a lowercase 'b' character to determine the aspect values. That character was chosen because it's what was used in the MDN example.

• Check out the size-adjust for more details. It includes two key notes:

  The size-adjust descriptor behaves in a similar fashion to the font-size-adjust property. It calculates an adjustment per font by matching ex heights.

  and

  All metrics associated with this font are scaled by the given percentage. This includes glyph advances, baseline tables, and overrides provided by @font-face descriptors.

• The calculations are doing with "floating-point" math. That means that sometimes things like `0.57 - 0.01 = 0.559999999999999`. There are ways to fix that, but they add complexity. Given that the values go to four significant digits the minor variations shouldn't have any practical effect.
• There are lots of parameters for any given font which go into sizing. For example, just because the lowercase 'x' characters of two fonts are the same, they might have very different capital letter heights.
• While the height comes from the values defined in the font files the glyphs themselves might push above or below the positions (i.e. the x for some fonts might appear a different size or in a different position than expected).
• There's over 1900 fonts in the data set. The process that produced them was automated. Given the complexities of font files, I wouldn't be surprised of find some values result in unexpected sizes. Open an issue if you see something that's obviously wrong and I'll take a look.