font-family-system-ui
The upcoming CSS 4 specification promises us a new generic font family,
system-ui,
representing the default UI font on a given platform. This is a poor man's
(but future-proof) font-family: system-ui implementation.
Note that because the @font-face rule doesn't give us a syntax for defining
a new font family alias based on a predefined generic family such as -apple-system,
implementing this as a polyfill is possible
but would sacrifice the quality of implementation, thus a CSS utility class.
Installation
Usage
HTML:
Sic transit gloria mundiCSS et al.:
p { .u-font-family-system-ui; /* Less */ @extend .u-font-family-system-ui; /* Sass */ composes: .u-font-family-system-ui; /* CSS Modules */ font-size: 1rem;}