A photograph of the original Macintosh

Link: System Fonts in CSS

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


Thanks for reading The Shortlog.

Enjoy unlimited access with a free account today.

Enjoy unlimited access to The Shortlog with a free account.