Typography
How do we use typography?
How do we use typography? What typefaces do we use and when? What styling is available to us?
Display
Garnett Family
Light
Regular
Medium
Semi bold
Garnett
Long-form
Arizona Text
Light
Regular
Medium
Semi bold
ABC Arizona
Primary Headline
Make better decisions, together
Garnett, Medium
120% line height, -2% letter spacing
Secondary headlines
Answers at your fingertips
Garnett, Medium
120% line height, -2% letter spacing
Eyebrows & Captions
MEASURE
Garnett, Medium
20% letter spacing
Monitor growth and engagement. Know how current trends compare to the past.
Garnett, Regular
168% line height, 2% letter spacing,
Stylistic Alternates: Neo-Grotesk ‘r’ and ‘g’
Body copy - short Form
Every day, people give feedback through billions of actions they perform in your product. Through an interactive UI, you can ask questions and dig in deeper to get clarity.
Garnett, Regular
150% line height,
Stylistic Alternates: Neo-Grotesk ‘r’ and ‘g’
Body Copy – Long form
When the team was looking for a best-in-class product analytics platform, Mixpanel checked all the boxes. The team at AB Tasty wanted an intuitive and easy-to-use interface that would give Product Management, Product Marketing, and others autonomy to pull data. Additionally, we wanted a tool that integrated with tools in our tech stack like Appcues and Segment so data from other sources could be received.
Arizona Text, Variable
140% line height
Type system
Display
display-xl
Medium
From signal
to story
Garnett, Medium, 128px / 120%
display-lg
Medium
From signal to story
Garnett, Medium, 96px / 120%
display-md
Medium
From signal to story
Garnett, Medium, 80px / 120%
display-sm
Medium
From signal to story
Garnett, Medium, 72px / 120
Headings
heading-xxl
Medium
From signal to story
heading-xxl
Regular
From signal to story
Garnett, Medium & Regular, 60px / 120%
heading-xl
Medium
From signal to story
heading-xl
Regular
From signal to story
Garnett, Medium & Regular, 48px / 120%
heading-lg
Medium
From signal to story
Garnett, Medium & Regular, 36px / 120%
heading-md
Medium
From signal to story
Garnett, Medium, 28px / 140%
Stylistic Alternates, SS01
heading-sm
Medium
From signal to story
Garnett, Medium, 22px / 140%
Stylistic Alternates, SS01
heading-xs
Medium
From signal to story
Garnett, Medium, 18px / 140%
Stylistic Alternates, SS01
Body: Regular
body-xxl
Regular
Anyone can pick it up and learn about our customer behavior, digging deep into metrics that matter to them, and know that the data is accurate.
Garnett (default), Regular, 36px / 150%
Stylistic Alternates, SS01
body-xxl-serif
Regular
Anyone can pick it up and learn about our customer behavior, digging deep into metrics that matter to them, and know that the data is accurate.
Arizona Text Variable (340), 38px / 140%
Regular
body-xl
regular
Anyone can pick it up and learn about our customer behavior, digging deep into metrics that matter to them, and know that the data is accurate.
Garnett (default), Regular, 28px / 150%
Stylistic Alternates, SS01
body-xl
regular
Anyone can pick it up and learn about our customer behavior, digging deep into metrics that matter to them, and know that the data is accurate.
Arizona Text Variable (340), 30px / 140%
Regular
body-lg
regular
Anyone can pick it up and learn about our customer behavior, digging deep into metrics that matter to them, and know that the data is accurate.
Garnett (default), Regular, 22px / 160%
Stylistic Alternates, SS01
body-lg
regular
Anyone can pick it up and learn about our customer behavior, digging deep into metrics that matter to them, and know that the data is accurate.
Arizona Text Variable (340), 24px / 150%
Regular
body-md
regular
Anyone can pick it up and learn about our customer behavior, digging deep into metrics that matter to them, and know that the data is accurate.
Garnett (default), Regular, 18px / 160%
Stylistic Alternates, SS01
body-md
regular
Anyone can pick it up and learn about our customer behavior, digging deep into metrics that matter to them, and know that the data is accurate.
Arizona Text Variable (340), 20px / 150%
Regular
body-sm
regular
Anyone can pick it up and learn about our customer behavior, digging deep into metrics that matter to them, and know that the data is accurate.
Garnett (default), Regular, 16px / 160%
Stylistic Alternates, SS01
body-sm
regular
Anyone can pick it up and learn about our customer behavior, digging deep into metrics that matter to them, and know that the data is accurate.
Arizona Text Variable (340), 18px / 150%
Regular
Body: Emphasis
body-xxl
Medium
Anyone can pick it up and learn about our customer behavior, digging deep into metrics that matter to them, and know that the data is accurate.
Garnett (default), Medium, 36px / 150%
Stylistic Alternates, SS01
body-xxl-serif
Medium
Anyone can pick it up and learn about our customer behavior, digging deep into metrics that matter to them, and know that the data is accurate.
Arizona Text Variable (450), 38px / 140%
Regular
body-xl
Medium
Anyone can pick it up and learn about our customer behavior, digging deep into metrics that matter to them, and know that the data is accurate.
Garnett (default), Medium, 28px / 150%
Stylistic Alternates, SS01
body-xl
Medium
Anyone can pick it up and learn about our customer behavior, digging deep into metrics that matter to them, and know that the data is accurate.
Arizona Text Variable (450), 30px / 140%
Regular
body-lg
Medium
Anyone can pick it up and learn about our customer behavior, digging deep into metrics that matter to them, and know that the data is accurate.
Garnett (default), Medium, 22px / 160%
Stylistic Alternates, SS01
body-lg
Medium
Anyone can pick it up and learn about our customer behavior, digging deep into metrics that matter to them, and know that the data is accurate.
Arizona Text Variable (450), 24px / 150%
Regular
body-md
Medium
Anyone can pick it up and learn about our customer behavior, digging deep into metrics that matter to them, and know that the data is accurate.
Garnett (default), Medium, 18px / 160%
Stylistic Alternates, SS01
body-md
Medium
Anyone can pick it up and learn about our customer behavior, digging deep into metrics that matter to them, and know that the data is accurate.
Arizona Text Variable (450), 20px / 150%
Regular
body-sm
Medium
Anyone can pick it up and learn about our customer behavior, digging deep into metrics that matter to them, and know that the data is accurate.
Garnett (default), Medium, 16px / 160%
Stylistic Alternates, SS01
body-sm
Medium
Anyone can pick it up and learn about our customer behavior, digging deep into metrics that matter to them, and know that the data is accurate.
Arizona Text Variable (450), 18px / 150%
Regular
Captions & Eyebrows
caption-sm
Regular
Anyone can pick it up and learn about our customer behavior, digging deep into metrics that matter to them, and know that the data is accurate.
Garnett Regular & Medium, 14px / 160%
Stylistic Alternates, SS01
caption-sm
Medium
Anyone can pick it up and learn about our customer behavior, digging deep into metrics that matter to them, and know that the data is accurate.
caption-xs
Regular
Anyone can pick it up and learn about our customer behavior, digging deep into metrics that matter to them, and know that the data is accurate.
Garnett Regular & Medium, 12px / 160%
Stylistic Alternates, SS01
caption-xs
Medium
Anyone can pick it up and learn about our customer behavior, digging deep into metrics that matter to them, and know that the data is accurate.
eyebrow-lg
Bold
Mono-type
Apercu Mono, Bold, 18px
eyebrow-sm
Bold
Mono-type
Apercu Mono, Bold, 14px