Tipografia

Identidade VisualIdentidade Visual da ImpulsamosAtualizado em 27 out 2026

Duas famílias e uma escala só: em qualquer peça, só o tamanho muda.

Sora para títulos, nomes e números; Inter para texto e interface. Os 16 estilos têm o mesmo nome, peso, entrelinha e tracking em todos os formatos (apresentação, post, sistema, impresso). Para montar uma peça, escolha o formato e use a coluna de tamanhos dele.

Títulos · nomes · números

Sora

Na apresentação final, cada família aparece como um "Aa" grande: Sora 450 com tracking −0,06em e Inter 400 com tracking −0,05em, entrelinha 0,9, tinta #101820 sobre Tela #F5F8FB.
  • 300subtítulo logo abaixo de um título
  • 450padrão de títulos, nomes e números
  • 600só o trecho em destaque e nomes em caixa alta
Carregar a fonte

Google Fonts, eixo variável 100–800: family=Sora:wght@100..800. Fonte de reserva: Arial, sans-serif. Token: --font-display: "Sora", Arial, sans-serif;

Texto · interface

Inter

  • 400texto
  • 500interface: botão, chip, aba, menu
  • 600rótulos em caixa alta e trechos em negrito no texto
Carregar a fonte e a Mono

Google Fonts, pesos 400, 500 e 600: family=Inter:wght@400;500;600. Fonte de reserva: Arial, sans-serif. Token: --font-body: "Inter", Arial, sans-serif;

Só no estilo Código (código, endereço, token): Mono 500, pilha ui-monospace, SFMono-Regular, Menlo, monospace. Não é uma terceira família da marca: é a fonte monoespaçada do sistema.

https://fonts.googleapis.com/css2?family=Sora:wght@100..800&family=Inter:wght@400;500;600&display=swap

16estilos

Escala

Cada estilo tem família e peso, entrelinha, tracking, o tamanho em cada um dos quatro formatos e o uso. "—" quer dizer que o estilo não existe naquele formato.

Na prancha, as amostras estão no tamanho de apresentação; display, títulos e números a 60%.

  1. Display 1Display
    Sora 450 · 0,98 · −0,055em
    Display 1: Impulsamos
  2. Display 2Display
    Sora 450 · 1 · −0,05em
    Display 2: Primeiro ouvir
  3. Título 1Títulos
    Sora 450 · 1,05 · −0,045em
    Título 1: Diagnóstico
  4. Título 2Títulos
    Sora 450 · 1,08 · −0,04em
    Título 2: Lo que ocurrió
  5. Título 3Títulos
    Sora 450 · 1,15 · −0,035em
    Título 3: Título de cartão
  6. Título 4Títulos
    Sora 450 · 1,2 · −0,03em
    Título 4: Nome do processo
  7. Número 1Números
    Sora 450 · 1 · −0,05em
    Número 1: 2.872
  8. Número 2Números
    Sora 450 · 1 · −0,05em
    Número 2: 2,01 €
  9. Número 3Números
    Sora 450 · 1 · −0,04em
    Número 3: 18,5
  10. Texto GTexto
    Inter 400 · 1,5 · −0,02em
    Texto G: Uma estratégia contínua, da primeira visita à matrícula.
  11. Texto MTexto
    Inter 400 · 1,5 · −0,015em
    Texto M: Cada cliente recebeu o primeiro contato de forma automática.
  12. Texto PTexto
    Inter 400 · 1,45 · −0,01em
    Texto P: Datos del CRM y de las conversaciones de WhatsApp.
  13. InterfaceTexto
    Inter 500 · 1,2 · −0,01em
    Interface: Copiar link
  14. RótuloRótulos
    Inter 600 · 1,2 · +0,12em
    Rótulo: Panorama actual
  15. LegendaRótulos
    Inter 400 · 1,4 · −0,01em
    Legenda: Fuente: Gestor de anuncios
  16. CódigoRótulos
    Mono 500 · 1,45 · 0em
    Código: --t-texto-m
