Difference between ui-sans-serif, sans-serif and system-ui generic font names in CSS?

Question

What's the difference between ui-sans-serif and sans-serif fonts in font-family in CSS? And ui-serif vs. serif? And ui-monospace vs. monospace?

Where does system-ui fit into this? Would you use it for all 3 types of fonts, and where would it go in the list of fonts?

I usually see the "ui-" variant coming first in the list of fonts in font-family in CSS, and the other coming last. Something like font-family: ui-sans-serif, (more fonts here), sans-serif. What's the point in doing that if the first matched font will be used? Since ui-sans-serif is a generic font, won't it always be matched and there's no need to add any fonts after it?

Heresiarch

Answer 1

ui- generics should map to the default fonts of the system while non ui- generic ones map to the default of the browser.

A web-browser may have the same default font set for all platforms, however different platforms do have different default fonts.

Reginiaregiomontanus

What is system-ui? – Heresiarch

@Heresiarch the default OS font, disregarding if it's a serif or sans or monospace or whatever. drafts.csswg.org/css-fonts/#system-ui-def – Reginiaregiomontanus