Tipografia Sistema de projeto

Crie hierarquias de conteúdo claras em todos os tamanhos.

8 verificações · 3 grupos de conteúdo

Conteúdo do checklist

Progresso da revisão

Estrutura e significado

Compare as informações e a apresentação no contexto de uso.

Use uma escala de tamanho de fonte consistenteDefina níveis da legenda ao título e evite adicionar novos tamanhos para cada tela.Substitua títulos por conteúdos mais longos e aumente o tamanho da fonte nos dispositivos. Mantenha a hierarquia, os sotaques vietnamitas, o espaçamento entre linhas e as ações relacionadas fáceis de ler, sem cortar o conteúdo.Exemplo O cartão tem título, descrição e botão abrir em duas linhas; Quando as letras são maiores, a etiqueta aumenta de altura em vez de cobrir o botão ou cortar a marca vietnamita.Definir estilo por funçãoDistinga títulos, conteúdo, rótulos e legendas para escolher estilos de acordo com o significado.Uma fonte deve ter um nome que desempenhe a mesma função que o corpo ou rótulo; As alterações de função precisam ser atualizadas de forma síncrona, em vez de editar cada tela.Verifique as fontes e sotaques vietnamitasEscolha a espessura a ser usada, faça backup da fonte e verifique se há texto acentuado quando o download da fonte falhar.Verifique o comprimento das letras, os acentos vietnamitas e o peso realmente carregado; As fontes de backup devem ter tamanho próximo para evitar saltos no layout.

Interação e usabilidade

Experimente a operação, altere o status e continue trabalhando.

Ajustar espaçamento entre letrasDefina a altura da linha e o espaçamento de caracteres apropriados para títulos e leituras longas.Experimente um parágrafo com várias linhas, não apenas um exemplo de frase. Linhas muito estreitas dificultam a leitura, e espaçamentos grandes entre letras podem destruir palavras e pontuação em tamanhos pequenos.Mantenha o texto legível ao dimensionarVerifique se há uma tela estreita e um nível de zoom de 200% para evitar cortes de texto ou sobreposição de conteúdo.Ao aumentar o tamanho da fonte ou zoom, os botões e tags devem se esticar de acordo com o conteúdo; Evite alturas fixas que cortem a segunda linha.Mantenha o conteúdo contrastante o suficienteCertifique-se de que o texto pequeno ainda seja fácil de ler e não use a cor como único indicador de significado.Verifique também o status de subtexto, espaço reservado e claro/escuro desativado; Letras minúsculas em fundos coloridos costumam ser fáceis de ignorar.

Complete a experiência

Verifique se há detalhes que são fáceis de perder ao colocar o design em uso.

Defina tamanhos mínimos de texto por funçãoDocumente os mínimos legíveis para o corpo do texto, rótulos e legendas e explique quando um estilo maior é necessário em vez de reduzir o texto para caber.Experimente o tamanho real da tela no dispositivo; O texto em uma imagem de visualização ampliada pode obscurecer problemas de legibilidade em tamanho real.Defina uma escala de tipo responsivaDocumente como os títulos e o corpo do texto mudam nas larguras das janelas de visualização, preservando a hierarquia e evitando alterações abruptas de tamanho.Se estiver usando tamanhos de fonte flexíveis, defina limites mínimos e máximos; Verifique se a etiqueta longa não está encolhida para manter apenas uma linha.

O progresso é salvo automaticamente neste navegador.

ORIENTAÇÕES

Como revisar

Verifique a hierarquia quando o texto for longo e ampliado

Substitua títulos por conteúdos mais longos e aumente o tamanho da fonte nos dispositivos. Mantenha a hierarquia, os sotaques vietnamitas, o espaçamento entre linhas e as ações relacionadas fáceis de ler, sem cortar o conteúdo.

EXEMPLOS

Exemplos de uso

Título longo em uma tag

O cartão tem título, descrição e botão abrir em duas linhas; Quando as letras são maiores, a etiqueta aumenta de altura em vez de cobrir o botão ou cortar a marca vietnamita.