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
xl 26px 28px
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.

The Design System provides 2 body copy styles, one standard with 1.5REM line spacing and one condensed with 1.25REM line spacing. The default line spacing is used for larger bodies of copy, for easier readability. The condensed line spacing is used for smaller content bodies optimised for scanning. 

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: 30px;
token: lg


H4

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


H5 & H6

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


Body

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


Body condensed

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


Small text

font-family: Montserrat, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 17px;
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: 22.5px;
token: md


H5 & H6

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


Body

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


Body Condensed

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


Small text

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


 

 

Last updated