03
Tipografia
Tipografia é tom de voz visual: define como as pessoas sentem nossas palavras antes de ler. A Stanzegic Grotesk dá peso e personalidade aos títulos. A Montserrat cuida da leitura e dos números. Juntas mostram uma Squad22 direta, sênior e sem enfeite.
03 Famílias principais
Aa Bb Cc Dd
Stanzegic Grotesk
Bold
Títulos, chamadas e aberturas
Aa Bb Cc 22
Montserrat
ExtraBold
Números grandes e títulos de apoio
Aa Bb Cc 22
Montserrat
Bold e SemiBold
Corpo de texto, rótulos e botões
A Stanzegic Grotesk nunca é usada em números. Todo algarismo, inclusive dentro de títulos, vai em Montserrat ExtraBold.
03 Tipografia para campanhas
Campanhas usam a Stanzegic Grotesk grande, com pouca entrelinha e espaçamento apertado. A Montserrat Bold entra no subtítulo e a SemiBold no texto.
O ponto final pode ganhar a cor de destaque. Nunca use caixa alta: a força vem do tamanho e do peso.
Matamos ideia
ruim cedo.
Título
Perguntas difíceis no começo, quando mudar de rumo ainda é simples.
Stanzegic Grotesk Bold
Subtítulo
Montserrat Bold
Corpo
Montserrat SemiBold
Projeto digital costuma quebrar no briefing, bem antes do código. Por isso a gente valida antes da primeira linha.
03 Tipografia para campanhas / títulos grandes
Espaçamento apertado, letras quase encostando.
Feito e no ar.
A Stanzegic Grotesk é a fonte de títulos.
Em títulos grandes, use espaçamento entre -3% e -6% e entrelinha entre 85% e 95%.
Sempre em frase normal: só a primeira letra maiúscula. Confira se ascendentes e descendentes não colidem.
Espaçamento -5%: reduz o ajuste manual entre letras.
Do briefing
ao ar.
03 Tipografia para uso geral
Feito, publicado
e faturando.
Título
Stanzegic Grotesk Bold
Entrelinha 95%
Espaçamento -4%
Subtítulo
Montserrat Bold
Entrelinha automática
Espaçamento 0
Corpo
Montserrat SemiBold
Entrelinha 145%
Espaçamento 0
Cinco cases no ar, do briefing ao pós-lançamento
Scaelife, Norlu, Covered, IDTR e Wieldy: sites, apps e sistemas para empresas no Brasil, nos EUA e na Europa.
03 Tipografia para uso geral / destaque em cor
Do primeiro teste
ao pós-lançamento.
Use a Stanzegic Grotesk em frase normal para títulos do dia a dia, em peças, apresentações e no site.
O destaque em cor guia o olho para o que importa. Sobre fundo claro, o destaque é rosa ou azul sinal, conforme a cor do post. Sobre escuro, turquesa. Títulos inteiros podem usar azul sinal.
Sempre confira se ascendentes e descendentes não se tocam.
Destaque: a parte final da frase muda de cor. Uma cor só por título.
A chave é sua.
Pode ser uma palavra ou o fim da frase.
03 Montserrat em números
Fonte dos números
Números grandes usam Montserrat ExtraBold. A forma aberta dos algarismos da Montserrat lê melhor que a Stanzegic em tamanhos gigantes e dá ritmo de dado.
Use espaçamento entre -6% e -8%. A unidade (%, NPS, dias) vem menor ao lado, em Stanzegic. Regra fixa: a Stanzegic nunca desenha algarismos, nem dentro de um título.
05
cases no ar
03 Tipografia na web
Time brasileiro, produto
que roda no mundo.
H1
Stanzegic Grotesk Bold
Entrelinha 100%
Espaçamento -4%
H2
Montserrat Bold
Entrelinha automática
Corpo
Montserrat SemiBold
18 a 20 px no desktop, 16 px no celular
Um time sênior que desenha, constrói e coloca no ar
Pontuação
O site decide caso a caso. Títulos curtos podem terminar sem ponto.
Sites, apps e sistemas para empresas no Brasil, nos EUA e na Europa.
03 Tipografia no Canva
Matamos ideia
ruim cedo.
Título
Montserrat ExtraBold
Entrelinha 95%
Espaçamento -3%
Subtítulo
Montserrat Bold
Corpo
Montserrat SemiBold
Atenção
No Canva, não use ponto final colorido. Aplique a cor na última palavra.
Do briefing ao ar
Quando a Stanzegic Grotesk não estiver no kit de marca do Canva, use Montserrat ExtraBold nos títulos.
03 Fontes de reserva
Aa Bb Cc 22
Arial
Black
Bold
A Arial é a reserva para o dia a dia, quando as fontes da marca não estão disponíveis: PowerPoint, Google Docs e arquivos compartilhados.
Aplique as mesmas regras de espaçamento e entrelinha da página 34 e ajuste à mão quando precisar.
O modelo de apresentação já vem configurado, então a maioria das pessoas não precisa mexer nisso.
A Arial não está instalada neste arquivo do Figma, então a amostra aparece em Montserrat. Nas ferramentas de escritório, use Arial.
03 Fonte de reserva para apresentações
01
Dados e números
Arial Black
Espaçamento -4%
Título
Arial Bold
Espaçamento -3%
Entrelinha 95%
Corpo
Perguntas difíceis no começo,
quando mudar ainda é simples.
Arial Bold
Espaçamento normal
Entrelinha 130%
Projeto digital costuma quebrar no briefing, bem antes do código.
A Arial não está instalada neste arquivo do Figma, então a amostra aparece em Montserrat. Nas ferramentas de escritório, use Arial.
03 Chamadas para ação
Chamadas claras e consistentes geram ação. Todo botão usa Montserrat Bold em frase normal, com o mesmo respiro dos dois lados.
No Canva e em redes sociais, a mesma regra vale com Montserrat ExtraBold.
Use as combinações aprovadas: branco sobre azul sinal, branco sobre noturno, noturno sobre turquesa e turquesa sobre noturno. Contorno só sobre fundo escuro.
O texto do botão tem duas a quatro palavras.
próxima seção
04 Gráficos