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 semi-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.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

-