Tipografia

Default

Default é o tamanho padrão para as tipografias da sua interface, usado principalmente nas áreas logadas das aplicações.

índice

componentes para breakpoints grandes

Componentes de texto para telas de tamanho igual ou acima de 992px.

componentes para breakpoints pequenos

Componentes de texto para telas de tamanho igual ou abaixo de 992px.

uso

A tipografia default deve ser utilizada na maioria das aplicações, como produtos internos, áreas logadas e outros sistemas em que o usuário acessa com frequência e que tenham como prioridade a otimização do espaço na tela.

boas práticas

A aparência do texto pode ficar diferente de acordo com as configurações da plataforma em que o usuário estiver. Por isso, evite quebras de texto manuais por motivos visuais, pois elas podem causar problemas de acessibilidade com a ampliação do texto, por exemplo, e também com a visualização do texto em telas de menor resolução. Lembre-se também sempre de utilizar os estilos de texto seguindo a semântica correta.

Wireframe de 2 telas, a primeira com texto em um tamanho padrão e a outra com tamanho de texto ampliado. Nas duas, o texto tem sua quebra de linha automática.

certo

Use o texto com a quebra automática de linha para que ele funcione em qualquer configuração de interface.

Wireframe de 2 telas, a primeira com texto em um tamanho padrão e a outra com tamanho de texto ampliado. Nas duas, o texto o texto teve uma quebra de linha feita manualmente, fazendo com que uma palavra fosse para a segunda linha antes do necessário.

errado

Não use quebra de texto manual para não deixar uma palavra ”sozinha” na última linha, por exemplo. Na versão ampliada da tela isso pode resultar em um pior aproveitamento do espaço.

conteúdo

  • Iniciais: usamos iniciais em caixa baixa em títulos e frases curtas (sem pontuação).

Exceção: nomes pessoais, nomes de produtos e siglas.

  • Pontuação em títulos: títulos não devem ter pontuados.
Wireframe de uma tela com título em letra minúscula, sem pontuação. Abaixo, um texto longo começando com letra maiúscula e pontuação normal. Por fim, 2 cards com titulo sem pontuação e letra minúscula.

certo

Use títulos com caixa baixa e textos longos com grafia normal.

Wireframe de uma tela com título em letra minúscula, sem pontuação. Abaixo, um texto longo começando com letra minúscula e pontuação normal. Por fim, 2 cards com titulo sem com ponto final e letra minúscula.

errado

Não use caixa baixo no início de frases longas e pontuação em títulos.