Add support for font-size-adjust into the font stack

font-size-adjust allows you to amend the perceived x-height of fallback fonts to match your original font. A specific use case for us would be getting foreign characters that are not in NTA to show up with matching metrics.

For NTA the original x-heights are 0.5 for regular text and 0.525 for bold (this can be tested by adding a font-size-adjust to gov.uk and adjusting the property until no difference is seen when it’s toggled). Applying these values makes the fallback of Arial match NTA’s metrics.

Current support is Firefox (and Chrome behind a flag).

stylesheets/_typography.scss

@@ -33,6 +33,14 @@ $is-print: false !default;
   font-weight: $font-weight;
   text-transform: none;
 
+  @if $toolkit-font-stack == $NTA-Light {
+    @if $font-weight > 400 {
+      font-size-adjust: 0.525;
+    } @else {
+      font-size-adjust: 0.5;
+    }
+  }
+
   @include media(tablet) {
     font-size: $font-size;
     line-height: $line-height;