System fonts for speed and legibility

I found this neat CSS trick for using system fonts. If you, for example, are reading this on a Mac with Monterrey, you are reading this in San Francisco Pro, and on a computer with Windows 10, then it’s Segoe UI.

Using system fonts is excellent for several reasons: 1/ Fonts are not externally loaded, blazing fast. 2/ It looks styled to the OS; it just kind of fits. 3/ Always perfectly rendered, fonts are not looking blurry.

body {
  font-family: system-ui, Helvetica, Arial, sans-serif;

The CSS is easy to use. Given it renders out differently given OS, I’m wondering if it’s even possible to make it work in Figma; perhaps a nice idea for a hack day :)


Hope you found this CSS trick useful!

    This site does not track you or collect analytics.

    Built with Gatsby and hosted on Netlify.