Tipografia

Large

Large é o tamanho usado em onboardings, landing pages, homes e outras páginas que tem menos frequência de acesso ou precisam de maior destaque para as informaçõ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 large deve ser utilizada para casos excepcionais, em que se necessite dar destaque às informações, em um caráter mais comercial. Exemplos de uso são onboardings, landing pages, homes e outras páginas que tem menos frequência de acesso comparado às áreas logadas.

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.