Typography
Nuestra tipografía es la CentraNube, una adaptación de la tipografía Centra creada especialmente para Tiendanube. Esta tipografía no es libre de derechos por lo que no podemos disponibilizarla junto con el Design System. Por eso, dentro del font-stack de Nimbus, agregamos algunas fuentes de fallback para que nuestros usuarios puedan tener una experiencia óptima.
Nuestra tipografía es la CentraNube, una adaptación de la tipografía Centra creada especialmente para Tiendanube. Esta tipografía no es libre de derechos por lo que no podemos disponibilizarla junto con el Design System. Por eso, dentro del font-stack de Nimbus, agregamos algunas fuentes de fallback para que nuestros usuarios puedan tener una experiencia óptima.
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. |
CentraNube tiene 3 variaciones tipográficas: Bold, Medium y 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 semi-bold weight, can be combined with highlight, base or caption font-size. |
Los tamaños de tipografía se basaron en valores de espaciado, es decir, considerando un valor base de 16px como 1rem, definimos una serie de múltiplos de 4 para encontrar fracciones y así definir sus tamaños y aplicaciones. Los tokens se dividen en dos categorías, Título y Cuerpo, limitando así el uso de cada tamaño a una aplicación específica, manteniendo su uso semántico. Algunos tokens se repiten, ya que los valores son los mismos, pero a nivel semántico los mantenemos separados para que quede claro el uso de cada uno de ellos.
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.75rem | font-size-title-h2 | h2 | Secondary hierarchy headings that are used to divide large sections of content on a page |
Aa 1.5rem | font-size-title-h3 | h3 | - |
Aa 1.25rem | 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 1.75rem | font-size-7 | 7 | - |
Aa 2rem | font-size-8 | 8 | - |
Aa 3rem | font-size-12 | 12 | - |
Aa 4rem | font-size-16 | 16 | - |
Siguiendo la misma lógica, definimos algunas alturas de línea proporcionales a los tokens de tamaño de fuente.
Reference | Token name | Token usage | Role |
|---|---|---|---|
Hello World 2.5rem | 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.5rem | line-height-title-h5 | h5 | Combined use with: font-size-title-h5 |
Hello World 1.25rem | line-height-title-h6 | h6 | Combined use with: font-size-title-h6 |
Hello World 1rem | line-height-body-caption | caption | Combined use with: font-size-body-caption |
Hello World 1.25rem | line-height-body-base | base | Combined use with: font-size-body-base |
Hello World 1.5rem | 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.5rem | line-height-10 | 10 | - |
Hello World 2.75rem | line-height-11 | 11 | - |