Text is used for inline text elements.
An example of body text.
An example of emphasis
An example of strong text.
An example with emphasis.
An example with line through.
A example of small text.
An example with superscript1 and subscript2.
Open sans doesn't support super and subscript in Figma, the way around this is to use the 'smaller' font sizes and place them as an overlay on the text where you need them.
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/ (opens in new window)
The Nebula 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.
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.
In Figma use separate heading components which include the correct margin. For paragraph styles, use the "Text" tool directly and then apply the correct paragraph style: the correct spacing will appear once you press enter.
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.
Figma and Native
some of these exceptions will need to be handled separately
In React Native, we don't have the luxury of collapsing margins or the :first-child and :last-child selectors we do on web. This means that the margins need to be manually adjusted. To help with this we have the React Native only TextGroup component.