modernise and refactor font fallbacks

There is currently some inconsistency in our font fallbacks.

kz-typography-xxxx mixins have "#{$kz-typography-xxx}, Helvetica, Arial, sans-serif", but ca-type-inter (although this is a legacy var) doesn’t have any.

It feels like we could standardise and have tokens for font fallbacks.Helvetica, Arial, sans-serif seems outdated. The Apple system font is now “SF Pro” (I believe), so Apple products will default to Helvetica which could look quite ugly in 2020 depending on how sensitive you are to typography 😆 . I think the current best practise is to just use "Font Name", sans-serif. In the past I think you need to add Arial and Helvetica because some browsers would default to a serif font even if you specified sans-serif.

I think there should be a design token for fallback fonts, but I don’t think there just just be one. Perhaps it should be heading style dependent. Maybe even it should be baked into every design token… wait… it is! (https://github.com/cultureamp/kaizen-design-system/blob/master/packages/design-tokens/tokens/typography.json#L5). I think that was added later. Still, my point on Helvetica stands!

Maybe we could get fancy and find the closest Apple system font to Greycliff for example (Avenir perhaps?), and then whatever the closest Microsoft font is (?) These are just some quick thoughts - I think this could do with some research.

[ActuallyACat]

Just adding historical context / conversations to this issue.

This has been discussed as the fallback in the internal DST chats and a few other places.

---

“We need the intended font family (Inter/Greycliff), Noto Sans as our fallback for any non-Latin characters e.g. CJK languages, then any installed or system fonts that would look sensible if the fonts are blocked or don’t load for some reason. As a first cut:”

"Greycliff", "Noto Sans", Helvetica, Arial, sans-serif;
"Inter", "Noto Sans", Helvetica, Arial, sans-serif;

---

Since it’s relevant to this discussion, here’s the Noto Sans exploration that @katsambarcus looked into:

---

There’s also this PR here that adds those fallbacks to our design tokens: https://github.com/cultureamp/kaizen-design-system/pull/558/files

This has yet to propogate through the whole system though, and as you have seen we still have plenty of variables kicking about with insufficient fallbacks.

[github-actions[bot]]

This issue was closed due to 2 months of inactivity. Feel free to reopen it if still relevant.