Typography tokens define the font families, sizes, weights, and line heights in our type system.
Use the Text component
Always use the Text component for product typography,
rather than applying font tokens directly. Its named variants keep font family, size, weight, and
line height consistent.
Choose the visual style with variant and the semantic HTML element independently with as.
import {Text} from '@pleo-io/telescope'
<Text as="h2" variant="heading-m">Payment details</Text>
<Text as="p" variant="body-m">Add the details for your payment.</Text>See the Text guidelines for available variants and usage, and the Text API reference for component props.
Font family
| Token | Value |
|---|---|
fontBody | 'Pleo Scandi Gellix Text', Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif |
fontHeading | 'Pleo Scandi Gellix Headline', Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif |
fontBodyItalics | 'Pleo Scandi Gellix Text', Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif |
fontHeadingItalics | 'Pleo Scandi Gellix Headline', Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif |
Font size
| Token | Value |
|---|---|
fontSizeBaseline10x | 20px |
fontSizeBaseline13x | 26px |
fontSizeBaseline15x | 30px |
fontSizeBaseline16x | 32px |
fontSizeBaseline18x | 36px |
fontSizeBaseline21x | 42px |
fontSizeBaseline22x | 44px |
fontSizeBaseline25x | 50px |
fontSizeBaseline29x | 58px |
fontSizeBaseline39x | 78px |
fontSizeBaseline7x | 14px |
fontSizeBaseline8x | 16px |
Font weight
Font weight tokens have no effect on the main application font. Use the Text component's named
variants to apply the intended typography.
| Token | Value |
|---|---|
fontWeightRegular | 400 |
fontWeightMedium | 500 |
fontWeightSemibold | 600 |
fontWeightBold | 700 |
Line height
| Token | Value |
|---|---|
lineHeight18 | 18px |
lineHeight182 | 18.2px |
lineHeight19 | 19px |
lineHeight192 | 19.2px |
lineHeight24 | 24px |
lineHeight31 | 31px |
lineHeight312 | 31.2px |
lineHeight36 | 36px |
lineHeight38 | 38px |
lineHeight4176 | 41.76px |
lineHeight4872 | 48.72px |
lineHeight51 | 51px |
lineHeight5104 | 51.04px |
lineHeight56 | 56px |
lineHeight67 | 67px |
lineHeight6728 | 67.28px |
lineHeight90 | 90px |
Didn't find what you were looking for?
Let us know in #team-design-systems or make a request.
Edit this page