Typography
The Text component allows for the ability to write content with a consistent typographic scale. It supports different font sizes and variants to suit various use cases, for more information on when to use each visit our Text Usage section.
Headline Display 1Headline Display 2Headline Display 3Headline Display 4Headline Display 5Display 1Display 2Display 3Display 4Display 5Display 6Display 7Body LargeBodyBody SmallLegal
Usage
import { typography } from '@sky-uk/ui-core'${typography('body')}// returns{fontSize: '18px',lineHeight: '28px'},
Default Typography
The default typography styles use the Sky Text font family.
${typography('display-1')}${typography('display-1', 'default')}
Available Sizes
| Name | fontSize | lineHeight |
|---|---|---|
| display-1 | 80px | 104px |
| display-2 | 64px | 84px |
| display-3 | 48px | 64px |
| display-4 | 40px | 52px |
| display-5 | 28px | 40px |
| display-6 | 20px | 24px |
| display-7 | 16px | 20px |
| body-lg | 20px | 32px |
| body | 18px | 28px |
| body-sm | 16px | 24px |
| legal | 14px | 24px |
display-6 and display-7 are primarily intended for single line headings in smaller components such as cards where a tighter line height is beneficial.
Headline Typography
The headline typography styles use the Sky Headline font family using the second parameter to headline.
${typography('display-1', 'headline')}
Available Sizes
| Name | fontSize | lineHeight |
|---|---|---|
| display-1 | 56px | 64px |
| display-2 | 44px | 52px |
| display-3 | 32px | 40px |
| display-4 | 28px | 36px |
| display-5 | 24px | 28px |