Typography3.0.0

Nord Design System provides a constrained, purposeful set of typographic styles that we use to present user interface and content as clearly and efficiently as possible.

Typographic scale #

We use the following typographic scale to communicate visual hierarchy in text and to create a predictable sizing for headers and text content. Our typographic scale is purposefully harmonious with our spacing scale. The base font-size is 14px.

Category	Size	Difference	Size token
Typescale XXXL	36px (2.25rem)	+12px	`var(--n-font-size-xxxl)`
Typescale XXL	24px (1.5rem)	+4px	`var(--n-font-size-xxl)`
Typescale XL	20px (1.25rem)	+4px	`var(--n-font-size-xl)`
Typescale L	16px (1rem)	+2px	`var(--n-font-size-l)`
Typescale M	14px (0.875rem)	0	`var(--n-font-size-m)`
Typescale S	12px (0.75rem)	-2px	`var(--n-font-size-s)`
Typescale XS	11px (0.6875rem)	-1px	`var(--n-font-size-xs)`

Line length #

Set the reading environment to suit the reader. Shorter lines are usually more comfortable to the reader. As the line length increases, the user’s eye has to travel further from the end of one line to the beginning of the next, making it harder to track their progress vertically. Aim for an average line length of 50–90 characters, including spaces.

Please keep in mind that our users can control the application layout width, meaning that a line length can not always be specified. For this reason, it’s good practice to design for an ideal line length range, and use responsive design techniques to anticipate different contexts.

Tables #

For tables Nord offers default text styles that provide a legible and accessible typography. Typographic treatment should be consistent across all tables to create a cohesive language. The font size is large enough for users to read comfortably, and the font weight and color should be appropriate for the type of data in each table cell.

Brand typography #

We use a typeface called Armin Grotesk for almost everything related to Nordhealth brand and marketing — from banner ads to print materials. This typeface should not be used for application UIs where we use a typeface called Inter.

Download typeface

Product typography #

For digital products, we use a typeface called Inter which is carefully crafted and designed for computer screens specifically. It features a tall x-height to aid in readability of mixed-case and lower-case text. Several OpenType features are provided as well, like contextual alternates and slashed zero for when you need to disambiguate "0" from "O".

Download typeface

Font stacks #

We use sans serif fonts for most of our type in digital products, the only exception being when you want to display code.

Sans serif font stack: #

font-family: 'Nordhealth Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';

Code font stack: #

font-family: 'Nordhealth Mono', monospace, monospace;

Punctuation #

Punctuation matters because it conveys pause and effect to the reader, and mastering it walks the fine line between a skill for typographers and a skill for copywriters. The most common mistake we often see is using a neutral or straight quote symbol in place of an apostrophe:

This’ll do nicely.

Please don't do this.

Always use smart quotation marks and put commas and periods inside the quotation:

“It’s a ‘magic’ sock.”

"It's a 'magic' sock".

Use multiplication sign, minus sign and plus sign correctly:

1 × 0.5 − 0 = ½

1 X 0.5 - 0 = 1/2

Use correct units of measurement symbols:

Temperature °C

Temperature C

Use real trademark and copyright symbols:

When writing pixel dimensions, use times sign:

1024×768

1024X768

Use the prime and double prime instead of quotation marks to specify inches and feet:

Steve Jobs is 6′ 10″

Steve Jobs is 6' 10"

Use em dash (—) and thin spaces ( ) to make a break between parts of a sentence:

A typeface — and thus a whole text — looks

A typeface - and thus a whole text - looks

use en dash (–) and thin spaces ( ) when indicating a range of values:

1880 – 1912

1880 - 1912

Use ellipsis instead of three periods to indicate an omission:

from a … to z

from a . . . to z

Integration #

Integrating Nord Webfonts into your project is straightforward. You can start using our webfonts immediately by adding this tag to the <head> of your application:

