Typography
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