Typography

✅ Atualizado (01/04/2025) - Ver detalhes

Abril 2025

  • 01/04/25 Alteração no peso da fonte base caption, de moderate para strongest

Março 2025

  • 18/03/25 Correção de erros na documentação

Janeiro 2025

  • 27/01/25 Inclusão de seção "Estrutura dos Tokens" para auxiliar na leitura e reforçar padrão de nomenclaturas.

  • Atualização dos tokens semânticos para nova definição:

    • Mudamos os nomes dos pesos (ex.:Strong,Moderate...) e o nome dos tamanhos de fonte (ex.: Large-X, Normal...)

Exemplo:

Antes body-B-subtlest

Depois body-strongest-small-x

Dezembro 2024

  • 12/12/24 Inclusão de todas as Tipografias e tokens respectivos cadastrados para o novo design system - Compasso.

Tokens

Guia de estrutura dos tokens

Nas aplicações semânticas dos tokens você encontrará a seguinte hierarquia:

Exemplo acima utilizando o token $title-strong-large-x que pertence ao estilo Title

É extremamente importante mantermos a hierarquia dos tokens para padronização e otimização do trabalho, de forma que fique fácil leitura e manutenção.

Abaixo segue a lista completa de tokens e seus atributos de forma bruta:

↳ Font Family

Token
Valor

fontFamily-systemTypeface

Roboto

fontFamily-customTypeface

Lexend Deca

fontFamily-monoTypeface

Roboto Mono

↳ Font Weight

Token
Valor

fontWeight-regular

400

fontWeight-medium

500

fontWeight-semibold

600

fontWeight-bold

700

↳ Font Size

Token
Valor

fontSize-small-2x

10px

fontSize-small-x

12px

fontSize-small

14px

fontSize-base

16px

fontSize-large

18px

fontSize-large-x

20px

fontSize-large-2x

24px

fontSize-large-3x

28px

fontSize-large-4x

32px

fontSize-large-5x

40px

fontSize-large-6x

48px

↳ Line Height

Token
Valor

lineHeight-tighter

fontSize + 2px

lineHeight-tight

fontSize + 4px

lineHeight-normal

fontSize + 6px

lineHeight-loose

fontSize + 8px

lineHeight-looser

fontSize + 10px

lineHeight-paragraph

fontSize * 1.6px

↳ Letter Spacing

Token
Valor

letterSpacing-compact

fontSize * (-3%)

letterSpacing-normal

valor default

letterSpacing-comfort

fontSize * 1%

letterSpacing-spread

fontSize * 2%

Estilos

↳ Display

  • Utilizadas em contextos onde o texto precisa chamar bastante atenção.

  • Servem geralmente para abordagens mais visuais, como campanhas e landing pages.

  • Pode ser utilizada apenas no peso SemiBold

Font Family
Font Size

48px (fontSize-large-6x)

40px (fontSize-large-5x)

32px (fontSize-large-4x)

28px (fontSize-large-3x)

24px (fontSize-large-2x)

20px (fontSize-large-x)

18px (fontSize-large)

16px (fontSize-base)

14px(fontSize-small)

Os tokens de Display e Title possuem uma variável, ou seja, os valores de alguns tokens possuem conversão entre desktop e mobile.

display-strong-large-x

Mobile/Tablet
Desktop

fontFamily-customTypeface - Lexend Deca

fontFamily-customTypeface - Lexend Deca

fontWeight-semibold - 600

fontWeight-semibold - 600

fontSize-large-5x - 40px

fontSize-large-6x - 48px

lineHeight-looser - fontSize + 10px

lineHeight-looser - fontSize + 10px

letterSpacing-compact - fontSize * (-3%)

letterSpacing-compact - fontSize * (-3%)

↳ Title

  • Utilizadas para demarcar as divisões de conteúdo na interface, criando hierarquia.

  • Não é recomendado o uso dentro de componentes na interface. Salvo exceções como landing pages.

  • Pode ser utilizada apenas no peso SemiBold.

Os tokens de Display e Title possuem uma variável, ou seja, os valores de alguns tokens possuem conversão entre desktop e mobile.

title-strong-large-x

Mobile/Tablet
Desktop

fontFamily-customTypeface - Lexend Deca

fontFamily-customTypeface - Lexend Deca

fontWeight-semibold - 600

fontWeight-semibold - 600

fontSize-large-2x - 24px

fontSize-large-3x - 28px

lineHeight-loose - fontSize + 8px

lineHeight-loose - fontSize + 8px

letterSpacing-compact - fontSize * (-3%)

letterSpacing-compact - fontSize * (-3%)

↳ Body

  • Fonte padrão para texto corrido (2 ou mais linhas).

  • Possui lineheight mais espaçado, facilitando a leitura.

  • Pode ser utilizada em 3 pesos: Bold, Medium e Regular.

Font Family
Font Size

20px (fontSize-large-x)

16px (fontSize-base)

14px (fontSize-small)

12px (fontSize-small-x)

16px (fontSize-base)

14px (fontSize-small)

12px (fontSize-small-x)

10px (fontSize-small-2x)

20px (fontSize-large-x)

16px (fontSize-base)

14px (fontSize-small)

12px (fontSize-small-x)

10px (fontSize-small-2x)

body-strongest-large [bold]

Desktop e Mobile/Tablet
Valor

