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:
- Normalize styles across browsers
- Preserve useful browser defaults, rather than erasing them
- Correct bugs and common browser inconsistencies
- Improve usability with subtle changes
Additionally, systematize.scss aims to do the following:
- Default to system fonts, and better typography in general
- Be slightly more opinionated while retaining clear focus
Installation
npm install --save systematize
Demo
Variables
- $sys-font-stack System fonts, detailed below
- $sys-font-stack-mono Monospaced fonts, detailed below
- $sys-selection-background Selection background color, #b2d7ff
- $sys-selection-color Selection text color (not set by default)
- $sys-normalize-fonts-inputs Normalize font properties on form elements (off by default)
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