Provide system fonts

Are there any downsides to setting this by default?

body {
	font-family:
		'-apple-system',
		'system-ui',
		'BlinkMacSystemFont',
		'Segoe UI',
		'Roboto',
		'Helvetica Neue',
		'Arial',
		'sans-serif',
		'Apple Color Emoji',
		'Segoe UI Emoji',
		'Segoe UI Symbol';
}

Users then get good defaults but can override it with their own body selector if they want.

Alternatively, if this gets a lot of resistance, we could provide a CSS variable, so users who want it can just do:

body {
	font-family: var(--system-fonts);
}

Thoughts?

(If you 👎 please also share your thoughts on why)

[mdo]

My blog post was written over a year ago, so there’s some stuff that’s off and already changed since then. Did my best to call those out where I could. We had issues with system-ui and our international audiences if I recall.

The font stack and my post don’t match up though with what’s there currently with Helvetica vs Helvetica Neue. I will say that from experience, Helvetica Neue has much different behaviors with vertical alignment compared to Helvetica. It’s a superior font for macOS IMO, but clearly something was jumbled either on my end or the stack itself. Definitely needs looking into as my gut tells me we should have Helvetica Neue and Helvetica in there given Windows aliases Helvetica outright to Arial.

[anselmh]

In which case I think best would be to set this directly, as originally suggested by you and not provide an opt-in via CSS Custom Property. Thanks for this discussion, it actually changed my views on this. 🙂