Typography
O sistema de tipografía do Nimbus é composto de 3 categorias, tamanhos de fonte, pesos e altura de linha. Além disso, disponibilizamos um token com o font-stack utilizado.
Nossa tipografía é a CentraNube, uma adaptação da fonte Centra criada especialmente para Nuvemshop. Essa família tipográfica não é livre de direitos, por isso não podemos disponibilizá-la em conjunto com o Nimbus. Por isso, dentro do nosso font-stack, agregamos algumas fontes de fallback para proporcionar uma experiência ótima para todos os nossos usuários.
Reference | Token name | Token usage | Role |
|---|---|---|---|
Geist, -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', arial, sans-serif | font-family-sans | - | Font family value by default, to use in css and set components font. |
A CentraNube possui 3 variações tipográficas: Bold, Medium e Regular.
Reference | Token name | Token usage | Role |
|---|---|---|---|
Aa 400 | font-weight-regular | regular | Plain text with regular weight, can be combined with highlight, base or caption font-size. |
Aa 500 | font-weight-medium | medium | Plain text with medium weight, can be combined with every font-size. |
Aa 600 | font-weight-bold | bold | Plain text with bold weight, can be combined with highlight, base or caption font-size. |
Os tamanhos de tipografía foram baseados nos valores de espaçamento, ou seja considerando um valor base de 16px como 1rem, definimos uma série de múltiplos de 4 para encontrar frações e assim definir seus tamanhos e aplicações. Os tokens são divididos em duas categorias, Title e Body assim delimitamos o uso de cada tamanho a uma aplicação específica, mantendo seu uso semântico. Alguns tokens se repetem, já que os valores são os mesmos, mas a nível semântico os mantemos separados para que seja claro o uso de cada um deles.
Reference | Token name | Token usage | Role |
|---|---|---|---|
Aa 2rem | font-size-title-h1 | h1 | Main hierarchy headings, reserved for a single use per page. |
Aa 1.5rem | font-size-title-h2 | h2 | Secondary hierarchy headings that are used to divide large sections of content on a page |
Aa 1.25rem | font-size-title-h3 | h3 | - |
Aa 1.125rem | font-size-title-h4 | h4 | It can be used for low hierarchy headings with the second lowest possible importance. |
Aa 1rem | font-size-title-h5 | h5 | It can be used for highlighted text or titles with the lowest possible importance. |
Aa 0.875rem | font-size-title-h6 | h6 | - |
Aa 0.75rem | font-size-body-caption | caption | It can be used for caption text and very small components like labels, inputs or chips. Must not be used for body text. |
Aa 0.875rem | font-size-body-base | base | It can be used for plain text and large amounts of content. |
Aa 1rem | font-size-body-highlight | highlight | It can be used for highlighted text or titles with the lowest possible importance. |
Aa 0.75rem | font-size-3 | 3 | - |
Aa 0.875rem | font-size-3-5 | 3-5 | - |
Aa 1rem | font-size-4 | 4 | - |
Aa 1.125rem | font-size-4-5 | 4-5 | - |
Aa 1.25rem | font-size-5 | 5 | - |
Aa 1.5rem | font-size-6 | 6 | - |
Aa 2rem | font-size-8 | 8 | - |
Aa 3rem | font-size-12 | 12 | - |
Aa 4rem | font-size-16 | 16 | - |
Seguindo a mesma lógica, definimos algumas alturas de linha proporcionais aos tokens de tamanho de fonte.
Reference | Token name | Token usage | Role |
|---|---|---|---|
Hello World 2.75rem | line-height-title-h1 | h1 | Combined use with: font-size-title-h1 |
Hello World 2rem | line-height-title-h2 | h2 | Combined use with: font-size-title-h2 |
Hello World 1.75rem | line-height-title-h3 | h3 | Combined use with: font-size-title-h3 |
Hello World 1.5rem | line-height-title-h4 | h4 | Combined use with: font-size-title-h4 |
Hello World 1.25rem | line-height-title-h5 | h5 | Combined use with: font-size-title-h5 |
Hello World 1.125rem | line-height-title-h6 | h6 | Combined use with: font-size-title-h6 |
Hello World 0.875rem | line-height-body-caption | caption | Combined use with: font-size-body-caption |
Hello World 1.125rem | line-height-body-base | base | Combined use with: font-size-body-base |
Hello World 1.25rem | line-height-body-highlight | highlight | Combined use with: font-size-body-highlight |
Hello World 0.875rem | line-height-3-5 | 3-5 | - |
Hello World 1rem | line-height-4 | 4 | - |
Hello World 1.125rem | line-height-4-5 | 4-5 | - |
Hello World 1.25rem | line-height-5 | 5 | - |
Hello World 1.5rem | line-height-6 | 6 | - |
Hello World 1.75rem | line-height-7 | 7 | - |
Hello World 2rem | line-height-8 | 8 | - |
Hello World 2.75rem | line-height-11 | 11 | - |