🔹 Needed for NSW Government Branding
Documentation and examples for typography, including font, headings, body text, lists, and more.
NSW Government uses Public Sans font for all digital products and services to create a distinct but consistent look and feel. Public Sans is the only font to be used for headings and body copy. It is a free font that is available from Google Fonts.
As Public Sans is a custom font it's recommended to use Web Safe Font as a fallback when declaring your font stack. The preferred fallback font for the NSW Design System is Arial.
body {font-family: 'Public Sans', Arial, sans-serif;}
In the NSW Design system there are different standard sizes for the headings for large screens and smaller screens.
| Style | Properties |
|---|---|
Heading 1 |
Font size: 2.25rem (36px) / 3rem (48px) |
Heading 2 |
Font size: 1.75rem (28px) / 2rem (32px) |
Heading 3 |
Font size: 1.375rem (22px) / 1.5rem (24px) |
Heading 4 |
Font size: 1.125rem (18px) / 1.25rem (20px) |
Heading 5 |
Font size: 1rem (16px) / 1rem (16px) |
|
Intro text |
Font size: 1.125rem (18px) / 1.25rem (20px) |
|
Body Text |
Font size: 1rem (16px) / 1rem (16px) |
|
Small text |
Font size: 0.875rem (14px) / 0.875rem (14px) |
Maecenas at risus ullamcorper odio facilisis ultrices et et metus.
<p>
Maecenas at risus ullamcorper odio facilisis <a href="#">ultrices et</a> et metus.
</p>
<p>
<a class="nsw-link nsw-link--icon" href="#">
<span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">file_download</span>
<span>Download PDF schedule (PDF, 123.45 KB)</span>
</a>
</p>
“Our upcoming plans for scaling the NSW Design System are addressing friction points our users are facing when delivering digital products and services. Watch this space, there’s more to come.” The Design System Team
<blockquote>
“Our upcoming plans for scaling the NSW Design System are addressing friction points our users are facing when delivering digital products and services. Watch this space, there’s more to come.”
<cite>The Design System Team</cite>
</blockquote>
<ul>
<li>Understanding user needs</li>
<li>Conducting user interviews</li>
<li>Empathy Mapping</li>
<li>Persona creation</li>
<li>Customer journey mapping</li>
</ul>
<ol>
<li>Pre-discovery</li>
<li>Discovery</li>
<li>Alpha</li>
<li>Beta</li>
<li>Live</li>
</ol>
<dl>
<dt>Website:</dt>
<dd><a href="https://www.nsw.gov.au" target="_blank">https://www.nsw.gov.au</a></dd>
<dt>Street Address:</dt>
<dd>2-24 Rawson Place</dd>
<dd>Haymarket NSW 2000</dd>
<dt>Phone:</dt>
<dd>1300 300 300</dd>
</dl>