Headings
On the web, these can be used to style headings, usually <h> tags and <legends>
In React Native, the <Heading> component controls the size and level of this typography.
Heading SM
Use for headings
Heading XL
Use for headings
Heading 2XL
Use for headings
Heading 3XL
Use for headings
Heading 4XL
Use for headings
Heading 6XL
Large H2, Small H1
Heading 7XL
Use for headings
Subheading
The same applications as in the heading, but use a lighter font weight. This style should never be applied to main page titles.
Subheading 8XL
Use for sub-headings
Subheading 7XL
Use for sub-headings
Subheading 6XL
Use for sub-headings
Subheading 5XL
Use for sub-headings
Subheading 4XL
Use for sub-headings
Subheading 3XL
Use for sub-headings
Subheading 2XL
Use for sub-headings
Subheading XL
Use for sub-headings
Subheading LG
Use for sub-headings
Subheading MD
Use for sub-headings
Subheading SM
Use for sub-headings
Body & Strong
These styles can be used as required for text in body copy, applications and supporting information.
Strong 8XL
Use for bold copy
Strong 7XL
Use for bold copy
Strong 6XL
Use for bold copy
Strong 5XL
Use for bold copy
Strong 4XL
Use for bold copy
Strong 2XL
Use for bold copy
Strong XL
Use for bold copy
Strong 3XL
Use for bold copy
Strong LG
Use for bold copy
Strong MD
Use for bold copy
Strong SM
Use for bold copy
Default
Heading
Colours for headings
Subheading
Colours for Sub-headings
Invert
Heading
Default Heading Styles
Strong
Darker than body text
Subtle
Lighter than body text
Subheading
Default subheading styles