Text
Text is used for inline text elements.
Usage
In Figma open sans doesn't support super and subscript, the way around this is to use the 'smaller' font sizes and place them as an overlay on the text where you need them.
Font Sizes
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.
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.
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.
In Figma some of these exceptions will need to be handled separately