EstiloFamília · pesoEntrelinhaTrackingApresentação 1920Post 1080SistemaImpressoUso
Display 1Sora 4500,98−0,055em120 px96 px—48 ptCapa de apresentação, outdoor, abertura
Display 2Sora 4501−0,05em96 px76 px40 px36 ptCapa interna, post de frase, tela de entrar
Título 1Sora 4501,05−0,045em72 px60 px34 px28 ptTítulo de seção; título da página no sistema
Título 2Sora 4501,08−0,04em56 px48 px26 px22 ptTítulo de slide, título de post
Título 3Sora 4501,15−0,035em40 px36 px21 px16 ptTítulo de cartão grande, subtítulo
Título 4Sora 4501,2−0,03em28 px28 px17 px13 ptTítulo de cartão, nome em lista
Número 1Sora 450, algarismos tabulares1−0,05em96 px88 px34 px36 ptNúmero principal da tela
Número 2Sora 450, algarismos tabulares1−0,05em64 px56 px26 px24 ptNúmeros em cartões
Número 3Sora 450, algarismos tabulares1−0,04em44 px40 px20 px16 ptNúmeros secundários, tabela de destaque
Texto GInter 4001,5−0,02em26 px30 px15 px12 ptAbertura de texto, subtítulo de capa
Texto MInter 4001,5−0,015em20 px24 px13 px10 ptCorpo de texto (padrão)
Texto PInter 4001,45−0,01em17 px20 px12 px9 ptTexto de apoio, cartões densos
InterfaceInter 5001,2−0,01em18 px22 px12,5 px—Botão, chip, aba, item de menu
RótuloInter 600, caixa alta1,2+0,12em14 px18 px10,5 px7,5 ptRótulo de seção, cabeçalho de tabela
LegendaInter 4001,4−0,01em14 px18 px11,5 px7,5 ptFonte, nota, meta
CódigoMono 5001,450em14 px—12 px8 ptCódigo, endereço, token

Tracking negativo cresce com o tamanho; rótulo em caixa alta abre (+.12em).

  1. −0,055emDisplay 1
  2. −0,05emDisplay 2, Número 1 e 2
  3. −0,045emTítulo 1
  4. −0,04emTítulo 2, Número 3
  5. −0,035emTítulo 3
  6. −0,03emTítulo 4
  7. −0,02emTexto G
  8. −0,015emTexto M
  9. −0,01emTexto P, Interface, Legenda
  10. 0emCódigo
  11. +0,12emRótulo

Escada: −0,055em (Display 1) · −0,05em (Display 2, Número 1 e 2) · −0,045em (Título 1) · −0,04em (Título 2, Número 3) · −0,035em (Título 3) · −0,03em (Título 4) · −0,02em (Texto G) · −0,015em (Texto M) · −0,01em (Texto P, Interface, Legenda) · 0em (Código) · +0,12em (Rótulo).

  • EntrelinhaFecha nos tamanhos grandes e abre no texto: Display 0,98–1 · Títulos 1,05 → 1,2 (quanto menor o título, mais aberta) · Números 1 · Texto G e M 1,5 · Texto P 1,45 · Legenda 1,4 · Interface e Rótulo 1,2 · Código 1,45.
Impresso

Impresso em pt: Display e títulos acima de 16 pt pedem tracking −.04em ou mais fechado; texto abaixo de 9 pt só em legenda.

Por que o tracking muda

Letra grande em Sora fica frouxa com o espaçamento padrão; fechar o tracking conforme o tamanho cresce mantém o título compacto. O rótulo é pequeno e em caixa alta: abrir o tracking devolve a leitura.

