Typography Overview
Our typeface
The Auro Design System uses AS Circular, a custom typeface for all copy for web, mobile, and kiosks. Structured yet simple, our font ensures clarity and readability. Using three distinct lighter-weights, we maintain a level consistency within our content hierarchy.
Headings
Headings provide hierarchy and context. Available heading styles include:
Display
Use display type for large stylistic headlines and marketing campaign headlines. Because display is a lighter weight, it should not be used to convey need-to-know information.
Body
LG
Use LG to define hierarchy without displaying it prominently in your design. Applications include lead-in copy, pull-quotes, and sub-headings.
Default
Default is our baseline type. Use Default for body text. Applications include paragraphs, lists, descriptions, and links.
SM
Use SM as a variant of our default size to allow for more complex compositions. Applications include form labels, secondary information, and helper text.
XS
Limit XS to legal copy. Applications include terms and conditions of an on-screen product or offering.
Behavior
On light/on dark
Two modes define our type's color.
- On-light: primary site environment
- On-dark: copy on dark photography; further usage to be defined.
Additional details about the usage of typography on light or dark backgrounds can be found within color usage page.
Reverse weight scale
Our heading weights are built to maintain open, airy layouts while supporting a deep hierarchy. Starting from our smallest heading (300), weight is set at medium and progressively decreases through book and onwards to our largest type (display) set at light.
.jpg)
Fallback font
If the primary font is unavailable or cannot be loaded on a guest's device, our products will automatically fall back to Helvetica Neue or Helvetica. Apple iOS devices will fall back to SF Pro, while Android products will fall back to Roboto by default.