<link rel="stylesheet" href="https://nordcdn.net/ds/fonts/3.0.0/fonts.css" integrity="sha384-dkSLlcNlq50O3Ils6+x72v07BbSaUb10p9/GEuuIJBcR1d0Nn+lDdvUQoXYz2Dq9" crossorigin="anonymous" />

While not recommended for normal use, you can also self-host Nord Webfonts by following the instructions below. This might be required in cases where your application is running inside a sandboxed environment or similar.

Please note that in most cases you will want to install our CSS Framework instead of Webfonts package directly. CSS Framework imports this package internally and gives you wide range of shorthand utility classes to modify an element’s appearance in your application.

Installing Webfonts #

Before moving further with the installation, please make sure you have Node.js installed on your machine. You can install the latest version through their website.

If you’re planning on using Nord Webfonts in a project that doesn’t yet use Node Package Manager, you’ll have to first create a package.json file. To do this, run npm init and follow the steps provided. Once finished, you can install Nordhealth’s Fonts by following the instructions below.

Install using NPM #

Run in your project or website root directory (where package.json lives):

npm install @nordhealth/fonts

Install using Yarn #

Run in your project or website root directory (where package.json lives):

yarn add @nordhealth/fonts

Usage #

Nord Webfonts ships with font files and CSS to self-host them. While you can use Webpack or similar build tool to require the fonts, the easiest way is to install copyfiles NPM package and copy the files over:

npm install copyfiles --save-dev

Once installed, add a script to your package.json that copies the fonts from our package into a location you’ve specified:

"scripts": {
  "copy:fonts": "copyfiles --flat node_modules/@nordhealth/fonts/lib/* src/SPECIFY_YOUR_PATH"
}

You can call this script while starting up your app to make sure you’ve always got the latest fonts copied over. If you're using an UNIX-like environment, you can use & as the separator:

"start": "copy:fonts & dev"

Otherwise, if you need a cross-platform solution, use npm-run-all module:

"start": "npm-run-all copy:fonts dev"

Import in SCSS #

Once you have fonts installed, you can import them in your project. Nord Webfonts provides both SCSS and Less helpers to do this. To import the fonts in SCSS, include this in the beginning of your main SCSS partial:

// Sets correct path to font files
$nord-font-path: "/assets/fonts";

// Import fonts
@import "../../node_modules/@nordhealth/fonts/lib/fonts.scss";

You may need to edit the paths shown above depending on your setup. If you’re using Webpack, you can further simplify the above to:

// Sets correct path to font files
$nord-font-path: "/assets/fonts";

// Import fonts
@import "~@nordhealth/fonts/lib/fonts.scss";

Nord Webfonts also provides a way to control the font loading technique using CSS font-display. This allows you to adjust the load performance of your app:

// Change the font loading technique
// auto, block, swap, fallback, optional
$nord-font-display: auto;

When you’ve imported the fonts in your project, you should use the font-families and font-weights defined in Design Tokens as its API and naming conventions match the ones used in Nord’s Webfonts package.

Import in Less #

To import fonts in Less, include this in the beginning of your main Less partial:

// Sets correct path to font files
@nord-font-path: "/assets/fonts";

// Import fonts
@import "../../node_modules/@nordhealth/fonts/lib/fonts.less";

Import in CSS #

You can also import fonts in plain CSS directly from a CDN. Include this in the beginning of your head:

<link rel="stylesheet" href="https://nordcdn.net/ds/fonts/3.0.0/fonts.css" integrity="sha384-dkSLlcNlq50O3Ils6+x72v07BbSaUb10p9/GEuuIJBcR1d0Nn+lDdvUQoXYz2Dq9" crossorigin="anonymous" />

Can I use Nord Webfonts in my own project? #

Nord Design System is solely meant for building digital products and experiences for Nordhealth. Please see the terms of use for full license details.

Getting support #

Need help with our webfonts? Please head over to the Support page for more guidelines and ways to contact us.

Edit page