Introducing Inter UI
The NCMG website has two separate typefaces (or fonts). The primary of which, is Inter UI. Inter UI is a free body font, that is designed to look great on small to medium sized displays. It takes inspiration from power houses like Roboto (from Google) and San Francisco (from Apple). It's an excellent all round font, that works well with the NCMG branding.
If you'd like to use it in a Sass environment you can access it (and it's font stack) with
$font-stack. This includes the system font as a fall back.
For the technical side
Sometimes, you need to express things in more technical terms. That's where a monospace font comes in to play. The NCMG website also has a standard monospace typeface, called Roboto Mono. You can use Roboto Mono whenever you like, by using the Sass variable
The following rules should help you keep your typography beautiful.
Keep line heights high. The text you're currently reading has a line height of 1.9! It's insane I know. But it improves readability massively. The more text breathes the easier it is to read (within reason of course).
Keep line length short. The human eye gets tired if it has to read text with more than 80 characters per line. The text you're currently reading is limited to 70 characters. CSS has a criminally underrated
chunit, which specifies sizes according to a number of characters.
Use grey, not black. Black can be straining on the eyes. Use grey instead. If you're in a Sass environment, use
$textfor text colour, as it's a grey saturated with
Use colour and weight to emphasize or de-emphasize text. It's better than changing the font size.
Use at least 16px font sizes. The larger the better. No one ever complains the text is too large. Save everyone some time and bump up your font sizes.