fontFamily-systemTypeface

Roboto

fontWeight-bold

700

fontSize-large-x

20px

lineHeight-looser

fontSize + 10px

letterSpacing-comfort

fontSize * (1%)

body-moderate-large [medium]

Desktop e Mobile/Tablet
Valor

fontFamily-systemTypeface

Roboto

fontWeight-medium

500

fontSize-large-x

20px

lineHeight-looser

fontSize + 10px

letterSpacing-comfort

fontSize * 1%

body-normal-large [regular]

Desktop e Mobile/Tablet
Valor

fontFamily-systemTypeface

Roboto

fontWeight-regular

400

fontSize-large-x

20px

lineHeight-looser

fontSize + 10px

letterSpacing-comfort

fontSize * 1%

↳ Label

  • Fonte padrão para subtítulos e labels em componentes (Até 2 linhas).

  • Possui lineheight mais estreito, para maior controle de espaço e disposição dos elementos em um componente.

  • Pode ser utilizada em 3 pesos: Medium e Regular

label-moderate-large [medium]

Desktop e Mobile/Tablet
Valor

fontFamily-systemTypeface

Roboto

fontWeight-medium

500

fontSize-large-x

20px

lineHeight-tight

fontSize + 4px

letterSpacing-comfort

fontSize * 1%

label-normal-large [regular]

Desktop e Mobile/Tablet
Valor

fontFamily-systemTypeface

Roboto

fontWeight-regular

400

fontSize-large-x

20px

lineHeight-tight

fontSize + 4px

letterSpacing-comfort

fontSize * 1%

↳ Content Mono

  • Fonte padrão para a Cifra.

  • Possui lineheight mais espaçado, baseado em porcentagem.

  • Pode ser utilizada em 2 pesos: Bold e Regular. E seu tamanho máximo está documentado apenas para layout.

Font Family
Font Size

20px (fontSize-large-x)

14px (fontSize-small)

10px (fontSize-small-x)

contentMono-strongest-base [bold]

Desktop e Mobile/Tablet
Valor

fontFamily-monoTypeface

Roboto Mono

fontWeight-bold

700

fontSize-small

14px

lineHeight-paragraph

fontSize * 1.6px

letterSpacing-normal

valor default

contentMono-normal-base [regular]

Desktop e Mobile/Tablet
Valor

fontFamily-monoTypeface

Roboto Mono

fontWeight-regular

400

fontSize-small

14px

lineHeight-paragraph

fontSize * 1.6px

letterSpacing-normal

valor default

↳ Content Sans

  • Fonte padrão para artigos longos, como Blog, Página de Termos de Uso, etc.

  • Possui lineheight mais espaçado, baseado em porcentagem.

  • Pode ser utilizada em 2 pesos: Bold e Regular.

contentSans-strongest-base [bold]

Desktop e Mobile/Tablet
Valor

fontFamily-systemTypeface

Roboto

fontWeight-bold

700

fontSize-large-x

20px

lineHeight-paragraph

fontSize * 1.6

letterSpacing-comfort

fontSize * 1%

contentSans-normal-base [regular]

Desktop e Mobile/Tablet
Valor

fontFamily-systemTypeface

Roboto

fontWeight-regular

400

fontSize-large-x

20px

lineHeight-paragraph

fontSize * 1.6

letterSpacing-comfort

fontSize * 1%

↳ Caption

  • Fonte especial para casos críticos.

  • Possui line-height estreito, e letter-spacing mais espaçado para facilitar a leitura.

  • Pode ser utilizada em 2 pesos: Bold e Regular

caption-strongest-base [bold]

Desktop e Mobile/Tablet
Valor

fontFamily-systemTypeface

Roboto

fontWeight-bold

700

fontSize-small-2x

10px

lineHeight-tighter

fontSize + 2px

letterSpacing-spread

fontSize * 2%

caption-normal-base [regular]

Desktop e Mobile/Tablet
Valor

fontFamily-systemTypeface

Roboto

fontWeight-regular

400

fontSize-small-2x

10px

lineHeight-tighter

fontSize + 2px

letterSpacing-spread

fontSize * 2%

CCS Font Fallback

Esta seção define a ordem de prioridade para renderização das fontes utilizadas no Compasso. Caso a fonte principal não seja carregada corretamente, o sistema aplicará as fontes alternativas seguindo a ordem de prioridade estabelecida.

Lexend Deca

  • Fontes alternativas: 'Roboto', 'Helvetica Neue', Arial, sans-serif.

Roboto

  • Fontes alternativas: 'Helvetica Neue', Arial, sans-serif.

Mono Sans

  • Fontes alternativas: 'Courier New', Courier, monospace.

  • Sempre utilizar as fontes principais especificadas para manter a consistência visual.

  • Caso a fonte principal não seja carregada, o navegador aplicará automaticamente a próxima fonte disponível na lista de alternativas.

  • As fontes alternativas foram escolhidas para garantir máxima compatibilidade e legibilidade entre diferentes sistemas operacionais e navegadores.

Exemplo CSS

/* Lexend Deca */
font-family: 'Lexend Deca', 'Roboto', 'Helvetica Neue', Arial, sans-serif;

/* Roboto */
font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;

/* Roboto Mono */
font-family: 'Roboto Mono', 'Courier New', Courier, monospace;

Atualizado