{"id":1795,"date":"2017-01-31T07:53:55","date_gmt":"2017-01-31T07:53:55","guid":{"rendered":"https:\/\/lineo.es\/system-ui-font-family\/"},"modified":"2026-04-01T07:14:13","modified_gmt":"2026-04-01T07:14:13","slug":"system-ui-font-family","status":"publish","type":"post","link":"https:\/\/lineo.es\/en\/system-ui-font-family\/","title":{"rendered":"The system-ui font"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

The system-ui font<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Imagine:<\/p>

font-family: system-ui, sans-serif;<\/pre>
Enabled by default in Chrome 56,\u00a0system-ui<\/a>\u00a0is a special font name, that tells Chrome to use the system font (be it\u00a0Cantarell<\/em>\u00a0in Gnome,\u00a0San Francisco<\/em>\u00a0in macOS, etc.)<\/p>
But system-ui is something new, as far as I know available only in the latest versions of Blink based browsers. So what to do as of today? This is from Bootstrap 4:<\/p>
font-family: -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;<\/pre>
Safari and Firefox on Mac will recognize\u00a0-apple-system<\/em>\u00a0and use the Mac system font, just as system-ui, but not standard. Then comes the standard\u00a0system-ui<\/em>, but only available in Chrome 56. Older versions of Chrome, on Mac only, will interpret the same with\u00a0BlinkMacSystemFont<\/em>. Now comes\u00a0Segoe UI<\/em>, unlike the first three this is a real font name, the one used in Windows since Windows Vista. Now comes:\u00a0Roboto<\/em>\u00a0for Android,\u00a0Helvetica Neue<\/em>\u00a0for some versions of macOS, and\u00a0Arial<\/em>\u00a0for old Windows.<\/p>
But, but, where is Gnome\u2019s font, you insensitive clod?<\/p>
font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Helvetica Neue\", Arial, Helvetica, sans-serif;<\/pre>
Ah that looks better, just added\u00a0Oxygen<\/em>\u00a0for KDE,\u00a0Ubuntu<\/em>\u00a0for.. (I let you guess this one),\u00a0Cantarell<\/em>\u00a0for Gnome, and\u00a0Helvetica<\/em>\u00a0because\u2026 well I don\u2019t know why.<\/p>
If you want, you can still add\u00a0Droid Sans<\/em>\u00a0for old Android,\u00a0Fira Sans<\/em>\u00a0for Firefox OS,\u00a0 and maybe\u00a0Lucida Grande<\/em>\u00a0for some old versions of macOS. Okey, the list is long but you only have to type it once. You can also define the list\u00a0using @font-face<\/a><\/p>
Make your own list, decide which platforms you don\u2019t care about, and use it as default in your projects. But don\u2019t be insensitive and include\u00a0Cantarell<\/em>\u00a0in the list!<\/p>
Of course, if your site tries to sell something or to send a message, and if you care enough, then consider choosing a nice font (adjust letter spacing bla bla). To make it short, maybe something like:<\/p>
font-family: \"My nice font\", system-ui, sans-serif;<\/pre>
Check\u00a0Font Squirrel<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"
Imagine: font-family: system-ui, sans-serif; Enabled by default in Chrome 56,\u00a0system-ui\u00a0is a special font name, that tells Chrome to use the system font (be it\u00a0Cantarell\u00a0in Gnome,\u00a0San Francisco\u00a0in macOS, etc.) But system-ui is something new, as far as I know available only in the latest versions of Blink based browsers. So what to do as of today? […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_header_footer","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1795","post","type-post","status-publish","format-standard","hentry","category-sin-categoria"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/lineo.es\/en\/wp-json\/wp\/v2\/posts\/1795","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lineo.es\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lineo.es\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lineo.es\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lineo.es\/en\/wp-json\/wp\/v2\/comments?post=1795"}],"version-history":[{"count":5,"href":"https:\/\/lineo.es\/en\/wp-json\/wp\/v2\/posts\/1795\/revisions"}],"predecessor-version":[{"id":2137,"href":"https:\/\/lineo.es\/en\/wp-json\/wp\/v2\/posts\/1795\/revisions\/2137"}],"wp:attachment":[{"href":"https:\/\/lineo.es\/en\/wp-json\/wp\/v2\/media?parent=1795"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lineo.es\/en\/wp-json\/wp\/v2\/categories?post=1795"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lineo.es\/en\/wp-json\/wp\/v2\/tags?post=1795"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}