Typography
Tangram has a typographic scale with 6 text sizes. They are agnostic (they are not tied to the HTML element), therefore, they require greater care with the application rules. In Tangram we use the Nunito Sans font family in three weights: regular, bold and extra bold.
Font size
Use a typographic scale with few variations in size, but different enough to ensure consistent pairings and allow a good hierarchy to read the information. The tokens that are in the typographic scale are: XXL, XL, LG, MD, SM and XS.
| Sizes | Usage |
|---|---|
| XXL | Text example |
| XL | Text example |
| LG | Text example |
| MD | Text example |
| SM | Text example |
| XS | Text example |
Letter spacing
For the texts to be better presented, use negative spacing between the letters. With the exception of text-xxl, which has letter-spacing of -0.02em, and text-xs, which has letter-spacing of 0em, all other styles have -0.01em letter-spacing.
Typographic styles
| Token | Specifications | Usage |
|---|---|---|
--text-xxl | Font-size: 36px Line-height: 46px / 130% Letter-spacing: -0.02em Weight: Extra bold, Bold e Regular | Big numbers |
--text-xl | Font-size: 28px Line-height: 36px / 130% Letter-spacing: -0.01em Weight: Extra bold, Bold e Regular | Main titles |
--text-lg | Font-size: 20px Line-height: 30px / 150% Letter-spacing: -0.01em Weight: Extra bold, Bold e Regular | Minor titles, subsections, block names, modal titles, sidebar titles |
--text-md | Font-size: 16px Line-height: 24px / 150% Letter-spacing: -0.01em Weight: Extra bold, Bold e Regular | Common texts, labels, inputs, buttons, links |
--text-sm | Font-size: 14px Line-height: 20px / 140% Letter-spacing: -0.01em Weight: Extra bold, Bold e Regular | Less prominent texts, input validation, smaller components |
--text-xs | Font-size: 12px Line-height: 16px / 130% Letter-spacing: 0 Weight: Extra bold, Bold e Regular | Column titles in tables, axis names in charts, footers |