Typography
Typefaces, weights, and usage guidance for the brand.
Primary fontface
Our primary typeface is TT Firs Text. It carries the brand voice across headlines, body copy, and product UI.
TT Firs Text · Regular
Hero
8.00rem
100%
Font size
128 px / 8rem
Line height
100 % / 8rem
Tracking
-5 %
Download fontOpen
Font usage
WebdesignMobile applicationsMarketing print materialsShared online documentsOffline documentsE-mails
Secondary fontface
Atkinson Hyperlegible Next supports the primary typeface where readability and accessibility are the priority.
Atkinson Hyperlegible Next · Regular
Hero
8.00rem
100%
Font size
128 px / 8rem
Line height
100 % / 8rem
Tracking
-5 %
Download fontOpen
Font usage
WebdesignMobile applicationsShared online documentsOffline documentsMarketing print materialsE-mails
Font Usage
When to use the primary, secondary, or alternative system font. Rules follow our brand guidelines and font licensing.
| Application of font | TT Firs Text | Atkinson Hyperlegible Next | Alternative |
|---|---|---|---|
| Webdesign | |||
| Mobile applications | |||
| Shared online documents | |||
| Offline documents | |||
| Marketing print materials | |||
| E-mails |
Type Scale
Type scale
The full Tailwind CSS font-size scale used across the app. Editing any token in the theme cascades through every text-* utility.
Hero
Font size
128 px / 8rem
Line height
100 % / 8rem
Tracking
-5 %
text-9xl · tracking-tighter
Page Header
Font size
96 px / 6rem
Line height
100 % / 6rem
Tracking
-5 %
text-8xl · tracking-tighter
Section Title
Font size
72 px / 4.5rem
Line height
100 % / 4.5rem
Tracking
-2.5 %
text-7xl · tracking-tight
Subsection Title
Font size
60 px / 3.75rem
Line height
100 % / 3.75rem
Tracking
-2.5 %
text-6xl · tracking-tight
Feature Header
Font size
48 px / 3rem
Line height
100 % / 3rem
Tracking
-2.5 %
text-5xl · tracking-tight
Emphasized Text
Font size
36 px / 2.25rem
Line height
111 % / 2.5rem
Tracking
-2.5 %
text-4xl · tracking-tight
Dialog Title
Font size
30 px / 1.875rem
Line height
120 % / 2.25rem
Tracking
-2.5 %
text-3xl · tracking-tight
Small Section Title
Font size
24 px / 1.5rem
Line height
133 % / 2rem
Tracking
0 %
text-2xl · tracking-normal
Navigation Category
Font size
20 px / 1.25rem
Line height
140 % / 1.75rem
Tracking
0 %
text-xl · tracking-normal
Smaller Subtitle
Font size
18 px / 1.125rem
Line height
156 % / 1.75rem
Tracking
0 %
text-lg · tracking-normal
Paragraph Text
Font size
16 px / 1rem
Line height
150 % / 1.5rem
Tracking
0 %
text-base · tracking-normal
Helper Text
Font size
14 px / 0.875rem
Line height
143 % / 1.25rem
Tracking
0 %
text-sm · tracking-normal
Footnote Text
Font size
12 px / 0.75rem
Line height
133 % / 1rem
Tracking
0 %
text-xs · tracking-normal
