Tipografia

Famílias de fonte

Para melhorar a performance de carregamento das aplicações e reduzir o delay de renderização de fontes, utilizamos a família de fontes padrão para cada sistema, ou seja, a fonte exibida em um dispositivo IOS será diferente da exibida em sistemas Windows, Android, etc…


Tamanhos

A escala tipográfica é utilizada principalmente para hierarquizar o conteúdo na estrutura página. A utilização dos títulos deve seguir a ordem lógica começando com H1 até H6 de acordo com a relevância do título em questão.

H1 | 48px, 3rem

H2 | 32px, 2rem

H3 | 24px, 1.5rem

H4 | 21px, 1.313rem

H5 | 18px, 1.125rem
H6 | 16px, 1rem

Body text | 16px 1rem


Hierarquia

Título

O título, ou h1, é utilizado 1 vez somente para marcar o título da página.

Título Heading 1

 

Headings

Os headings são utilizados para marcar os títulos das demais seções da página, cards, etc...

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
 

Body

O body text é utilizado em parágrafos e textos longos. Sua utilização primária segue o alinhamento padrão ocidental à esquerda. Pode ser utilizado também com alinhamento ao centro desde que o conteúdo não ultrapasse 3 linhas de conteúdo.

Utiliza a variável darker(#1D2027) em backgrounds claros ou white (#FFFFFF) em backgrounds escuros.

Exemplo:

#1D2027
#FFFFFF
 

Links Internos

São links de texto internos ao conteúdo das páginas. Possui 2 possíveis estados para identificar se já foi, ou não visitado. O texto deve apresentar o sublinhado em todos os casos para indicar que é um link seguindo o padrão web para hiperlinks e o tamanho de de acordo com o conteúdo onde está aplicado.

Os links não visitados utilizam a cor #0066CC e os links visitados utilizam a cor #660099

Exemplo:


Pesos

O contraste entre os pesos da fonte é utilizado para dar mais destaque a determinadas informações.

Utilizamos apenas 2 pesos de fonte: 400 e 600.

Peso 400 *é utilizado como padrão para itens como parágrafos, listas e tabelas;

Peso 600 *é utilizado para certos títulos, menus, e informações que merecem mais destaque.


Acessibilidade

Os textos não devem ter tamanhos menores que 16px, ideal para a leitura na web e mobile. Tamanhos menores que esse prejudicam a leitura para os usuários e mais ainda para os com baixa visão ou idosos.
Referência