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.

Large X

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%)

Large

Base

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

Large X

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%)

Large

Base

Small

Small X

---

↳ 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)

Large

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%

Base

Small

Small X

↳ 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

Large

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%

Base

Small

Small X

↳ 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)

Base

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

Max e Min Size

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

Base

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

Base

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;