Mesmos nomes nos outros formatos; trocar só os valores.

  • --font-display: "Sora", Arial, sans-serif;
  • --font-body: "Inter", Arial, sans-serif;
  • --t-display-2: 40px
  • --t-titulo-1: 34px
  • --t-titulo-2: 26px
  • --t-titulo-3: 21px
  • --t-titulo-4: 17px
  • --t-numero-1: 34px
  • --t-numero-2: 26px
  • --t-numero-3: 20px
  • --t-texto-g: 15px
  • --t-texto-m: 13px
  • --t-texto-p: 12px
  • --t-interface: 12.5px
  • --t-rotulo: 10.5px
  • --t-legenda: 11.5px
  • --t-codigo: 12px

--peso-titulo: 450 (Sora: título, nome, número) · --peso-subtitulo: 300 (Sora: subtítulo logo abaixo de um título) · --peso-destaque: 600 (Inter: negrito em texto de conteúdo)

Regras

Como usar

A hierarquia vem do tamanho e do traço: título em Sora 450 e o subtítulo logo abaixo dele em Sora 300, mais fino. Nunca dois níveis seguidos com o mesmo peso.

Faça
  • Usar Sora 450 em títulos, nomes e números, e Inter 400 no texto.
  • Escolher um formato e tirar todos os tamanhos da mesma coluna.
  • Fechar o tracking conforme o tamanho cresce; abrir +0,12em só no rótulo em caixa alta.
  • Para formato novo, multiplicar a escala inteira pelo mesmo fator.
  • Manter o texto longo em até 76 caracteres por linha.
Não faça
  • Criar tamanho novo fora dos 16 estilos.
  • Usar mais de 3 estilos de Sora na mesma tela ou página.
  • Usar Sora 600 fora do trecho em destaque ou de nome em caixa alta.
  • Colocar dois níveis seguidos com o mesmo peso.
  • Usar outra família além de Sora e Inter (a Mono é só para código).
  • Texto abaixo de 9 pt no impresso, a não ser legenda.
  1. Escolha o formato (coluna). Os tamanhos já vêm calculados para a distância de leitura de cada um.
  2. Monte a hierarquia descendo a escala: um Display ou Título 1, depois Título 3–4, depois Texto M.
  3. Formato que não está aqui (banner, wallpaper, vídeo): parta da coluna mais próxima e multiplique todos os tamanhos pelo mesmo fator. Proporção mantida, escala mantida.
  4. Impresso em pt: Display e títulos acima de 16 pt pedem tracking −.04em ou mais fechado; texto abaixo de 9 pt só em legenda.
  1. Uma escala só para tudo: os 16 estilos têm o mesmo nome, peso, entrelinha e tracking em qualquer formato; só o tamanho muda (tabela ao lado).
  2. Sora 450 é o padrão; 600 só para o trecho em destaque e nomes em caixa alta. Inter 400 no texto, 500 na interface, 600 em rótulos.
  3. Tracking negativo cresce com o tamanho; rótulo em caixa alta abre (+.12em).
  4. No máximo 3 estilos de Sora por tela. Texto longo: até 76 caracteres por linha.
  5. Fora dos 16 estilos não se cria tamanho novo: para outro formato, multiplica-se a escala inteira (tamanhos por formato).
Por que uma escala só

Uma escala só faz qualquer peça da Impulsamos parecer da mesma família, do slide ao cartão de visita. Como o nome, o peso, a entrelinha e o tracking não mudam, basta trocar a coluna de tamanhos: proporção mantida, escala mantida.

Regra de ouro

Uma escala só para tudo: só o tamanho muda por formato.

Fonte Identidade Visual da ImpulsamosAtualizado em 27 out 2026Sobre a fonte

Conteúdo da Identidade Visual da Impulsamos, direção Cor principal (Bruma): pranchas "Tipografia · escala", "Tipografia · tamanhos por formato" e a prancha de tipografia da Apresentação visual (versão final). Os tokens são os do Design System/tokens.css, que traz a coluna Sistema.