
Type Ramp
Every piece of text used in a Component, Pattern or Template is set to a specific map level in the type ramp. The text style contained within a map level can be defined differently for each given product, but the map level itself and its corresponding usage must stay consistent across all experiences. Each map level usage can be found on the spec sheet for a given component, but we have also provided high-level mapping groups within our type ramp as a reference when having conversations around type hierarchy.
A type ramp is used to build text hierarchy throughout an experience. We map all usages of text in our platform to a level in the type ramp to create a cohesive system between typography and components.
Type Ramp (Native & Web)
The Type Ramp is 11 styles and defined by weight, size, line height, letter spacing and usage.
| Map Level | Font Family + Weight | Size | Line Height | Letter Spacing | Decoration | Rich Text | Usage |
|---|---|---|---|---|---|---|---|
| Large Title | Kanit + Semibold | 34/2.125 rem | 41 | auto | Sentence case | N/A | Large Title Log In Screen Promo Info |
| Title 1 | Kanit + Regular | 28/1.75 rem | 34 | auto | Sentence case | N/A | Title 1 TBD |
| Title 2 | Kanit + Regular | 22/1.375 rem | 28 | auto | Sentence case | N/A | Title 2 TBD |
| Title 3 | Kanit + Regular | 20/1.25 rem | 25 | auto | Sentence case | N/A | Title 3 Card Headlines Game Titles+ Card Footer |
| Headline | Kanit + Semibold | 17 | 22 | auto | Sentence case | N/A | Headline Header Titles Card Headlines Game Titles + Inline View Wallet $100 Total |
| Body | Poppins + Regular | 17 | 21 | auto | Sentence case | N/A | Body Body Copy Large Button Text |
| Callout | Poppins + Regular | 16 | 21 | auto | Sentence case | N/A | Callout TBD |
| Subhead | Kanit + Medium | 14 | 20 | auto | Sentence case | N/A | Subhead Team Names Scores Six Pack Betting Lines Betslip Title Banner Text Marque Text |
| Footnote | Poppins + Regular | 13 | 18 | auto | Sentence case | N/A | Footnote Button Text Title + Content Card Inset |
| Caption 1 | Poppins + Regular | 12 | 16 | auto | Sentence case | N/A | Caption 1 Metadata Score Data Team Records Data + Time Over/Under Game Title + Tile View |
| Caption 2 | Poppins + Regular | 11 | 13 | auto | Sentence case | N/A | Caption 2 Small Data metadata Legal Text + Footer |
| xSmall | Poppins + Regular | 9 | 13 | auto | Sentence case | N/A | xSmall Bonus Button Button Sublabel State Name in Header |
| Navigation | Kanit + Regular | 17 | 22 | auto | Sentence case | N/A | Navigation Navigation |