Native Text Combinations

Search…

Text combinations involve stacked text styles. These are built with hierarchy and legibility in mind.

Types of Text Combinations
​1. Content Header​
​2. UI Header​
​3. Content Subheader​
​4. Picker Text​
Content Header
Content Header lockups are typically used at the top of a page. Can be found in booking flows, general content pages.
a-text-h3:
font-weight: bold
font-size: 20px
font-color: text-black
padding-bottom: 8px
​
a-text-paragraph
font-weight: book
font-size: 16px
font-color: slate-dark
line-height: 1.5
UI Header
UI Header lockups are typically used in modals and half sheets.
a-text-h2:
font-weight: bold
font-size: 20px
font-color: text-black
padding-bottom (halfsheets): 16px
padding-bottom (modals): 24px
​
a-text-paragraph:
font-weight: book
font-size: 16px
font-color: slate-dark
line-height: 1.5
Content Subheader
Content subheader lockups are used in content pages that need further separation/hierarchy. 
a-text-h4:
font-weight: bold
font-size: 16px
font-color: text-black
padding-bottom: 8px
​
a-text-paragraph:
font-weight: book
font-size: 16px
font-color: text-black
line-height: 1.5
Picker Text
Picker Text lockups are used in radio or checkbox pickers.
a-text-paragraph:
font-weight: book
font-size: 16px
font-color: text-black
padding-bottom: 8px
​
a-text-paragraph-slate-dark:
font-weight: book
font-size: 16px
font-color: slate-dark

Typography - Native

Web

Last modified 3yr ago

Copy link

Outline

Types of Text Combinations