Font families

The primary typeface is Noto sans,a highly legible geometric display font. It can be used in the weights shown below.

Noto sans is totally free font to use commercial purpose. Please contact the UX practice for more details on licensing implications. For applications that cannot support Noto sans, then Arial should be used instead.

Headings

• Use headings consistently to create a clear hierarchy.
• Use the headings semantically and the appropriate level.
• Write all headings in sentence case.

Paragraphs

The default paragraph font size is 0.875 rem, 14px on a standard setup.

Use the 'lead' class for a lead paragraph or smaller body copy to convey hierarchy in your page. For instance, an introductory paragraph can be used at the top of a page to summarise the content. Lead paragraphs use 1rem, 16px on a standard setup, and ideally should only be used once per page.

Use the 'small' class to make paragraph font size smaller at 0.75rem, 12px. Small text should be used footer links, copyright text etc.

Font weights and emphasis

Font weight override classes can be added to any other typographic class or element to change the font weight. For instance, bold can be used to emphasise particular words in a transaction. However, emphasis should be used sparingly. Overuse will make it difficult for users to know which parts of the content to pay the most attention to.

Use the strong tag for bold or the em tag for italics You can use the 'em' tag or the 'italic' class to emphasis the text in italic.