Guidance
Good typography is essential in websites and applications because it affects readability and the overall user experience. Government of New Brunswick Design System typography styles and standards were designed to meet the following considerations:
- Legibility: Good typography ensures that text is easy to read. The fonts, font sizes, line spacing, and contrast used are designed to maximize the legibility of our websites and applications.
- Hierarchy: Typography helps to create a visual hierarchy of information. This can make it easier for users to scan and find the information they are looking for. Our heading styles were defined to help create a clear hierarchy that can be used guides the user's attention to the most important information and help them navigate more efficiently.
- Branding: Typography plays a significant role in branding by creating a unique visual identity for a website or application. Our typography communicates the tone, voice, and personality of the Government of New Brunswick brand.
- Accessibility: Good typography can make a website or application more accessible to people with visual impairments or reading difficulties. For example, using larger fonts and higher contrast can make it easier for users to read. Accessibility is a primary consideration in our typography styles and standards.
Font families
The Government of New Brunswick Design System uses DM Serif Text and Public Sans. These fonts are free and open source, making great typography accessible to everyone in the organization. You can use these fonts freely in your products and services.
DM Serif Text
DM Serif Text is used for display heading styles in hero banners,
and
occasional use in blockquotes. It must be used
sparingly, and for no more than one <h1> heading or blockquote at a time. We use
Regular 400 and Regular 400 italic.
Get the DM Serif Text font family
Public Sans
Public Sans must be used for all other headings and copy. It was designed for accessibility and is easy to read. We use Regular 400, Regular 400 italic, Medium 500, Medium 500 italic, Bold 700, and Bold 700 italic.
Get the Public Sans font family
Add the fonts using Google Fonts API
You can use the Google Fonts API to add fonts to your project. To embed the fonts copy this code into
the <head> of your HTML:
HTML
<!-- Google Web Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
Self-host the fonts
If you need to host your fonts locally, you can download our webfonts package to use in your project.
Heading styles and properties
The Government of New Brunswick Design System uses 5 heading levels: <h1> to
<h5>. The title of the page is an <h1>, and
<h2> to <h5> are sub-heading levels. We don’t recommend
nesting headings more than 4 levels deep (<h4>) as this can make a
page harder to read.
Do
- Use only one
<h1>heading per page. - Use
<h2>to<h5>headings to structure your content. - Structure your headings in the proper order. For example, use an
<h3>under an<h2>, and an<h4>under an<h3>. - If a smaller heading size is needed for aesthetic purposes, use the appropriate HTML
heading
level and adjust sizing with a heading
class (
.h3).
Don’t
- Use more than one
<h1>per page, or for anything other than the title of the page or application. - Use
<h6>headings. They're too small. - Skip a heading level in the HTML. For example, don’t put an
<h3>under an<h1>without an<h2>in between. - Apply colours or any text effects that are not inherited by default from a parent component.
Font sizes
Our typographic scale is designed mobile-first, and the base size is 1rem (16px). On tablets and larger screens, text size increases from the base size of 1rem (16px) to 1.125rem (18px) to improve readability and meet the needs of our users.
The headings within our typescale are responsive. The mobile heading scale is exactly 1 step smaller
than the tablet and larger screens scale. For example, an <h1> on mobile is 2rem
(32px). It is the same size as an <h2> heading on tablets and larger screens
which is also 2rem (32px).
| Style | Tag | Class | Properties |
|---|---|---|---|
Heading 1 |
<h1>
|
.h1
|
Font family: Public Sans Font size: 2rem (32px) / 3rem (48px) Font weight: 700 (bold) Line height: 1.25 (40px) / 1.25 (60px) Margin top: 4rem (64px) |
Heading 2 |
<h2>
|
.h2
|
Font family: Public Sans Font size: 1.5rem (24px) / 2rem (32px) Font weight: 700 (bold) Line height: 1.25 (30px) / 1.25 (40px) Margin top: 3rem (48px) |
Heading 3 |
<h3>
|
.h3
|
Font family: Public Sans Font size: 1.25rem (20px) / 1.5rem (24px) Font weight: 700 (bold) Line height: 1.25 (25px) / 1.25 (30px) Margin top: 2rem (32px) |
Heading 4 |
<h4>
|
.h4
|
Font family: Public Sans Font size: 1.125rem (18px) / 1.25rem (20px) Font weight: 700 (bold) Line height: 1.25 (22.5px) / 1.25 (25px) Margin top: 1.5rem (24px) |
Heading 5 |
<h5>
|
.h5
|
Font family: Public Sans Font size: 1rem (16px) / 1.125rem (18px) Font weight: 700 (bold) Line height: 1.25 (20px) / 1.25 (22.5px) Margin top: 1.5rem (24px) |
HTML
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
Display heading styles and properties
Display heading is a set classes that can be used with the <h1> HTML tag to
adjust
the sizing of page titles. In some instances, the default sizing of the <h1> that
appears in a hero banner component may be too large for the content. If this happens, there are
sizing
options available to best fit the context and content. Display heading sizes are responsive, and
fluid
on mobile.
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
| Style | Tag | Class | Properties |
|---|---|---|---|
Display 1 |
<h1>
|
.display-1
|
Font family: DM Serif Text |
Display 2 |
<h1>
|
.display-2
|
Font family: DM Serif Text |
Display 3 |
<h1>
|
.display-3
|
Font family: DM Serif Text Font size: 2rem (32px) / 2.5rem (40px) Font weight: 400 (regular) Line height: 1.25 (40px) / 1.25 (50px) Margin top: 2rem (32px) |
HTML
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h2>
Lead
The lead is a secondary line of text that appears below the <h1> heading in the
hero banner component. It provides a short introduction or summary
of
the most important information on the page. In the hero banner, lead styles are applied
automatically to
any <p> tag in the component. To use lead styles outside of the hero banner, you
will
need to apply the .lead class to the <p> tag in your HTML. Leads
should
only ever be used directly below a heading.
| Style | Tag | Class | Properties |
|---|---|---|---|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit placerat malesuada odio, nec finibus ex suscipit. |
<p>
|
.lead
|
Font family: Public Sans Font size: 1.25rem (20px) / 1.375rem (22px) Font weight: 400 (regular) Line height: 1.5 (30px) / 1.5 (33px) Margin top: 0rem (0px) Margin bottom: 1.5rem (24px) |
HTML
<p class="lead">
Lorem ipsum dolor sit amet, consectetur adipiscing elit placerat malesuada odio, nec finibus ex suscipit.
</p>
Paragraph
The paragraph tag <p> is a fundamental HTML element and is used to structure
and
format text.
| Style | Tag | Properties |
|---|---|---|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit placerat malesuada odio, nec finibus ex suscipit. |
<p>
|
Font family: Public Sans Font size: 1rem (16px) / 1.125rem (18px) Line height: 1.5 (24px) / 1.5 (27.5px) Font weight: 400 (regular) Margin top: 0rem (0px) Margin bottom: 1.5rem (24px) |
HTML
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit placerat malesuada odio, nec finibus ex suscipit.
</p>
Horizontal rule
The horizontal rule <hr /> is used to create a horizontal line or divider
between content.
HTML
<hr />
Small text
Small text <small> can be used for captions, footnotes and citing sources.
| Style | Tag | Properties |
|---|---|---|
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
<small>
|
Font size: 0.875rem (14px) |
HTML
<small>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</small>
Unordered list
An unordered list <ul> is used to list items in no particular order or sequence.
It is
used when you
want to display a collection of items, such as a list of bullet points.
- Lorem ipsum dolor
- Consectetur adipiscing
- Quisque eu ipsum fringilla
HTML
<ul>
<li>Lorem ipsum dolor</li>
<li>Consectetur adipiscing</li>
<li>Quisque eu ipsum fringilla</li>
</ul>
Helper classes
Helper classes are applied to <ul>. Use them to adjust the spacing below a list,
or
between list items.
| Class | Use when | Properties |
|---|---|---|
.list-sm
|
More space is required below a list to separate it from the next page element. |
Margin top: 1rem (16px) Margin bottom: 2rem (24px) |
.list-md
|
List items are long enough that they wrap and more space is needed to separate items from each other. |
Margin top: 1rem (16px) Margin bottom: 2rem (24px) List item spacing: 0.5rem (8px) |
.list-lg
|
List items span multiple lines or consist of paragraphs and more space is needed to separate items from each other. |
Margin top: 1rem (16px) Margin bottom: 2rem (24px) List item spacing: 1rem (16px) |
HTML
<ul class="list-lg">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed placerat malesuada odio, nec finibus ex suscipit a. </li>
<li>Cras vel odio euismod, accumsan massa eu, posuere purus. Donec in mollis dolor.</li>
<li>Cras in scelerisque elit, eu laoreet nisi. Aenean ut lectus et urna hendrerit blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </li>
</ul>
Ordered list
Ordered list <ol> is used to create a list of items that are ordered numerically.
- Lorem ipsum dolor
- Consectetur adipiscing
- Quisque eu ipsum fringilla
HTML
<ol>
<li>Lorem ipsum dolor</li>
<li>Consectetur adipiscing</li>
<li>Quisque eu ipsum fringilla</li>
</ol>
Font family tokens
You can implement font family design tokens into any additional CSS or SASS that you create to ensure consistency the design system.