Breadcrumbs

Fonts and Typography

Primary web font: Lato

The semi-rounded details of the letters give Lato a feeling of warmth, while the strong structure provides stability and seriousness.

Styles

The following styles/weights are available for use.

Lato-regular (400)

Lato-regular-italic (400)

Lato-bold (700)

Lato-bold-italic (700)

Please do not use 'light (300)' as its difficult to read on some monitors.


Minimum size

While there is no official minimum font size for the web, it is generally agreed upon that 16px for body text is a good starting point. Of course, some text will be smaller, and headers will be larger, but for the main body text (like what you’re reading right now) is usually 16px.


Font colours

All typographical elements (i.e. headings, body copy, lists etc) have their colours assigned via a master style sheet to reflect the official university web brand and to adhere to web accessibility standards.

Please do not change or introduce additional colours.

If you have questions please contact [email protected]


Macrons

The Lato font supports the use of macron accented vowels:

Ā Ē Ī Ō Ū ā ē ī ō ū / Māori / Te Whare Wānanga o Waikato

please use them where appropriate - help can be found here


Secondary web font: Arial or Helvetica

In circumstances where the 'Lato' font is not available (e.g. HTML emails - Community, Official Circular etc), 'Arial or Helvetica' is the recommended choice. It is similar in appearance to Lato and is one of the few default typefaces present on almost all computers.

'This is an example of text using the Arial typeface'.

'This is an example of text using the Helvetica typeface'.


Banner display font

Barlow is a bold condensed font used for banner and widget headings (supports macrons). Example can be seen here.

Please do not use for other web content.

Variants: Medium, Medium Italic, Bold and Bold Italic.

BĀRLOW FONT

Icon Fonts

The University makes use of a number of icon fonts.  More information on those can be found on the Implementation > Working with Text > Icons web guide.  Our use of FontAwesome is licensed, so if you have a need and wish to use them please email [email protected] or log a web services kuhukuhu ticket requesting assistance.