search

badlydrawnrob / print-first-css

Other
0 stars 0 forks source link

`x-height` problems with `system-ui` and `ui-monospace` #71

Open badlydrawnrob opened 2 months ago

badlydrawnrob commented 2 months ago

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

Screenshot 2024-07-10 at 15 55 22

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