Like normalize.css, but with system fonts.
This project is an SCSS version of normalize.css (8.0.1
at the time of this writing.)
They share the following functionality:
Additionally, systematize.scss aims to do the following:
Installation
npm install --save systematize
Demo
Variables
System Fonts
Font family name | Why |
---|---|
-apple-system |
Apple |
Segoe UI |
Windows |
system-ui |
Generic font family |
Roboto |
Android |
Helvetica Neue |
Old Apple |
sans-serif |
Catch-all |
Segoe UI comes before system-ui for reasons.
Monospaced Fonts
Font family name | Why |
---|---|
SF Mono |
Apple |
Ubuntu Mono |
Ubuntu |
Consolas |
Windows |
DejaVu Sans Mono |
Bitstream Vera Sans Mono (Linux) |
Menlo |
Bitstream Vera Sans Mono (Apple) |
monospace |
Generic font family |
There is no Monaco because Menlo shipped with Mac OS X 10.6 Snow Leopard in 1948.
Coding Style
See Sass Guidelines