Typography
Component status
| Status | |
|---|---|
| Is the design finished and component available in Figma library? | Update required |
| Is the design documentation complete? | Update required |
| Is the technical documentation complete? | N/A |
Typography is one of the more important aspects of the user experience, as it helps to create a sense of hierarchy and structure within the content.
Base font
The base font for the platform is Inter, which will fall back to the system sans-serif font if it is not available.
Font sizing
We don't set a base font size for our typography, as this will vary depending on the viewport size and the user's preferences - for example, a user with visual impairments may prefer a larger font size.
Instead, we use a set of relative font sizes that are calculated based on the viewport size. The font sizes are defined using the rem unit, which is relative to the root font size of the user's browser.
Body text
Body text is the primary text on the page, and should be used for all content that is not part of a heading or a subheading.
Links
If a clickable element is used to navigate to another page, or an external resource, then generally it should be a link, marked up using the <a> element. Links should always have descriptive text that clearly states what the link is for - avoid usiung generic phrases such as "click here" or "read more" as these are not very helpful to users.
This is an example of an inline link: Go to your account.
For elements that should be styled as buttons, but function as links, you can use the .button class, as well as the appropriate data-theme attribute to style a link as a button:
Headings
Headings are used to structure the content of the page - all pages should have only one main heading, and then subheadings should be used for any sections of content within that page.
Headings should be used to create a hierarchy of information, and should be used in a way that makes it clear what the content is about.
Text sizes and styles
| Heading level | Example | HTML tag or CSS class |
|---|---|---|
| Display | The quick brown fox jumps over the lazy dog |
h1,
.display
|
| Heading 1 | The quick brown fox jumps over the lazy dog |
h2,
.heading-1
|
| Heading 2 | The quick brown fox jumps over the lazy dog |
h3,
.heading-2
|
| Heading 3 | The quick brown fox jumps over the lazy dog |
h4,
.heading-3
|
| Body | The quick brown fox jumps over the lazy dog |
p,
.body
|
| Small | The quick brown fox jumps over the lazy dog |
.small
|
Accessibility considerations
Headings are structural elements, and should be used in a way that makes it clear what the content is about. They should not be used for styling purposes, such as changing the font size or weight - instead, use the appropriate CSS classes to achieve the desired styling. This is important for users of assistive technologies, such as screen readers, who rely on the heading structure to understand and navigate the page.
Each page should only have one main heading. The headings should then be used hierarchically to structure the content of the page. There should be no mixing of heading levels within a page - for example, a page should not have an <h3> before an <h2>, or an <h2> before an <h1>.