Overview

Type formats change the look of your text. Type formats and styles can be used to enhance the style of your website and highlight important information or headings for site users.

Feature showcase

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

Accessibility tip: correct use of headings is especially important for assistive technology users: accessibility.sa.gov.au/your-role/content/headings

Lato

Lato is a sans serif typeface family started in the summer of 2010 by Warsaw-based designer Ɓukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the Open Font License by his foundry tyPoland, with support from Google.

https://fonts.google.com/specimen/Lato

Code presentation

Exo 2

Exo 2 is a complete redrawing of Exo, a contemporary geometric sans serif typeface that tries to convey a technological/futuristic feeling while keeping an elegant design. Exo is a very versatile font, so it has 9 weights (the maximum on the web) and each with a true italic version. Exo 2 has a more organic look that will perform much better at small text sizes and in long texts.

https://fonts.google.com/specimen/Exo+2

Font Awesome

Font Awesome is a font and icon toolkit based on CSS and LESS. It was made by Dave Gandy for use with Twitter Bootstrap, and later was incorporated into the BootstrapCDN. Font Awesome has a 20% market share among those websites which use third-party Font Scripts on their platform, ranking it second place after Google Fonts.

Version 4.5.0

https://fontawesome.com/

Reference for iconography https://fontawesome.com/cheatsheet

Top accessibility tip

Website Design System typography is designed so all users benefit from content that's easy to read and comprehend:
accessibility.sa.gov.au/your-role/visual-design/typography

This is blockquote text. It has a fixed width and fixed line height. Cras dapibus tincidunt dapibus. Phasellus placerat quis enim euismod euismod. Morbi dui mi, aliquam non lacus ut, feugiat facilisis metus. Cras ac convallis massa, eu lobortis lacus. Cras accumsan nisl sed orci porta rhoncus. Etiam pretium erat lorem, quis imperdiet sem laoreet eget. Donec nisl neque, ullamcorper id felis vel, lobortis lobortis ante.

Unordered lists

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus tincidunt dapibus. Phasellus placerat quis enim euismod euismod. Morbi dui mi, aliquam non lacus ut, feugiat facilisis metus.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus tincidunt dapibus. Phasellus placerat quis enim euismod euismod. Morbi dui mi, aliquam non lacus ut, feugiat facilisis metus.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus tincidunt dapibus. Phasellus placerat quis enim euismod euismod. Morbi dui mi, aliquam non lacus ut, feugiat facilisis metus.

Unordered nested lists

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus tincidunt dapibus. Phasellus placerat quis enim euismod euismod. Morbi dui mi, aliquam non lacus ut, feugiat facilisis metus.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus tincidunt dapibus. Phasellus placerat quis enim euismod euismod. Morbi dui mi, aliquam non lacus ut, feugiat facilisis metus.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus tincidunt dapibus. Phasellus placerat quis enim euismod euismod. Morbi dui mi, aliquam non lacus ut, feugiat facilisis metus.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus tincidunt dapibus. Phasellus placerat quis enim euismod euismod. Morbi dui mi, aliquam non lacus ut, feugiat facilisis metus.
      • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus tincidunt dapibus. Phasellus placerat quis enim euismod euismod. Morbi dui mi, aliquam non lacus ut, feugiat facilisis metus.
      • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus tincidunt dapibus. Phasellus placerat quis enim euismod euismod. Morbi dui mi, aliquam non lacus ut, feugiat facilisis metus.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus tincidunt dapibus. Phasellus placerat quis enim euismod euismod. Morbi dui mi, aliquam non lacus ut, feugiat facilisis metus.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus tincidunt dapibus. Phasellus placerat quis enim euismod euismod. Morbi dui mi, aliquam non lacus ut, feugiat facilisis metus.

Ordered lists

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus tincidunt dapibus. Phasellus placerat quis enim euismod euismod. Morbi dui mi, aliquam non lacus ut, feugiat facilisis metus.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus tincidunt dapibus. Phasellus placerat quis enim euismod euismod. Morbi dui mi, aliquam non lacus ut, feugiat facilisis metus.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus tincidunt dapibus. Phasellus placerat quis enim euismod euismod. Morbi dui mi, aliquam non lacus ut, feugiat facilisis metus.

