x-height problems with system-ui and ui-monospace

[badlydrawnrob]

I'm removing this hack: use the same x-height for inline code and text.
I'm currently hacking the x-height by making inline <code> a little smaller.
system-ui and ui-monospace (on Mac) have a different x-height.
This makes inline code and code blocks feel massive!

The solution

1. Use the exact same font-family in mono, making sure their x-heights are the same
2. Use a variable font and change it's optical size
3. Check two different font's x-height prior to using them. Make sure they match!

An example of the problem

Image uses SF Pro and SF Mono on iOS and MacOs devices (at time of writing)