Tipografia
O Tangram tem uma escala tipográfica com 6 tamanhos de texto. Eles são agnósticos (não estão atrelados ao elemento do HTML), portanto, exigem maior cuidado com as regras de aplicação. No Tangram nós usamos a família tipográfica Nunito Sans em três pesos: regular, bold e extra bold.
Escala tipográfica (font-size)
Use uma escala tipográfica com poucas variações de tamanho, porém diferentes o suficiente para garantir pareamentos consistentes e que permitam boa hierarquia para leitura das informações. Os tokens que estão na escala tipográfica são: XXL, XL, LG, MD, SM e XS.
| Tamanhos | Aplicações |
|---|---|
| XXL | Exemplo de texto |
| XL | Exemplo de texto |
| LG | Exemplo de texto |
| MD | Exemplo de texto |
| SM | Exemplo de texto |
| XS | Exemplo de texto |
Espaçamento entre letras (letter-spacing)
Para que os textos fiquem mais bem apresentados, use espaçamento negativo entre as letras. Com exceção do --text-xxl, que tem letter-spacing de -0.02em, e o --text-xs, que tem letter-spacing de 0em, todos os outros estilos têm -0.01em de letter-spacing.
Estilos tipográficos
| Token | Especificações | Aplicações |
|---|---|---|
--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 | Títulos principais |
--text-lg | Font-size: 20px Line-height: 30px / 150% Letter-spacing: -0.01em Weight: Extra bold, Bold e Regular | Títulos secundários, subseções, nomes de blocos, títulos de modais, títulos de sidebar |
--text-md | Font-size: 16px Line-height: 24px / 150% Letter-spacing: -0.01em Weight: Extra bold, Bold e Regular | Textos comuns, labels, inputs, botões, links |
--text-sm | Font-size: 14px Line-height: 20px / 140% Letter-spacing: -0.01em Weight: Extra bold, Bold e Regular | Textos com menos destaque, validação de inputs, componentes menores |
--text-xs | Font-size: 12px Line-height: 16px / 130% Letter-spacing: 0 Weight: Extra bold, Bold e Regular | Títulos de colunas em tabelas, nomes de eixos em gráficos, rodapés |