To see a list of all typography styles and their values please check the Overview tab.
Android
View
For most usages you should use BpkText as that applies all typography properties correctly. However if this is not possible - for example if you need to style an existing material component that doesn't exist in Backpack - Typography tokens are defined as text appearance resources in the format of bpkText{style}.
For example to use Label1 as a text appearance use @style/bpkTextLabel1 in xml or R.style.bpkTextLabel1 in code.
Compose
In most cases you should use BpkText, but you can also access the text style directly where needed. In both cases the text styles can be accessed BpkTheme.
Typography styles in Compose are defined in BpkTypography. The naming of typography tokens follows camel case.
For example to use BodyDefault as a text style it via BpkTheme.typography.bodyDefault.
iOS
UIKit
For most usages you should use BPKLabel as that applies all typography properties correctly.
Typography tokens are defined as an Objective-C enum, BPKFontStyle. To use them however, create a UIFont, using the static helper method and pass the style you need on BPKFont.fontForFontStyle(.caption)
SwiftUI
For most usages you should use BPKText as that applies all typography properties correctly.
Typography tokens are defined as static vars on the BPKFontStyle struct, which contains the asociated UIFont, letterSpacing and lineHeight.
For example caption can be set like this BPKText("Hello", style: .caption)
Web
Text styles are available in the BpkText component in the @skyscanner/backpack-web npm package.
For example caption can be set like this
import React from 'react';
import BpkText, { TEXT_STYLES } from '@skyscanner/backpack-web/bpk-component-text';
export default () => (
<BpkText textStyle={TEXT_STYLES.caption}>Hello</BpkText>
)
It is also possible to use text styles in the form of Sass mixins. To use our typography Sass mixins, you can find them in Backpack package in bpk-mixins library.