Question: System fonts?

[giedrius-timinskis]

Hello

First of all, I'd like to thank you for creating this library. I've been playing around with it and it's been very impressive. Also makes my codebase so much cleaner by not having to support the basekick solution :)

I have a question about using capsize with system fonts (e.g.font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";) and the like. Any examples I can find are using a specific font to create the font metrics. What would the recommended approach be in dealing with system fonts?

[michaeltaranto]

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.

[robphoenix]

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

[michaeltaranto]

@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.

[michaeltaranto]

Released the @capsizecss/metrics package recently which exposes some common built in system font metrics. Hopefully that can be of use when trimming system fonts, obviously wont help the issue around resolving which font within the font stack rendered.