Link: System Fonts in CSS

System fonts are fast, popular and available. Why not use em if ya got em?

If you’re like me, you love System Fonts. They can keep your webpage loading-time speedy, and they look damn good.

Craig Hockenberry (author of the snippet below), was previously a software developer for Apple, Microsoft, and Adobe. He’s been at the center of figuring out how to leverage these fonts for use on the web. As more and more front-end developers prescribe the use of System Fonts for web applications, we’ll increasingly have a web that looks familiar and friendly.

It’s kind of like how the highway system (for the most part) uses the same typeface for signage. At any rate, I use it here and will definitely use it again. Here’s a basic usage directly from Craig:

 body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
"Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
"Helvetica Neue", sans-serif;

Many thanks to Craig, for his prior contributions in software and his continued research on CSS System Fonts.

Read more: System Fonts in CSS