{"id":10643,"date":"2026-08-11T17:56:29","date_gmt":"2026-08-11T22:56:29","guid":{"rendered":"https:\/\/master.dev\/blog\/?p=10643"},"modified":"2026-08-11T17:56:30","modified_gmt":"2026-08-11T22:56:30","slug":"system-ui-san-francisco-fun","status":"publish","type":"post","link":"https:\/\/master.dev\/blog\/system-ui-san-francisco-fun\/","title":{"rendered":"Reminder that `system-ui` is well supported, when you use it on macOS you get San Francisco which is a variable font, which is fun, and the fallbacks are pretty good."},"content":{"rendered":"\n

You can use the value system-ui<\/code> in your font-family<\/code> in CSS, you get a font that represents the default user interface font. Meaning you get something kinda Windowsy on Windows, Linuxy on Linux, and Macsy on macOS, etc. It’s well supported<\/a> across browsers and platforms. I think it’s a good choice for many situations.<\/p>\n\n\n

html<\/span> {\n  font-family<\/span>: 100%<\/span>\/1.4<\/span> system-ui, sans-serif;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
It also happens to be a variable font<\/em>, meaning we can change certain aspects of the font programmatically. In the case of San Francisco, we’ve got a weight (\"wght\"<\/code>) and width (\"wdth\"<\/code>) axis that can pretty dramatically change the look of it.<\/p>\n\n\n
h1<\/span> {\n  font-variation-settings<\/span>: \n    \"wght\"<\/span> 900<\/span>,\n    \"wdth\"<\/span> 700<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"
Same font, with changed variable font settings<\/figcaption><\/figure>\n\n\n\n
Here’s a basic demo:<\/p>\n\n\n\n
I’ve only got a Mac, so what I see when using it is San Francisco.<\/a> It’s a pretty fancy font, and with zero download cost, I think that’s great.<\/p>\n\n\n\n