Typography
Most of the information that is present in a user interface for the purpose of passing information across is represented via typography. Correct typography structure and appropriate application is important in all interfaces.
The different fonts are referenced using unique token names to achieve uniform application of the texts in different use cases across multiple platforms. These tokens, just like the color, are split into primitive and semantic categories.
Primitive Category
This category refers to the seven sizes that were chosen as typesets from the major third ratio. They form the foundation for all the other fonts generated and used across the typography system. Since these tokens lack complete styling however, they are should not be used directly in designs and as such do not have any roles ascribed to them. However, if a new role emerges and the need for a new token arises, these typesets, serve as the reference size for any new font to be created.
| Token | Size | Line Height | Preview |
|---|---|---|---|
| 64px/4rem | 80px/5rem | Aa | |
| 52px/3.25rem | 64px/4rem | Aa | |
| 32px/2rem | 40px/2.5rem | Aa | |
| 24px/1.5rem | 36px/2.25rem | Aa | |
| 16px/1rem | 28px/1.75rem | Aa | |
| 14px/0.875rem | 24px/1.5rem | Aa | |
| 12px/0.75rem | 16px/1rem | Aa |
Semantic Category
The fonts in this category have specifications that make them suitable for certain use cases either across all platforms or in any given platform.
| Token | Desktop | Preview | Mobile | Preview |
|---|---|---|---|---|
| Typeface: Qanelas Soft Size: 52px / 3.25rem Line Height: 64px / 4rem Weight: Bold / 700 Category: Heading Case Style: Sentence case | Aa | Typeface: Qanelas Soft Size: 32px / 2rem Line Height: 40px / 2.5rem Weight: Bold / 700 Category: Heading Case Style: Sentence case | Aa | |
| Typeface: Qanelas Soft Size: 32px / 2rem Line Height: 40px / 2.5rem Weight: Medium / 500 Category: Sub-heading Case Style: Title case | Aa | Typeface: Qanelas Soft Size: 24px / 1.5rem Line Height: 36px / 2.25rem Weight: Medium / 500 Category: Sub-heading Case Style: Title case | Aa | |
| Typeface: Qanelas Soft Size: 24px / 1.5rem Line Height: 36px / 2.25rem Weight: Medium / 500 Category: Sub-heading Case Style: Title case | Aa | Typeface: Qanelas Soft Size: 16px / 1rem Line Height: 28px / 1.75rem Weight: Bold / 700 Category: Sub-heading Case Style: Sentence case | Aa | |
| Typeface: Open Sans Size: 16px / 1rem Line Height: 28px / 1.75rem Weight: Regular / 400 Category: Body Case Style: Sentence case | Aa | Typeface: Open Sans Size: 16px / 1rem Line Height: 28px / 1.75rem Weight: Regular / 400 Category: Body Case Style: Sentence case | Aa | |
| Typeface: Open Sans Size: 16px / 1rem Line Height: 28px / 1.75rem Weight: Semi-bold / 600 Category: Body Case Style: Sentence case | Aa | Typeface: Open Sans Size: 16px / 1rem Line Height: 28px / 1.75rem Weight: Semi-bold / 600 Category: Body Case Style: Sentence case | Aa | |
| Typeface: Open Sans Size: 14px / 0.875rem Line Height: 24px / 1.5rem Weight: Regular / 400 Category: Body Case Style: Sentence case | Aa | Typeface: Open Sans Size: 14px / 0.875rem Line Height: 24px / 1.5rem Weight: Regular / 400 Category: Body Case Style: Sentence case | Aa | |
| Typeface: Qanelas Soft Size: 12px / 0.75rem Line Height: 16px / 1rem Weight: Bold / 700 Category: Label Case Style: Sentence case | Aa | Typeface: Qanelas Soft Size: 12px / 0.75rem Line Height: 16px / 1rem Weight: Bold / 700 Category: Label Case Style: Sentence case | Aa | |
| Typeface: Open Sans Size: 12px / 0.75rem Line Height: 24px / 1.5rem Weight: Regular / 400 Category: Label Case Style: Sentence case | Aa | Typeface: Open Sans Size: 12px / 0.75rem Line Height: 24px / 1.5rem Weight: Regular / 400 Category: Label Case Style: Sentence case | Aa | |
| Typeface: Consolas Size: 12px / 0.75rem Line Height: 24px / 1.5rem Weight: Regular / 400 Category: Code Case Style: Sentence case | aa | Typeface: Consolas Size: 12px / 0.75rem Line Height: 24px / 1.5rem Weight: Regular / 400 Category: Code Case Style: Sentence case | aa | |
| Typeface: Consolas Size: 16px / 1rem Line Height: 28px / 1.75rem Weight: Regular / 400 Category: Code Case Style: Sentence case | aa | Typeface: Consolas Size: 16px / 1rem Line Height: 28px / 1.75rem Weight: Regular / 400 Category: Code Case Style: Sentence case | aa |
