Typography

On this page

 

Typeface

Montserrat is the only font to be used by agencies for NSW Government websites and online applications.  Major headings through to body copy must also use Montserrat. 

Montserrat is a free font and available from Google Fonts

System fonts

System fonts are rendered locally by your web browser, this provides greater speed when loading your content. The preferred system font is Arial

As a good rule of thumb, you should still refer to a system font as a fallback in your CSS font stack:

body {font-family: Montserrat, Arial, sans-serif; }

Type hierarchy

The NSW Design System has the following size tokens:

Token Small screens
(< 992px)
Large screens
(≥ 992px)
xxxl 36px 48px
xxl 28px 32px
lg 22px 24px
md 18px 20px
sm 16px 16px
xs 14px 14px

Headings are used to create a clear visual hierarchy, to facilitate finding information on the page. There are different standard sizes for the headings for large screens and smaller screens.

Large screens ≥ 992px

H1

font-family: Montserrat, Arial, sans-serif;
font-size: 48px;
font-weight: 600;
line-height: 60px;
token: xxxl


H2

font-family: Montserrat, Arial, sans-serif;
font-size: 32px;
font-weight: 600;
line-height: 40px;
token: xxl


H3

font-family: Montserrat, Arial, sans-serif;
font-size: 24px;
font-weight: 600;
line-height: 32px;
token: lg


H4

font-family: Montserrat, Arial, sans-serif;
font-size: 20px;
font-weight: 600;
line-height: 28px;
token: md


H5 & H6

font-family: Montserrat, Arial, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
token: sm


Intro text

font-family: Montserrat, Arial, sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 28px;
token: md


Body 

font-family: Montserrat, Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
token: sm


Small text

font-family: Montserrat, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 19px;
token: xs


 

 

Small screens < 992px

H1

font-family: Montserrat, Arial, sans-serif;
font-size: 36px;
font-weight: 600;
line-height: 45px;
token: xxxl


H2

font-family: Montserrat, Arial, sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 35px;
token: xxl


H3

font-family: Montserrat, Arial, sans-serif;
font-size: 22px;
font-weight: 600;
line-height: 27.5px;
token: lg


H4

font-family: Montserrat, Arial, sans-serif;
font-size: 18px;
font-weight: 600;
line-height: 24px;
token: md


H5 & H6

font-family: Montserrat, Arial, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
token: sm


Intro text

font-family: Montserrat, Arial, sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 24px;
token: md


Body

font-family: Montserrat, Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
token: sm


Small text

font-family: Montserrat, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 19px;
token: xs


 

 

Last updated