Question: System fonts? about capsize HOT 3 CLOSED

Hey 👋

Thanks for posting this officially, its on top of my list for the next problem to solve. The issue here is that the "system font stack" lacks a deterministic outcome cross platform and OS, which makes performing any sizing or trimming a trickier problem.

My intended starting point is to identify the fonts rendered for all of these (this looks helpful) and compare their metrics. If we're lucky they'll have a similar enough form factor.

It's obviously a tricky problem that comes with trade offs as determining the rendered font at runtime is not feasible. I'll update this issue with my findings.

from capsize.

The Bumbag design system uses both capsize and system fonts and could be a useful starting point for anyone looking to do something similar.

from capsize.

@robphoenix thanks for sharing. I have been compiling a list of metrics for system fonts and was hoping to add a new System tab to the font selector on the website.

Might also look expose these from the node module so they are importable.

Ultimately though system fonts are a runtime decision and requires testing your fallbacks. For instance older apple devices that dont have SFPro would use SFPro metrics with Helvetica Neue.

from capsize.