Weâve designed a range of styles that simply work together. When it comes to typographic excellence, thereâs a few choices you can still make.
Paragraph spacing
No spacing
When constructing components with lots of text snippets, leaving the spacing at 0px may be preferable. Users aren't scanning entire paragraphs of text, so we can choose to show many text snippets in a relatively condensed format.
Please note; 0px still contains default spacing inherited by line-height. Trust the styles to do the right thing.
With spacing
When presenting larger bodies of text, it maybe be preferable to use our recommended paragraph spacing. This adds intentional white space after paragraph break. Users are scanning entire paragraphs of text so this helps with the reading experience.
Paragraph spacing is referred to as bottom margin in code. In code, we keep 0px bottom margins and let consumers set their own bottom margin.
How to set spacing
Automatically
đ§ Bpk Typesetting Block component has been created so you can set a Headline, Subheading, and Body style in Figma, and the correct spacing will be applied automatically. Add this to any component in any design and choose style options from the dropdown menu. This is limited to three style for ease of use.
Manually
If you want to set your own spacing, use the preferred bottom margin rules. You'll have to apply these with a Figma Auto Layout. Below illustrates the spacing visibly on, but this will be visibly off in your designs.
Hero styles
Headline styles
Body styles
Line length
There is a maximum amount of characters per line the human eye can comfortably read depending on font size and style. For Skyscanner Relative Book as body-default, 60 characters is a comfortable width so try not to exceed this limit.
Creative spacing
The space between perceived âsectionsâ isnât related to paragraph spacing. Here we might want to add breathing space into a page. Use spacing tokens to make these creative decisions.
- Use the styles as they are and trust theyâve been designed to work
- Use spacing tokens to divide sections
- Use Figma Auto Layout
- Use Text Primary and Text Secondary colours
- Don't create your own styles.
- Dont't add colour to text for no reason.
- Don't use typefaces other than Skyscanner Relative.