Typography stack for system fonts

[badlydrawnrob]

Using system-ui, --system-mono and --fallback-mono In general, these should use the defaults for each OS. The monospace font seems to have a larger x-height ... So we're using a Goldilocks hack with calc(...) for --font-family-mono.[^1]

I'm going to allow for variety of fonts depending on system-ui:

• [x] 🔗 Monospace font stacks (default is browser-safe monospace fonts)
  • [ ] There's some very nice monospaced fonts with ligatures too.
  • [ ] See [this Anki issue](Good monospaced fonts) for alternative monospace fonts. (see "Good monospaced fonts")
• [ ] Does the mono line-height need updating?
• [x] Goldilocks the --font-family-mono (i.e: "just right") Use system-ui
• [x] Use a set --font-family rather than the generic --ios/android font stack?
• [x] Does it look the same on ios and android? No! (the default, at least)
• [x] See also this link and another explanation on monospace font-size issues (see below comment)

• 40

[^1]: This has some repercussions when using a child theme, as we possibly have to overwrite this hack. If the --font-family and --font-family-mono fonts share the same x-height then we can safely remove it. From (limited) tests, this does not seem to be the case with SF Pro and SF Mono

[badlydrawnrob]

With a default font-size, the monospace font often feels too big:

Default

--font-size-mono is a bit of an in-betweeny font size. calc( var(--font-size-m) + .1rem) seems to balance out, but it might effect the baseline grid:

1: Original --font-size:

2: Somewhere in-between: calc( var(--font-size-m) + .1rem):

3: Using --font-size-m:

Option 2 gives a fractional font-size in Safari however (but with modern devices shouldn't matter — it's in .rem anyway:

[badlydrawnrob]

Closing this for now ...