When to use
- Use this component when adding any typography to a screen.
When not to use
Do not use this component:
- For writing lists, instead use the list component
- For writing headings, instead use the heading component
Availabile platforms
|
Platform |
Available |
|---|---|
|
Figma |
✓ |
|
Web (@ovotech/element) |
✓ |
|
App (@ovotech/element-native) |
✓ |
React Native
- As the OVOCircular font doesn't include an italic style, this will render as regular body text in react-native as devices don't emulate fonts as with web browsers.
- Creating these elements in react native is more trouble than it's worth, instead use the HTML entities for these characters: https://www.toptal.com/designers/htmlarrows/math/superscript-one/
How to use it
Font Sizes
The Element responsive font scale is designed to be divisible by 4 - with the exception of font size 14, which gives greater versatility. The standard line-height of 1.5, which can be calculated by multiplying the font size by 1.5. The exception to this is the heading 'display' style which has a 1.0 line-height.
The font sizes are slightly smaller for mobile, Always check the same colour contrast applies on mobile.
Spacing
Typography uses responsive margins, with 12px and 8px being the default sizes on small screens. Headings each have their own top margin, based on their size, to help the content read better. This also clarifies the content hierarchy. These spacings are factored into the components.
Figma
There are exceptions to the spacing rules as follows:
- To ensure that everything lines up, the margin from the top of the first typography component, and the margin bottom from the last have been removed.
- Headings that are immediately next to each other should use the default gap of 12px (or 8 on small screens) only.
Checking for accessibility
User stories
The following user stories can be used to understand when this component should be used, and how to know when it's been implemented correctly.
- As a screen reader user, I only want to be able to read through all the content in a meaningful order.
- As someone with a colour vision deficiency, I want to be able to perceive all the text.
Test steps
Use these steps to check that the Text component has been implemented correctly:
- Turn on a screen reader.
- Verify that all content is announced as expected, and that the reading order makes sense, aligning with the visual order.
Related components