Nested ordered lists

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus tincidunt dapibus. Phasellus placerat quis enim euismod euismod. Morbi dui mi, aliquam non lacus ut, feugiat facilisis metus.
    1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus tincidunt dapibus. Phasellus placerat quis enim euismod euismod. Morbi dui mi, aliquam non lacus ut, feugiat facilisis metus.
    2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus tincidunt dapibus. Phasellus placerat quis enim euismod euismod. Morbi dui mi, aliquam non lacus ut, feugiat facilisis metus.
      1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus tincidunt dapibus. Phasellus placerat quis enim euismod euismod. Morbi dui mi, aliquam non lacus ut, feugiat facilisis metus.
        1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus tincidunt dapibus. Phasellus placerat quis enim euismod euismod. Morbi dui mi, aliquam non lacus ut, feugiat facilisis metus.
        2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus tincidunt dapibus. Phasellus placerat quis enim euismod euismod. Morbi dui mi, aliquam non lacus ut, feugiat facilisis metus.
        3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus tincidunt dapibus. Phasellus placerat quis enim euismod euismod. Morbi dui mi, aliquam non lacus ut, feugiat facilisis metus.
        4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus tincidunt dapibus. Phasellus placerat quis enim euismod euismod. Morbi dui mi, aliquam non lacus ut, feugiat facilisis metus.
      2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus tincidunt dapibus. Phasellus placerat quis enim euismod euismod. Morbi dui mi, aliquam non lacus ut, feugiat facilisis metus.
      3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus tincidunt dapibus. Phasellus placerat quis enim euismod euismod. Morbi dui mi, aliquam non lacus ut, feugiat facilisis metus.
    3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus tincidunt dapibus. Phasellus placerat quis enim euismod euismod. Morbi dui mi, aliquam non lacus ut, feugiat facilisis metus.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus tincidunt dapibus. Phasellus placerat quis enim euismod euismod. Morbi dui mi, aliquam non lacus ut, feugiat facilisis metus.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus tincidunt dapibus. Phasellus placerat quis enim euismod euismod. Morbi dui mi, aliquam non lacus ut, feugiat facilisis metus.

Bold

This a bold word in text.

Italics

This word is italicised.

Subscript

The following words are in subscript and can be used anywhere in the site. They are good for us in algebraic expressions etc. eg. X2 + X3.

Superscript

The following words are in superscript and can be used anywhere in the site.They are good for us in algebraic expressions etc. eg. X2 + X3

Strikethrough

The following text is no longer valid .

<html>
   <head>
     <title>PHP Test</title>
   </head>
 <body>
   <p>Hello World</p>
 </body>
</html>

OneTwoThree
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 17,345 17,345
Cras dapibus tincidunt dapibus. Phasellus placerat quis enim euismod euismod. 17,345 17,345
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 17,345 17,345
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 17,345 17,345
Example: a vessel with no flybridge with a length of 5.5 metres and a breadth of
2
metres has a maximum capacity of six adults.
Length (m) 33.544.555.5678910
Breadth (m)           
1 2 3 3         
1.5 3 3 4 4 5 5 6     
2   4 5 5 6 6 7 8 10 11
2.5     6 7 7 8 9 11 12
3       8 9 10 12 13
3.5         11 13 14
4         12 14 15
4.5                       16

Accessibility tip: remember to always format your content so you can scan it without having to pause for long passages. 
accessibility.sa.gov.au/your-role/content/scannable-content

Success - status--success

Warning - status--warning

Error - status--error

Info - status--info

Using type formats and styles on your site

This WDS feature does not have a how-to guide, if you need support with this feature please contact the WDS Helpdesk.

Top accessibility tip

Website Design System type formats and styles is designed so all users benefit from content that's easy to read and comprehend:
accessibility.sa.gov.au/your-role/visual-design/typography