Typography

Typeface

Noto Sans is the primary typeface used across the design system for headings, paragraphs, and text elements. Noto Sans was selected as an open-source, web-friendly alternative to Calibri, which is the primary typeface in the Government of Northwest Territory Visual Identity Program. 

To support text in Indigenous languages, Noto Sans Canadian Aboriginal is also included in the design system. 

Both fonts are available to download for free from Google Fonts using the links below:

Headings

Headings provide structure, clarity, and hierarchy to content. They help readers scan a page quickly and assistive technologies like screen readers interpret the order and importance of information. Use heading levels consistently to guide users through content and maintain accessibility.

Do

  • Use headings in a logical order (e.g., start with <h2> under the page title, then <h3> inside those sections). Using heading styles as classes maintains the correct heading structure while using a different visual style as needed.
  • Keep heading text clear, concise, and descriptive.
  • Pair headings with supporting paragraphs for context.
  • Use headings to guide scanning and improve accessibility for screen readers.

Don’t

  • Skip heading levels (e.g., jumping from <h2> to <h4>).
  • Use headings only for visual styling instead of structure.
  • Overuse headings by breaking content into unnecessary fragments.
  • Duplicate headings with the same text on the same page unless they introduce distinct content.

Heading Scale

Headings establish a clear visual hierarchy and ensure content is easy to scan across devices. This scale defines consistent sizes, weights, and line heights for headings from <h1> through <h5>. Desktop and mobile sizes are optimized for readability, while maintaining a unified rhythm and proportion across the design system.

Heading Visual example Desktop font-size Mobile font-size Line height Font weight
h1

XLarge Heading

44px 28px 1.35 700
h2

Large Heading

34px 24px 1.35 700
h3

Medium Heading

30px 22px 1.35 700
h4

Small Heading

26px 20px 1.35 700
h5
XSmall Heading
20px 18px 1.35 700

Headings in Context

This example demonstrates how headings and body text work together to create a clear content hierarchy. Each heading level introduces progressively more detailed information, helping readers scan and understand the structure of the page at a glance.

Government of the Northwest Territories Services

The Government of the Northwest Territories provides essential services to residents across our vast territory. From healthcare and education to infrastructure and economic development, we work to improve the quality of life for all Northerners while preserving our unique culture and environment.

Health and Social Services

Our healthcare system ensures that all residents have access to quality medical care, regardless of where they live in the territory. We operate hospitals, health centres, and community clinics across the NWT, providing everything from emergency care to specialized treatments and mental health support services.

Primary Healthcare Programs

Community health centres serve as the foundation of healthcare delivery in smaller communities. These facilities provide routine medical care, preventive services, and health education programs tailored to the specific needs of each community, including culturally appropriate care for Indigenous populations.

Telehealth Services

Given the vast distances between communities, telehealth technology plays a crucial role in delivering specialized medical consultations and diagnostic services. This innovative approach allows residents in remote areas to access expert medical advice without the need for costly and time-consuming travel to larger centres.

Community Wellness Initiatives

Local wellness programs focus on prevention and health promotion, working with community leaders and traditional healers to develop culturally relevant health education and disease prevention strategies that respect traditional knowledge and practices.

Open example in a new tab

Heading Styles Using Classes

Sometimes it’s necessary to separate visual appearance from semantic structure. Heading utility classes (e.g., .h2, .h5, etc.) allow elements to adopt the visual style of a heading level without changing the document outline. This ensures headings remain accessible and semantically correct, while maintaining consistent visual design across components where style and hierarchy may differ.

GNWT Service Directory

The Government of the Northwest Territories offers a wide range of services across multiple departments. Below are two key service areas that residents frequently access for support with health, education, and employment needs throughout the territory.

Health and Social Services

This section uses an h3 element with .h5 styling to create visual balance in our service grid. Access healthcare programs, mental health support, and social assistance services available to NWT residents across all communities.

Education, Culture and Employment

Find information about K-12 education, post-secondary funding, skills training programs, and employment services. This heading maintains semantic hierarchy while matching the visual design of adjacent service categories.

Open example in a new tab

Paragraph Styles

Paragraph styles in a design system are predefined text formats that set font size, line height, and spacing for different kinds of paragraphs so content looks consistent and readable across the site; we use them to establish visual hierarchy, improve scannability, and make it faster for content editors to publish without guessing styles.

There are three paragraph styles:

  • Large paragraph for lead or opening paragraphs that need to stand out.
  • Medium paragraph, the default paragraph text style, is used for main body copy and most content.
  • Small paragraph for image captions, metadata, and fine-print—each tuned for accessibility and responsive reading on different devices.

All paragraph text styles use a line height of 1.5, providing comfortable vertical spacing that reduces visual crowding, helps readers track between lines, and improves overall readability and comprehension across devices.

Style Visual Example Desktop Font Size Mobile Font Size CSS Class
Large Paragraph

This is an example of large paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 24px 18px lead
Medium Paragraph (Default)

This is an example of medium paragraph (default) text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 16px 16px fs-base
Small Paragraph

This is an example of small paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 14px 14px small
Updated: Dec 02, 2025