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

-