our themes
Typography
One of the key elements in our apps is the typeface we use to communicate. By using the correct typeface, we can tie all of our communications together and create visual continuity.
The typography variants remain equal in the different subthemes of Wireframe (Vulcan, Astra and Root).
Font family
GT America font family
GT America expandedThis is the typography used in the headline text styles.
GT America extendedThis is the typography used in paragraph and links (inline) text styles.
Font weight
GT America expandedlight font_weight_300
GT America expandedregular font_weight_400
GT America expandedmedium font_weight_500
GT America expandedmedium font_weight_600
Font scale
| Typography | Typography name | Size | Line height |
|---|---|---|---|
Aa | Display: font_heading_50 | Size:48px / 3 rem | Line height:56px / 3.5 rem |
Aa | H1: font_heading_100 | Size:40px / 2.5 rem | Line height:48px / 3 rem |
Aa | H2: font_heading_150 | Size:32px / 2 rem | Line height:40px / 2.5 rem |
Aa | H3: font_heading_200 | Size:24px / 1.5 rem | Line height:32px / 2.5 rem |
Aa | H4: font_heading_250 | Size:20px / 1.25 rem | Line height:24px / 1.5 rem |
| Typography | Typography name | Size | Line height |
|---|---|---|---|
Aa | Paragraph large: font_body_50 | Size:18px / 1.125 rem | Line height:24px / 1.5 rem |
Aa | Paragraph medium: font_body_100 | Size:16px / 1 rem | Line height:24px / 1.5 rem |
Aa | Paragraph small: font_body_150 | Size:14px / 0.875 rem | Line height:20px / 1.25 rem |
Aa | Caption: font_body_200 | Size:12px / 0.75 rem | Line height:16px / 1 rem |
Font alignment
text-alignleft
text-aligncenter
text-alignright