Typography #

Duet uses typography to present user interface and content as clearly and efficiently as possible. Type also expresses hierarcy, our brand, and creates the overall look and feel.

Duet Design System’s typographic scale is harmonious with our spacing scale. We use the below defined values to create a predictable sizing for headers and text content. The base font-size is 16px.

Download #

You can download our brand typefaces for desktop and print usage below. For web usage, please continue reading.

Installing webfonts #

Duet Design System provides an NPM package for LocalTapiola and Turva that makes it easy to install and self-host our webfonts. Each typeface ships with all the necessary font files and SCSS, Less & CSS to self-host the typeface.

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 Duet Fonts 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 Duet Fonts by following the instructions below.

Install using NPM #

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

npm install @duetds/Fonts

Install using Yarn #

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

yarn add @duetds/fonts

Usage #

Duet Fonts 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 Duet’s package into a location you’ve specified:

"scripts": {
  "copy:fonts": "copyfiles --flat node_modules/@duetds/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. Duet Fonts provides both SCSS and Less helpers to do this. To import LocalTapiola fonts in SCSS, include this in the beginning of your main SCSS partial:

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

// Import LocalTapiola fonts
@import "../../node_modules/@duetds/fonts/lib/localtapiola.scss";

// Import Turva fonts
@import "../../node_modules/@duetds/fonts/lib/turva.scss";

You may need to edit the paths shown above depending on your setup. Please keep in mind that most of the time you shouldn’t load both LocalTapiola and Turva fonts at the same time for performance reasons.

If you’re using Webpack, you can further simplify the above to:

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

// Import LocalTapiola fonts
@import "~@duetds/fonts/lib/localtapiola.scss";

// Import Turva fonts
@import "~@duetds/fonts/lib/turva.scss";

Duet Fonts 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
$duet-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 Duet Fonts.

Import in Less #

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

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

// Import LocalTapiola fonts
@import "../../node_modules/@duetds/fonts/lib/localtapiola.less";

// Import Turva fonts
@import "../../node_modules/@duetds/fonts/lib/turva.less";

Import in CSS #

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

<!-- Import LocalTapiola fonts -->
<link rel="stylesheet" href="https://cdn.duetds.com/api/fonts/3.0.51/lib/localtapiola.css" integrity="sha384-5JYmtSD7nykpUvSmTW1CHMoBDkBZUpUmG0vuh+NUVtZag3F75Kr7+/JU3J7JV6Wq" crossorigin="anonymous" />

<!-- Import Turva fonts -->
<link rel="stylesheet" href="https://cdn.duetds.com/api/fonts/3.0.51/lib/turva.css" integrity="sha384-hHdwZODJ+y2QoCpmMYq9dSnwexFN8FO9B9cVru7Y7iy2l3bXKpf/vNfPASXgfKWU" crossorigin="anonymous" />

List of all available font formats #

Below you can find a list of all available font formats and paths to them.

• LocalTapiola EOT: "@duetds/fonts/lib/LocalTapiola-FONTSTYLE.eot"
• LocalTapiola WOFF: "@duetds/fonts/lib/LocalTapiola-FONTSTYLE.woff"
• LocalTapiola WOFF2: "@duetds/fonts/lib/LocalTapiola-FONTSTYLE.woff2"
• Turva EOT: "@duetds/fonts/lib/Turva-FONTSTYLE.eot"
• Turva WOFF: "@duetds/fonts/lib/Turva-FONTSTYLE.woff"
• Turva WOFF2: "@duetds/fonts/lib/Turva-FONTSTYLE.woff2"

Keeping fonts up to date #

To make sure you’re using the latest available fonts, run npm outdated to see which packages have updates. If you see outdated versions, use npm update to update to latest minor version. For major versions you have to bump the version numbers by hand in package.json and then run npm install.

Examples #

• The very page you’re looking at is using Duet Fonts package.
• For concrete full page code examples see templates.

Troubleshooting #

If you experience any issues while getting set up with Duet Fonts, please head over to the Support page for more guidelines and help.