Chalk
Chalk Type Ramp

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