font-family : ui-sans-serif, system-ui font-stretch : 150 font-weight : 1 font-optical-sizing : 96 SF Pro has a weight axis, a width axis and an optical size axis, offering a huge amount of typographic versatility. SF Pro is one particular variant of a typeface called San Francisco. Ui-sans-serif and system-ui both select the same font: SF Pro. On Apple devices, all the system fonts are variable fonts. Which typefaces do these keywords select on the different operating systems? Let’s take a look. More importantly, they’re great for performance, and some of them look better than most of what you’ll find on Google Fonts. In the words of the CSS Font Spec, system fonts “allow web content to integrate with the look and feel of the native OS”.
Additionally, Safari also supports the keywords ui-monospace, ui-rounded, ui-sans-serif, and ui-serif. The CSS keyword system-ui as a value for font-family has been supported by all browsers for years, so the above code is no longer necessary.
It’s still relatively common to see a giant font stack aimed at selecting the system font of each different platform: font-family : -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
