Type Mapping
General guidelines on how font sizing adjusts between different device breakpoints
Headlines & Body Copy
| Type | Mobile/Tablet equivalents | Usage Notes |
|---|---|---|
|
Type
Campaign Maximum Lorem Ipsum |
Mobile/Tablet equivalents
Campaign Small Lorem Ipsum |
Usage Notes
Titles for major home pages
|
|
Type
Campaign Extra Large Lorem Ipsum |
Mobile/Tablet equivalents
Campaign Small Lorem Ipsum |
Usage Notes
Titles for home pages, landing pages
|
|
Type
Campaign Large Lorem Ipsum |
Mobile/Tablet equivalents
Campaign Small Lorem Ipsum |
Usage Notes
Titles for landing pages
|
|
Type
Campaign Medium Lorem Ipsum |
Mobile/Tablet equivalents
Campaign Small Lorem Ipsum |
Usage Notes
Titles in heroes (tablet)
|
|
Type
Campaign Small Lorem Ipsum |
Mobile/Tablet equivalents
Campaign Extra Small Lorem Ipsum |
Usage Notes
Titles in heroes (mobile)
|
|
Type
Sans Maximum Lorem Ipsum |
Mobile/Tablet equivalents
Sans Extra Large Bold Lorem Ipsum |
Usage Notes
Not used
|
|
Type
Sans Largest Lorem Ipsum |
Mobile/Tablet equivalents
Sans Larger Bold Lorem Ipsum |
Usage Notes
Interior heroes (strip hero)
|
|
Type
Sans Largest Uppercase Lorem Ipsum |
Mobile/Tablet equivalents
Sans Larger Uppercase Lorem Ipsum |
Usage Notes
Interior heroes (strip hero). Common component titles, including text lock-up which is a base for several components (including the Pathway)
|
|
Type
Sans Extra Large Uppercase Lorem Ipsum |
Mobile/Tablet equivalents
Sans Larger Uppercase Lorem Ipsum |
Usage Notes
Titling in Banner Promo component. Used as an interstitial font between desktop and mobile
|
|
Type
Sans Extra Large Bold Lorem Ipsum |
Mobile/Tablet equivalents
Sans Large Lorem Ipsum |
Usage Notes
Larger card and smaller component titles. Modal title. Quote body text - Level 1 pages (full width)
|
|
Type
Sans Extra Large Lorem Ipsum |
Mobile/Tablet equivalents
Sans Larger Lorem Ipsum |
Usage Notes
|
|
Type
Sans Larger Bold Lorem Ipsum |
Mobile/Tablet equivalents
Sans Large Lorem Ipsum |
Usage Notes
Titles for subcomponents and smaller components including event cards, date strip, Inline quotes, feature quote, and Text pathway
|
|
Type
Sans Larger Lorem Ipsum |
Mobile/Tablet equivalents
Sans Medium Lorem Ipsum |
Usage Notes
Hero text blocks. Emphasized text areas (intro paragraph)
|
|
Type
Sans Large Lorem Ipsum |
Mobile/Tablet equivalents
Sans Large Lorem Ipsum |
Usage Notes
Alert, Banner promo, Titles in image captions, Carousel captions. Centered text lockup, Form labels, Buttons, Large CTA buttons, and Large chevron buttons
|
|
Type
Sans Medium Lorem Ipsum |
Mobile/Tablet equivalents
Sans Small Lorem Ipsum |
Usage Notes
Larger component body copy
|
|
Type
Sans Small Lorem Ipsum |
Mobile/Tablet equivalents
Sans Small Lorem Ipsum |
Usage Notes
Subcomponent text blocks (Standard Card, Listing Item). Accordion body copy. Filter labels. Image/video captions
|
|
Type
Sans Smaller Lorem Ipsum |
Mobile/Tablet equivalents
Sans Smaller Lorem Ipsum |
Usage Notes
Legal text. Footer links. Event details (default)
|
|
Type
Sans Min Lorem Ipsum |
Mobile/Tablet equivalents
Sans Min Lorem Ipsum |
Usage Notes
Event details (medium) - event listings
|
Elements
| Type | Mobile/Tablet equivalents | Usage Notes |
|---|---|---|
|
Type
Eyebrow (Sans Smaller Uppercase) Lorem Ipsum |
Mobile/Tablet equivalents
Eyebrow (Sans Min Uppercase) Lorem Ipsum |
Usage Notes
Optional eyebrows within text lockups (commonly used components such as Pathways, Listings, and Cards
|
|
Type
Interactive Sans Medium Lorem Ipsum |
Mobile/Tablet equivalents
Interactive Sans Small Lorem Ipsum |
Usage Notes
Navigation. Plain eyebrow (interior hero)
|
|
Type
Interactive Sans Small Lorem Ipsum |
Mobile/Tablet equivalents
Interactive Sans Small Lorem Ipsum |
Usage Notes
Smaller buttons
|
|
Type
Label Sans Medium Lorem Ipsum |
Mobile/Tablet equivalents
Label Sans Small Lorem Ipsum |
Usage Notes
Form labels
|
|
Type
Label Sans Small Lorem Ipsum |
Mobile/Tablet equivalents
Label Sans Small Lorem Ipsum |
Usage Notes
Smaller form labels - sidebars
|
Statistics
| Type | Mobile/Tablet equivalents | Usage Notes |
|---|---|---|
|
Type
Statistic Sans Large Lorem |
Mobile/Tablet equivalents
Campaign Large Lorem |
Usage Notes
Full width stat components
|
|
Type
Statistic Sans Medium Lorem |
Mobile/Tablet equivalents
Statistic Sans Small Lorem |
Usage Notes
Inline (interior template) stat components
|