Typography

Typeface

Open Sans is TPR’s default typeface. There are several fonts available in this typeface, but we only use three in Portals:

Open Sans Regular — used for body copy, hint/help text, overline subtitles

Open Sans Semibold — used for headings, set field labels, links, primary and secondary buttons, emphasis

Open Sans Bold — used for field labels, sum totals, “Start” button, emphasis

Case

Sentence case is TPR’s chosen font case. In sentence case, the first letter of the first word in a sentence is capitalised. Everything—even headings and titles—should be written in sentence case.

Headings

The default heading and page copy properties for desktop devices. Best practice dictates there should only be on Heading 1 (H1) per page.

Heading 4

font size: 16px • line height: 24px • font weight: 400

font size: 16px • line height: 24px • font weight: 400

The spectacle before us was indeed sublime.

Heading 4

font size: 16px • line height: 24px • font weight: 400

font size: 34px • line height: 40px

The spectacle before us was indeed sublime.

Heading 4

font size: 16px line height: 24px • font weight: 400

font size: 34px • line height: 40px

The spectacle before us was indeed sublime.

Heading 4

font size: 16px • line height: 24px • font weight: 400

font size: 34px • line height: 40px

The spectacle before us was indeed sublime.

Body

The colour of the main body copy is Eclipse (#3D3D3D), but it can be made White (#FFFFFF) where required (e.g. positive confirmation panels, buttons, etc.)

Paragraph (body)

font size: 16px • line height: 24px • font weight: 400

font size: 34px • line height: 40px