$system-sans-serif: -apple-system, BlinkMacSystemFont, /* MacOS and iOS */

'Avenir Next', avenir, /* MacOS and iOS */
'Segoe UI', /* Windows */
'Lucida Grande', /* Older MacOS */
'Helvetica Neue', helvetica, /* Older MacOS */
'Fira Sans', /* Firefox OS */
Roboto, Noto, /* Google stuff */
'Droid Sans', /* Old Google stuff */
Cantarell, Oxygen, Ubuntu, /* Linux stuff */
'Franklin Gothic Medium', 'Century Gothic', /* Windows stuff */
'Liberation Sans', /* Linux */
sans-serif, /* Everything else */
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; /* Emojis */

$system-monospace: Menlo, Monaco, /* MacOS */

'Segoe UI Mono, Lucida Console', /* Windows */
'Fira Mono', /* Firefox OS */
'Roboto Mono', 'Noto Mono', /* Google stuff */
'Droid Sans Mono', /* Old Google stuff */
'Ubuntu Mono', 'DejaVu Sans Mono', 'Liberation Mono', /* Linux */
'Courier New', /* MacOS and Windows */
monospace, /* Everything else */
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; /* Emojis */

/*

References:

https://webkit.org/blog/3709/using-the-system-font-in-web-content/
https://en.wikipedia.org/wiki/Avenir_(typeface)
https://www.google.com/design/spec/style/typography.html#typography-typeface
https://core.trac.wordpress.org/ticket/36753#comment:85
http://font.ubuntu.com/
https://mozilla.github.io/Fira/
https://fedorahosted.org/liberation-fonts/
https://bitsofco.de/the-new-system-font-stack/

*/