Typography
Overview
Introduce
Our Design System uses Inter. Download Inter from Google fonts ↗
Inter is a variable font family carefully crafted & designed for computer screens.
Inter features a tall x-height to aid in readability of mixed-case and lower-case text. Several OpenType features are provided as well, like contextual alternates that adjusts punctuation depending on the shape of surrounding glyphs, slashed zero for when you need to disambiguate "0" from "o", tabular numbers, etc.
The Inter project is led by Rasmus Andersson, a Swedish maker–of–software living in San Francisco. To contribute, see github.com/rsms/inter
Typography System
Our Typography aliases get values from Global tokens. The reason for this purpose is responsive, so we keep just one table of Global Typography (as a scale) and change the alias depending on the viewport. Currently, we've covered only Desktop variants.
Aliases
Hero
| Name | Global | Font Size | Line-height | Letter Spacing | Weight |
|---|---|---|---|---|---|
| Large | Strong 600 | 48px | 64px | -0.02em | 600 |
| Medium | Strong 500 | 40px | 56px | -0.02em | 600 |
Header
| Name | Global | Font Size | Line-height | Letter Spacing | Weight |
|---|---|---|---|---|---|
| 4xLarge | Strong 400 | 32px | 44px | -0.02em | 600 |
| 3xLarge | Strong 300 | 24px | 36px | -0.02em | 600 |
| xLarge | Strong 225 | 18px | 32px | -0.02em | 600 |
| Large | Strong 200 | 16px | 28px | 0 | 600 |
| Medium | Strong 175 | 14px | 24px | 0 | 600 |
| Small | Strong 150 | 12px | 20px | 0 | 600 |
Body
| Name | Global | Font Size | Line-height | Letter Spacing | Weight |
|---|---|---|---|---|---|
| Large | Medium 200 | 16px | 28px | 0.02em | 450 |
| Medium | Medium 175 | 14px | 24px | 0.02em | 450 |
| Small | Medium 150 | 12px | 20px | 0.02em | 450 |
| xSmall | Medium 125 | 10px | 16px | 0.02em | 450 |
Globals
As of now, Figma does not support aliases and variables in the same manner as it does for Colors, so we maintain only typography aliases as Text Styles. When Figma implements this functionality, we plan to incorporate Global to Local Variables as well.
To give you an insight into how we have constructed the Typography system in Tetrisly, we invite you to also examine our Global Tokens Typography below.
Strong
| Name | Font Size | Line-height | Letter Spacing | Weight |
|---|---|---|---|---|
| Strong 600 | 48px | 64px | -0.02em | 600 |
| Strong 500 | 40px | 56px | -0.02em | 600 |
| Strong 400 | 32px | 44px | -0.02em | 600 |
| Strong 300 | 24px | 36px | -0.02em | 600 |
| Strong 225 | 18px | 32px | -0.02em | 600 |
| Strong 200 | 16px | 28px | 0 | 600 |
| Strong 175 | 14px | 24px | 0 | 600 |
| Strong 150 | 12px | 20px | 0 | 600 |
| Strong 125 | 10px | 16px | 0 | 600 |
Medium
| Name | Font Size | Line-height | Letter Spacing | Weight |
|---|---|---|---|---|
| Medium 600 | 48px | 64px | 0 | 450 |
| Medium 500 | 40px | 56px | 0 | 450 |
| Medium 400 | 32px | 44px | 0 | 450 |
| Medium 300 | 24px | 36px | 0 | 450 |
| Medium 225 | 18px | 32px | 0 | 450 |
| Medium 200 | 16px | 28px | 0.02em | 450 |
| Medium 175 | 14px | 24px | 0.02em | 450 |
| Medium 150 | 12px | 20px | 0.02em | 450 |
| Medium 125 | 10px | 16px | 0.02em | 450 |
Normal
| Name | Font Size | Line-height | Letter Spacing | Weight |
|---|---|---|---|---|
| Normal 600 | 48px | 64px | 0 | 400 |
| Normal 500 | 40px | 56px | 0 | 400 |
| Normal 400 | 32px | 44px | 0 | 400 |
| Normal 300 | 24px | 36px | 0 | 400 |
| Normal 225 | 18px | 32px | 0 | 400 |
| Normal 200 | 16px | 28px | 0.02em | 400 |
| Normal 175 | 14px | 24px | 0.02em | 400 |
| Normal 150 | 12px | 20px | 0.02em | 400 |
| Normal 125 | 10px | 16px | 0.02em | 400 |