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!