Tipografia

Uma boa tipografia pode tornar um design justo e limpo - e precisamos comunicar de tal forma. Siga nossos padrões e práticas tipográficas sempre que possível.

Usamos duas sans serifs para materiais de design relacionados à marca Quatro: DM Sans e Roboto é usado para tratamentos de exibição em que nossa mensagem precisa ser alta, elegante e confiante. Roboto é uma fonte testada e comprovada, projetada para legibilidade e facilidade de uso.
DM Sans
DM_sans_image.png
Link para baixar a font DM Sans:
Roboto
Roboto_image.png
Link para baixar a font Roboto:
Sistema 8px

A escala é baseada em um sistema de 8px, onde o tipo é amplamente divisível por 8. Essa abordagem matemática da tipografia permite relacionamentos claros entre cabeçalhos, sub-cabeçalhos e texto do corpo. Quando se trata de tamanhos menores, o sistema é um pouco mais flexível para permitir especificações de tipo precisas.
TAMANHO DA FONTE / Títulos / Usar DM Sans

56/64PX - Título 1 (T1)
Titulo01.png
48/56PX - Título 2 (T2)
Titulo02.png
32/36PX - Título 3 (T3)
Titulo03.png
24/32PX - Título 4 (T4)
Titulo04.png
TAMANHO DA FONTE / Subtítulos & Parágrafos / Roboto

20/24PX - Subtítulo 1 (S1)
Subtitle01.png
16/20PX - Subtítulo 2 (S2)
Subtitle02.png
12/16PX - Parágrafo
Paragraph.png
Cor na tipografia
As cores dos textos são os principais conjuntos de cores para o layout geral de um site, propaganda, manuais apresentações comerciais e outros materiais de comunicação. Por isso é importante manter uma consistência entra elas.
Títulos, Subtítulos e Fundos:

#0032A0
R: 0 G: 50 B: 160
C: 100 M: 80 Y: 16 K: 3
azul_principal.png
Parágrafos, cabeçalhos, e divisórias:

#7F8080
R: 127 G: 128 B: 128
C: 49 M: 39 Y: 39 K: 20
cinza_escuro.png
Exemplos
Aqui estão alguns exemplos de pares tipográficos que normalmente usamos em nosso marketing.
Título + Subtítulo (T1 / S1)
Ex-01.png
Título + Parágrafo (T3 / Parágrafo)
Ex-02.png
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.