Style Guide

Visit ncmg.com.au

Style Guide

Typography

Good typography seems simple. On the surface, it comes down to a typeface that reflects the emotion that a website is trying to convey. However, it's actually far more complex than this. It also comes down to attributes like line height, font weight, kerning and more.

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.

Inter ui sample

An Inter UI Sample (courtesy of https://rsms.me/inter/)

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 $monospace.

Guidelines

The following rules should help you keep your typography beautiful.

  1. 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).

  2. 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 ch unit, which specifies sizes according to a number of characters.

  3. Use grey, not black. Black can be straining on the eyes. Use grey instead. If you're in a Sass environment, use $text for text colour, as it's a grey saturated with $zesty.

  4. Use colour and weight to emphasize or de-emphasize text. It's better than changing the font size.

  5. 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.