Typography
Nuestra tipografía principal es Geist, una fuente de tipo variable desarrollada por Vercel y diseñada específicamente para entornos de desarrollo y diseño de interfaces. Su naturaleza variable permite un control preciso sobre el peso y el contraste, garantizando una legibilidad superior en cualquier tamaño o resolución.
Geist tiene 3 variaciones tipográficas: Bold, Medium y Regular.
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. |
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 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. |
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 |
|---|---|---|---|
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 | - |
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.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 | - |