Como criar um sistema tipográfico da marca
Um sistema tipográfico da marca transforma as famílias tipográficas já escolhidas em funções, hierarquia, escala, espaçamento e regras de uso reutilizáveis. Crie o sistema definindo primeiro a responsabilidade de cada função de texto, preserve as relações entre essas funções quando o formato mudar e valide tudo com conteúdo representativo antes de normalizar exceções.

Visão do sistema completo
Seis decisões que transformam fontes escolhidas em um sistema tipográfico reutilizável
Use a sequência como um modelo de implementação: cada etapa fecha uma relação entre função, tratamento, condição de uso e verificação, sem exigir valores numéricos idênticos em todos os formatos.
-
Definir funçõesFamília tipográfica → responsabilidade de comunicação → contexto de uso → exceção permitida.
-
Construir a hierarquiaPrioridade da informação → contraste coordenado de tamanho, peso, estilo e espaçamento.
-
Relacionar escala e espaçamentoTamanho base + relações de tamanho + entrelinha e ritmo vertical → níveis repetíveis e legíveis.
-
Fixar regras de usoFamílias, pesos, estilos e comportamentos aprovados → aplicação padrão; desvios → exceção explicitamente justificada.
-
Testar e adaptarLayout representativo → observar hierarquia e legibilidade → ajustar a menor variável relevante → testar novamente.
-
Diagnosticar inconsistênciasSintoma → causa possível → verificação → correção; normalize a mudança somente quando ela representar uma necessidade recorrente.
Regra de continuidade: entre formatos, preserve a relação e a função dos níveis tipográficos; altere valores exatos somente quando a condição de leitura ou de layout exigir.
O sistema tipográfico da marca atribui a cada função tipográfica um propósito e relaciona essas funções por meio de uma hierarquia tipográfica, escala tipográfica, espaçamento e regras de uso.
Essas relações conectam a prioridade da informação ao tratamento visual, de modo que títulos, texto corrido e texto de apoio possam ser aplicados de forma consistente, em vez de formatados caso a caso.
A legibilidade e o contraste devem ser verificados no conteúdo, no meio e no formato onde a tipografia será utilizada.
Escolhas numéricas para tamanho ou espaçamento funcionam, consequentemente, como pontos de partida ajustáveis, e não como regras universais.
O resultado é um sistema tipográfico reutilizável, cujas regras podem ser aplicadas, verificadas e adaptadas, preservando as relações pretendidas entre as funções do texto.
A construção desse sistema começa atribuindo a cada família tipográfica selecionada uma função e responsabilidade claras.
Índice
Estabeleça funções claras para cada fonte da marca
Cada fonte selecionada precisa de uma responsabilidade definida antes que a hierarquia e a escala possam ser aplicadas de forma consistente.
Uma função tipográfica da marca declara do que a fonte é responsável, o contexto de uso que atende e onde exceções a essa responsabilidade são permitidas.
A definição de funções começa com as famílias tipográficas já selecionadas, e não com a adição de fontes para preencher um conjunto predeterminado de categorias.
Uma mesma família tipográfica pode atender a várias funções quando variações de peso, tamanho ou tratamento fornecem as distinções de que o sistema precisa, enquanto uma fonte secundária ou de destaque é útil apenas quando tem uma função de conteúdo recorrente e distinta.
A seleção de famílias tipográficas é uma decisão anterior; esta etapa de planejamento começa após escolher as fontes da marca.
O exemplo abaixo nomeia responsabilidades, e não recomenda um número ou combinação específica de famílias tipográficas.
As categorias de função abaixo separam responsabilidades, e não preferências de seleção de fontes.
Uma função distinta tem uma responsabilidade de comunicação claramente declarada e recorrente no contexto de uso; uma função redundante duplica uma responsabilidade que outra família tipográfica já atende.
- Fonte primária: atribua a função primária à família tipográfica que atende à responsabilidade central de texto recorrente no contexto de uso definido.
- Fonte secundária: atribua uma função secundária apenas quando a família tipográfica oferece suporte a uma função de comunicação recorrente e distinta que a função primária não cobre.
- Fonte de destaque: reserve uma função de destaque para uma função controlada e restrita quando essa função for recorrente; caso contrário, a função adicional é redundante.
- Exceção de função: registre uma exceção quando um meio ou formato exigir um tratamento diferente, mantendo explícita a responsabilidade para aquele contexto de uso.
A definição clara de funções reduz a troca arbitrária entre famílias tipográficas em layouts que seriam similares e fornece à hierarquia posterior um conjunto estável de responsabilidades com as quais trabalhar.
Por exemplo, se duas fontes selecionadas podem ambas atender à mesma função de conteúdo recorrente sem uma distinção declarada, layouts semelhantes podem atribuir esse conteúdo de forma diferente; definir qual fonte é responsável pela função e quando uma exceção se aplica torna a responsabilidade explícita e favorece a consistência.
Definir responsabilidades das fontes primária, secundária e de destaque
Os rótulos de fonte primária, secundária e de destaque descrevem responsabilidades diferentes, não uma quantidade obrigatória de fontes.
Uma fonte primária pode carregar a comunicação mais proeminente e frequente, enquanto as funções secundária e de destaque existem apenas quando acrescentam uma função distinta.
Um sistema pode ter menos de três famílias tipográficas distintas mesmo quando contém múltiplas funções de texto, porque uma mesma família tipográfica pode atender a mais de uma responsabilidade.
Uma fonte secundária se justifica quando o contraste funcional apoia uma responsabilidade recorrente e distinta; uma fonte de destaque se justifica quando a ênfase limitada tem um propósito específico e controlado.
O diagrama distingue essas classes de responsabilidade pela proeminência relativa e frequência de uso, em vez de apresentá-las como uma fórmula fixa.
- Fonte primária: carrega a responsabilidade central de comunicação com a maior proeminência ou frequência no sistema. Sua restrição é a clareza de função: o uso frequente permanece vinculado à sua função definida, em vez de se estender a todo tratamento.
- Fonte secundária: apoia uma função recorrente onde o contraste funcional exerce uma função de suporte distinta. Pode ser omitida quando esse contraste não acrescenta uma responsabilidade separada.
- Fonte de destaque: é reservada para ênfase de uso limitado com um propósito específico e controlado. A função de destaque pode ser omitida quando não acrescenta uma função distinta além das responsabilidades já cobertas pela função primária ou secundária.
Atribuir cada fonte a funções de conteúdo específicas
Mapeie cada função de conteúdo recorrente para uma função tipográfica aprovada e um tratamento permitido, de modo que o mesmo tipo de conteúdo não seja formatado de forma diferente de um layout para outro.
Textos de destaque, títulos, texto corrido, rótulos, legendas e texto utilitário podem compartilhar uma mesma família tipográfica quando seus tratamentos aprovados tornam suas funções claras.
Atribua funções de leitura de alta prioridade de acordo com a ênfase e a legibilidade que exigem, enquanto funções de suporte podem usar tratamentos menos proeminentes dentro de uma função tipográfica aprovada.
O texto corrido deve priorizar a legibilidade, com comprimento de linha e espaçamento tratados como parte de seu tratamento permitido, enquanto textos de destaque e títulos podem usar maior proeminência e contraste.
Rótulos, legendas e texto utilitário apoiam o conteúdo principal e devem permanecer identificáveis sem exigir uma família tipográfica diferente para cada função.
O exemplo mapeia essas funções de conteúdo recorrentes para funções aprovadas dentro de um layout coerente.
- Textos de destaque e títulos: mapeie essas funções de conteúdo proeminentes para a função tipográfica aprovada responsável pela ênfase, usando apenas o tratamento permitido para essa função.
- Texto corrido: atribua o texto corrido à função tipográfica destinada à leitura contínua, com um tratamento que favoreça a legibilidade por meio de tamanho, comprimento de linha e espaçamento adequados ao layout.
- Rótulos: mapeie rótulos recorrentes para uma função tipográfica de suporte aprovada e um tratamento que mantenha o texto funcional curto distinto, sem atribuir outra família tipográfica apenas a essa função.
- Legendas: atribua legendas a uma função tipográfica de suporte com um tratamento que distinga o texto contextual, mantendo-o subordinado ao conteúdo que descreve.
- Texto utilitário: mapeie o texto utilitário para uma função tipográfica aprovada e um tratamento contido adequado à sua função de suporte e frequência de uso.
Quando uma mesma família tipográfica atende a várias funções de conteúdo, tamanho, peso ou espaçamento podem distinguir os tratamentos permitidos sem alterar a função tipográfica subjacente.
Mantenha o mapeamento explícito: cada função de conteúdo recorrente usa uma função tipográfica e um tratamento aprovados, em vez de acionar trocas de fonte ad hoc.
Construir uma hierarquia tipográfica clara
Uma hierarquia tipográfica ordena o texto por prioridade da informação, usando diferenças visuais para sinalizar qual conteúdo deve receber atenção primeiro e qual conteúdo o apoia.
A hierarquia tipográfica funciona quando cada nível de título e tratamento de texto corrido reflete consistentemente a importância relativa, em vez de depender apenas do tamanho.
Tamanho, peso, estilo e espaçamento contribuem juntos para o contraste, de modo que uma função de texto mais proeminente não precisa diferir do nível seguinte em todos os atributos.
O tamanho pode aumentar a proeminência, o peso ou o estilo podem fortalecer a distinção, e o espaçamento pode esclarecer as relações entre um nível de título e o conteúdo ao seu redor.
O contraste coordenado torna a prioridade visual mais clara do que alterar o tamanho enquanto outras relações relevantes permanecem ambíguas.
O exemplo anotado mostra como a prioridade da informação pode ser expressa por meio de diferenças coordenadas de proeminência, peso e espaçamento, mantendo o texto corrido como um nível de leitura estável.
Verifique a hierarquia tipográfica comparando níveis adjacentes: cada um deve ser distinguível o suficiente para comunicar uma mudança na prioridade da informação sem tornar cada diferença extrema.
Se dois níveis vizinhos parecem muito semelhantes, o sinal visual entre os grupos de informação se enfraquece; ajuste o tamanho, peso, estilo ou espaçamento relevante até que a distinção favoreça o significado e a escaneabilidade.
O exemplo ordenado abaixo ilustra a proeminência decrescente e a relação entre os níveis, em vez de prescrever um sistema de nomenclatura obrigatório ou uma especificação fixa.
- Texto de prioridade mais alta: sinaliza o foco principal da informação por meio da proeminência mais forte apropriada e da separação clara do conteúdo de apoio.
- Nível de título principal: identifica uma divisão importante de conteúdo com contraste suficiente tanto em relação ao texto de prioridade mais alta quanto ao nível seguinte.
- Nível de título de apoio: diferencia um grupo de informação subordinado, permanecendo visivelmente relacionado ao título principal acima dele.
- Texto corrido: carrega o conteúdo de leitura contínua com menos proeminência do que os títulos, mantendo a legibilidade e uma relação clara com o título que o precede.
- Texto de apoio: lida com informações secundárias com proeminência contida, permanecendo distinguível e legível em seu contexto.
Definir níveis de título por importância
Cada nível de título deve sinalizar um grau distinto de importância semântica, permanecendo parte do mesmo sistema tipográfico coordenado.
Diferencie os níveis de título pela proeminência relativa e pela relação com os níveis adjacentes, em vez de atribuir tamanhos de ponto ou proporções universais.
Tamanho, peso, estilo e espaçamento podem trabalhar juntos para criar o contraste necessário entre níveis adjacentes, e a combinação pode variar com o layout e o conteúdo.
O exemplo anotado demonstra a separação relativa entre níveis de título adjacentes por meio de diferenças coerentes de proeminência e espaçamento, em vez de tratar qualquer atributo visual isolado como regra.
Os critérios abaixo verificam distinções relativas em vez de tamanhos absolutos.
Aplique-os da importância semântica à execução visual para que cada nível de título tenha uma relação clara com os níveis ao seu redor.
- Importância semântica: atribua maior proeminência a um nível de título quando seu conteúdo tiver maior importância estrutural no contexto atual, mantendo os níveis inferiores visivelmente subordinados.
- Separação entre níveis adjacentes: diferencie níveis vizinhos com contraste suficiente em tamanho, peso, estilo, espaçamento ou uma combinação coordenada desses atributos para tornar suas funções distintas aparentes sem contraste excessivo.
- Consistência: use o mesmo tratamento para o mesmo nível de título em contextos equivalentes, de modo que sua importância relativa permaneça consistente dentro do sistema tipográfico.
- Adequação prática: verifique cada tratamento em seu layout real e ajuste a combinação de tamanho, peso, estilo ou espaçamento quando os níveis adjacentes estiverem insuficientemente distintos ou desnecessariamente distantes.
Definir níveis de texto corrido, rótulo, legenda e texto utilitário
Texto corrido, rótulo, legenda e texto utilitário são níveis de texto de apoio com diferentes tarefas de leitura, portanto seus tratamentos devem refletir diferentes requisitos de legibilidade, proeminência e densidade.
O texto corrido atende à leitura estendida, enquanto rótulos, legendas e texto utilitário apoiam tarefas de leitura mais curtas e específicas.
O texto corrido exige um tratamento que favoreça a legibilidade sustentada, incluindo tamanho, peso, espaçamento e comprimento de linha adequados ao seu contexto de leitura.
Textos de apoio curtos podem usar menor proeminência ou maior densidade quando a tarefa de leitura o permitir, mas a subordinação visual não deve ocorrer às custas da legibilidade.
A combinação exata de tamanho, peso e espaçamento depende, portanto, do conteúdo, do layout e das condições de leitura esperadas, em vez de uma especificação fixa.
O exemplo anotado demonstra essas diferentes tarefas de leitura em um layout, permitindo comparar a proeminência relativa e a legibilidade do texto corrido, rótulos, legendas e texto utilitário em contexto.
As categorias diferem porque suas tarefas de leitura diferem.
Associe cada tratamento à quantidade de leitura, à proeminência necessária, à densidade do conteúdo e às condições nas quais o texto precisa permanecer legível.
- Texto corrido: atende à leitura estendida, portanto priorize a legibilidade sustentada com proeminência suficiente e tamanho, peso, espaçamento e comprimento de linha adequados ao conteúdo e ao layout.
- Rótulo: identifica ou categoriza um elemento por meio de uma tarefa de leitura curta, portanto pode usar proeminência contida e tratamento compacto quando o rótulo permanece claramente legível em seu contexto.
- Legenda: apoia o conteúdo próximo com informações breves explicativas ou de identificação, portanto mantenha sua proeminência subordinada a esse conteúdo, mantendo espaçamento e legibilidade suficientes para uma leitura confortável.
- Texto utilitário: apoia tarefas de leitura funcionais curtas, portanto seu tratamento pode ser compacto e de proeminência relativamente baixa quando seu tamanho, peso e espaçamento ainda tornam a informação legível nas condições de leitura esperadas.
Definir uma escala tipográfica e um sistema de espaçamento consistentes
Uma escala tipográfica controla as relações de tamanho relativo entre as funções de texto, enquanto o espaçamento coordena a entrelinha, o ritmo vertical e a separação entre essas funções.
Juntos, a escala tipográfica e o sistema de espaçamento tornam a hierarquia repetível sem exigir que todo formato use valores numéricos idênticos.
Comece com um tamanho base adequado ao contexto de leitura e, em seguida, derive cada função de texto por meio de uma relação de tamanho relativo, em vez de tratar tamanhos individuais como escolhas isoladas.
Uma proporção de escala pode fornecer consistência matemática, mas nenhuma proporção única é universalmente correta; seu valor prático depende se a hierarquia resultante permanece clara para a densidade e o formato do conteúdo.
Coordene a entrelinha e o espaçamento com esses tamanhos relativos para que as funções mais proeminentes e de apoio permaneçam visualmente relacionadas.
Quando o formato mudar, preserve as relações pretendidas mesmo que os valores individuais precisem de ajuste.
Relações que precisam permanecer estáveis
- Tamanho relativo: relacione cada função de texto ao tamanho base para que as mudanças de proeminência sigam uma escala tipográfica repetível, em vez de decisões de tamanho isoladas.
- Espaçamento: coordene a entrelinha e o espaçamento vertical com a tarefa de leitura de cada função de texto para que a separação favoreça tanto a legibilidade quanto a hierarquia.
- Usabilidade prática: trate a consistência matemática como uma relação inicial e, em seguida, teste se a densidade do conteúdo, a hierarquia e o formato tornam a escala e o espaçamento resultantes utilizáveis no contexto.
Teste a escala tipográfica e o sistema de espaçamento combinados em layouts representativos, verificando se as funções de texto permanecem distinguíveis e legíveis sem separação excessiva ou insuficiente.
Se a hierarquia ou a legibilidade se enfraquecer em um formato diferente, ajuste os valores mantendo a mesma lógica relativa.
A consistência vem de relações repetíveis entre tamanho e espaçamento, e não de forçar todo contexto a um conjunto exato de valores.
Escolher um tamanho base e uma proporção de escala
O tamanho base serve como ponto de referência a partir do qual outras funções de texto derivam seus tamanhos relativos, enquanto a proporção de escala determina o grau de separação entre esses tamanhos derivados.
Uma proporção de escala maior cria maior contraste entre os níveis hierárquicos, enquanto uma proporção menor mantém suas diferenças de tamanho relativo mais próximas; nenhuma escolha é universalmente adequada sem considerar o contexto de leitura.
A legibilidade deve orientar se o tamanho base e os tamanhos derivados permanecem práticos, enquanto a densidade do conteúdo e o espaço disponível afetam quanta separação o formato pode acomodar.
O número de níveis hierárquicos também importa, pois a proporção de escala amplifica a separação relativa entre funções sucessivas.
Uma escala matematicamente coerente exige, portanto, teste contra o conteúdo e o formato reais, e não aceitação automática de seus tamanhos derivados.
Os critérios a seguir determinam se a relação entre tamanho base, proporção de escala e tamanhos derivados produz uma hierarquia praticamente utilizável.
Avalie-os em conjunto, pois aumentar o contraste pode esclarecer a separação entre níveis e também alterar a eficiência com que o conteúdo se ajusta ao espaço disponível.
- Legibilidade: verifique se o tamanho base e os tamanhos derivados permanecem confortáveis para leitura no formato e nas condições de leitura pretendidos.
- Densidade do conteúdo: confira se os tamanhos relativos resultantes preservam espaço suficiente para a quantidade de conteúdo sem enfraquecer a hierarquia pretendida.
- Espaço disponível: avalie se os tamanhos derivados e o contraste resultante se ajustam ao layout sem forçar as funções de texto a proporções impraticáveis.
- Profundidade da hierarquia: teste se a proporção de escala cria distinção suficiente entre os níveis hierárquicos necessários sem produzir separação excessiva entre as funções de menor e maior tamanho.
Definir entrelinha e espaçamento para cada função de texto
A entrelinha e o espaçamento vertical devem variar de acordo com a função de texto e suas condições de leitura, em vez de usar um único multiplicador em todo o sistema tipográfico.
O texto corrido, os títulos e o texto de apoio têm necessidades de espaçamento diferentes porque seu tamanho, peso, comprimento de linha e densidade de leitura diferem.
Comprimento de linha maior ou densidade de leitura maior pode exigir mais entrelinha para manter as linhas sucessivas claramente separadas, enquanto títulos maiores ou mais pesados podem usar entrelinha mais apertada quando suas linhas permanecem distintas.
O espaçamento vertical também apoia a hierarquia ao separar diferentes grupos de conteúdo e manter o texto relacionado visualmente agrupado.
Teste o valor em relação às métricas reais da fonte, tamanho, comprimento de linha, densidade de conteúdo e formato, em vez de presumir que um único multiplicador fixo se aplica a toda função.
As condições baseadas em função abaixo conectam cada configuração tipográfica ao seu requisito de espaçamento e à consequência resultante para a legibilidade ou a hierarquia.
Use essas relações como pontos de partida ajustáveis e verifique legibilidade e hierarquia juntas no contexto pretendido.
- Texto corrido: use entrelinha que favoreça a leitura sustentada no tamanho e comprimento de linha escolhidos; linhas mais densas ou mais longas podem exigir mais separação entre linhas para manter a legibilidade.
- Títulos: avalie a entrelinha em relação ao tamanho, peso e quebra do título; títulos maiores ou mais pesados podem usar entrelinha mais apertada quando as linhas adjacentes permanecem distintas, enquanto o espaçamento vertical deve preservar sua proeminência e separação do conteúdo ao redor.
- Rótulos e legendas: mantenha o texto de apoio compacto legível em seu tamanho e densidade escolhidos, usando entrelinha suficiente para texto com múltiplas linhas e espaçamento vertical suficiente para manter sua relação com o conteúdo que identifica ou descreve.
- Contextos densos ou restritos: teste qualquer redução na entrelinha ou no espaçamento vertical em relação à legibilidade e à hierarquia, em vez de comprimir toda função de texto na mesma proporção.
Definir regras de uso tipográfico
Regras de uso tipográfico são restrições reutilizáveis para aplicar o sistema tipográfico aprovado depois que suas funções foram definidas.
Elas especificam estados e condições permitidos para que decisões de design recorrentes possam ser aplicadas de forma consistente, em vez de serem resolvidas com base na memória ou no gosto individual.
As regras devem cobrir as famílias tipográficas aprovadas e suas atribuições de função, pesos e estilos permitidos, regras de tamanho, espaçamento e as condições sob as quais exceções são justificadas.
Cada regra deve distinguir a aplicação padrão de uma exceção permitida, para que os designers saibam o que pode ser usado diretamente e o que exige um motivo explícito.
Essas regras permanecem específicas da tipografia; documentá-las em diretrizes de marca mais amplas é uma tarefa de governança separada.
A lista a seguir transforma essas decisões tipográficas em restrições operacionais reutilizáveis.
Regras operacionais do sistema
- Famílias tipográficas aprovadas: permita apenas as famílias tipográficas já atribuídas ao sistema tipográfico para aplicações padrão; introduzir outra família tipográfica exige uma exceção justificada, em vez de uma substituição improvisada.
- Atribuições de função: aplique cada família tipográfica aprovada à sua função de conteúdo definida; alterar essa atribuição exige uma condição declarada de que a função padrão não pode atender adequadamente.
- Pesos e estilos: use os pesos e estilos aprovados para a função relevante; um peso ou estilo não aprovado deve ser tratado como uma exceção, em vez de uma variação rotineira.
- Tamanhos e hierarquia: preserve as relações de hierarquia definidas quando os tamanhos de texto se adaptam a um formato ou condição de leitura, em vez de escolher tamanhos isolados por gosto.
- Espaçamento: aplique as relações estabelecidas de entrelinha e espaçamento vertical para cada função de texto, ajustando-as apenas quando a condição de leitura ou o formato exigir uma exceção justificada.
- Exceções: documente por que um desvio é necessário, onde ele se aplica e se deve permanecer excepcional ou ser normalizado como um estado aprovado quando a mesma necessidade recorrer.
Exceções explícitas limitam desvios não documentados ao separar afastamentos intencionais de variações acidentais.
Por exemplo, se uma função de título conhecida precisar de ênfase mais forte, a regra orienta o designer a usar seus tratamentos aprovados ou documentar uma exceção, em vez de improvisar uma fonte ou peso extra.
Isso mantém as regras de uso tipográfico reutilizáveis, ao mesmo tempo que permite mudanças justificadas quando a aplicação padrão não se adequa ao contexto.
Controlar pesos, estilos, caixa e ênfase
Peso da fonte, estilo, caixa e ênfase devem sinalizar significado ou prioridade dentro da hierarquia tipográfica, em vez de adicionar decoração arbitrária.
Cada tratamento precisa de um uso permitido para que o contraste pretendido permaneça reconhecível sem criar variantes descontroladas.
A ênfase proposital usa um tratamento aprovado quando comunica uma mudança distinta de significado, função ou proeminência; a ênfase redundante adiciona tratamentos sem acrescentar um propósito de comunicação distinto.
Peso da fonte, estilo itálico e caixa podem criar contraste, mas múltiplos tratamentos não devem ser empilhados a menos que cada um contribua com significado distinto.
Combinações repetidas ou desnecessárias podem criar competição visual e enfraquecer a consistência dos padrões de ênfase estabelecidos.
Aplique os critérios abaixo selecionando o tratamento mínimo necessário para comunicar a ênfase pretendida.
- Peso da fonte: use um peso aprovado quando maior ou menor proeminência apoiar a função de texto e a hierarquia; adicionar peso sem um propósito de ênfase distinto cria contraste redundante e aumenta o risco de uso excessivo.
- Estilo: reserve um estilo aprovado, como o itálico, para situações em que ele comunica uma distinção ou ênfase definida; o uso repetido de um estilo sem um significado separado pode reduzir sua utilidade como sinal.
- Caixa: use a capitalização aprovada quando ela distingue uma função definida, como um tratamento de rótulo, preservando a legibilidade nesse contexto; alterar a caixa apenas para obter um impacto visual mais forte cria outra variante sem necessariamente acrescentar significado.
- Combinações de ênfase: combine peso, estilo ou caixa apenas quando cada tratamento contribuir com um propósito de comunicação distinto; caso contrário, use a ênfase mínima permitida necessária para criar o contraste exigido sem competição visual desnecessária.
Definir limites de alinhamento e comprimento de linha
O alinhamento e o comprimento de linha devem apoiar o fluxo de leitura de acordo com o conteúdo real, a direção de leitura e as condições do formato, em vez de seguir uma configuração universal.
Para texto corrido, a medida adequada depende de fatores como tamanho da fonte, métricas da fonte, largura disponível e a quantidade de leitura contínua, enquanto textos curtos de destaque podem usar relações de comprimento de linha diferentes porque sua tarefa de leitura é diferente.
O alinhamento do texto deve acompanhar a direção de leitura e o tipo de conteúdo. Em português, o alinhamento à esquerda é o ponto de partida mais previsível para texto corrido; centralização funciona melhor em trechos curtos, enquanto texto justificado deve ser testado para evitar espaçamentos irregulares que prejudiquem a leitura.
O comprimento de linha afeta a quantidade de texto que aparece antes de o leitor passar para a próxima linha, mas uma contagem de caracteres isolada não determina a legibilidade, pois a largura dos caracteres varia com a família tipográfica, o tamanho e as métricas da fonte.
Texto corrido extenso, portanto, precisa de uma medida adequada à leitura sustentada, enquanto textos curtos de destaque podem usar uma medida mais larga ou mais estreita quando seu tamanho, proeminência e duração limitada de leitura tornam esse tratamento apropriado.
Os critérios abaixo determinam o alinhamento e a medida adequados ao conectar cada variável à sua condição de leitura e implicação prática.
- Direção de leitura: escolha um alinhamento que favoreça a direção na qual o texto é lido e forneça um ponto de partida previsível para linhas sucessivas; avalie um alinhamento alternativo quando o conteúdo tiver um propósito funcional ou de exibição diferente.
- Tipo de conteúdo: atribua ao texto corrido extenso uma medida que favoreça a leitura contínua, enquanto avalie títulos curtos e texto de destaque de acordo com sua tarefa de leitura mais curta, em vez de aplicar o limite do texto corrido sem alteração.
- Medida disponível: avalie o comprimento de linha em relação ao tamanho da fonte, métricas da fonte, largura disponível e contagem de caracteres resultante; trate a orientação de contagem de caracteres como contextual, e não como um limite universal.
- Layout ao redor: mantenha o alinhamento e a medida da linha consistentes com o layout estabelecido quando essa relação favorecer a escaneabilidade e a legibilidade, e ajuste-os quando o conteúdo ou o formato criar uma condição de leitura materialmente diferente.
Para texto corrido de leitura contínua, cerca de 45–75 caracteres por linha, incluindo espaços, é uma faixa de partida útil para testar a medida. Ela não define um comprimento ideal universal: família tipográfica, tamanho, idioma, suporte, largura disponível e condições de leitura podem exigir uma medida diferente.
Verifique a medida resultante com conteúdo representativo no formato pretendido, verificando se as transições de linha, a escaneabilidade e a legibilidade permanecem adequadas à tarefa de leitura.
Testar o sistema tipográfico em layouts representativos da marca
O teste do sistema tipográfico deve usar um layout representativo, pois definições de estilo isoladas não mostram como as funções aprovadas, a escala tipográfica e o espaçamento se comportam sob restrições reais de conteúdo.
Testar mais de uma condição representativa pode expor problemas de hierarquia, legibilidade e consistência de função que podem não aparecer em um único layout de teste.
Selecione situações de conteúdo contrastantes sem transformar o teste em uma auditoria de marca mais ampla.
Um layout compacto pode expor problemas causados por espaço limitado, funções de texto curtas e níveis hierárquicos próximos, enquanto um layout com muito conteúdo pode revelar problemas diferentes quando texto corrido mais longo e múltiplos níveis hierárquicos precisam coexistir.
Aplique o mesmo sistema tipográfico aprovado a ambas as condições para que as diferenças observadas possam ser atribuídas à condição do layout, e não a uma alteração desnecessária no sistema.
Um layout bem-sucedido deve, portanto, ser tratado como evidência para aquela condição testada, e não como validação universal para todo formato.
Registre cada falha como uma relação observada entre a condição do layout e a configuração tipográfica aplicada; em seguida, ajuste a menor variável relevante, como um tratamento de função, uma relação de escala tipográfica ou uma relação de espaçamento.
A sequência abaixo mantém cada teste observável e exige um novo teste após um ajuste antes que o estado revisado seja aceito.
Ciclo de validação
- Selecionar conteúdo representativo: escolha situações de conteúdo realistas que coloquem diferentes pressões sobre o sistema tipográfico, incluindo um layout compacto e um layout com muito conteúdo, quando apropriado.
- Aplicar o sistema: use as funções tipográficas, a escala tipográfica e as relações de espaçamento aprovadas, sem introduzir alterações tipográficas não relacionadas durante o teste.
- Observar o resultado: inspecione a hierarquia, a legibilidade e a consistência de função em cada layout representativo, anotando onde o estado tipográfico aplicado se torna pouco claro ou impraticável sob aquela condição.
- Registrar falhas: identifique a condição específica e a variável tipográfica associada a cada problema observado para que o ajuste permaneça direcionado, em vez de se tornar uma reformulação ampla.
- Ajustar e testar novamente: altere a menor variável necessária, reaplique o sistema tipográfico ao layout representativo afetado e teste novamente o resultado antes de reter o ajuste.
Verificar hierarquia, legibilidade e consistência de função
A verificação tipográfica deve conferir se o contraste da hierarquia mantém níveis adjacentes distinguíveis, se o texto corrido permanece legível e se a adesão à função corresponde ao sistema tipográfico aprovado.
Use condições observáveis de aprovação/reprovação para hierarquia, legibilidade, uso de função, consistência de espaçamento e controle de exceção, em vez de julgamentos estéticos subjetivos.
Critérios observáveis de aprovação
- Contraste da hierarquia: verifique níveis hierárquicos adjacentes em conteúdo representativo. Aprovado quando cada nível é distinguível do nível ao lado; reprovado quando níveis adjacentes são semelhantes demais para comunicar sua distinção pretendida.
- Legibilidade do texto corrido: verifique o texto corrido em seu comprimento de linha e espaçamento aplicados nas condições de layout testadas. Aprovado quando o texto extenso permanece legível nesse contexto; reprovado quando o tratamento aplicado interfere na leitura sustentada.
- Adesão à função: verifique se cada função de conteúdo recorrente usa sua função tipográfica e tratamento aprovados. Aprovado quando as atribuições correspondem ao sistema definido; reprovado quando uma função usa uma família tipográfica, peso, estilo ou outro tratamento não aprovado sem uma exceção documentada.
- Consistência do espaçamento: verifique funções de texto equivalentes em condições comparáveis quanto às relações de espaçamento aprovadas. Aprovado quando essas relações permanecem consistentes; reprovado quando funções equivalentes usam variações de espaçamento inexplicadas.
- Controle de ênfase: verifique se os pesos, estilos ou caixa usados para ênfase pertencem ao tratamento aprovado para aquela função. Aprovado quando a ênfase corresponde à regra de uso definida; reprovado quando um estilo não aprovado aparece sem uma exceção explícita.
- Controle de exceção: verifique todo desvio de uma função ou tratamento aprovado. Aprovado quando a exceção está documentada e limitada à sua condição declarada; reprovado quando o desvio não está documentado, caso em que deve ser documentado como uma exceção justificada ou corrigido para corresponder ao sistema aprovado.
Adaptar tamanhos de fonte e espaçamento para diferentes formatos
A adaptação de formato pode alterar os valores exatos de tamanho de fonte e espaçamento quando uma nova restrição de formato modifica o espaço disponível ou as condições de leitura, enquanto a hierarquia relativa e cada função de texto devem permanecer reconhecíveis.
O objetivo é a consistência nas relações entre as funções, em vez de valores numéricos idênticos entre formatos.
O espaço disponível pode exigir tamanhos de fonte menores ou maiores, ou espaçamento mais apertado ou mais solto, quando o tratamento existente não se ajusta mais ao formato adequadamente.
A distância de visualização pode justificar um tamanho de fonte diferente quando o texto precisa permanecer legível sob uma condição de leitura alterada, enquanto uma maior densidade de conteúdo pode exigir ajustes controlados de espaçamento para acomodar o conteúdo sem achatar a hierarquia relativa.
Essas mudanças devem responder à restrição específica do formato, em vez de aplicar uma regra de escala a todo formato.
Preserve a relação entre as funções de texto mesmo quando seus valores exatos mudam.
Teste novamente a tipografia ajustada com conteúdo representativo para verificar se a hierarquia e a legibilidade permanecem claras sob a nova condição.
A governança mais ampla além da adaptação de formato específica da tipografia pertence à consistência da marca entre canais; aqui, o foco permanece em preservar as relações entre as funções enquanto os valores de tamanho de fonte e espaçamento se adaptam.
- Avaliar a restrição: identifique se o espaço disponível, a distância de visualização, a densidade do conteúdo ou outra condição de formato afeta a linha de base tipográfica atual.
- Ajustar a variável: altere o valor de tamanho de fonte ou espaçamento afetado, preservando a relação pretendida entre as funções de texto.
- Verificar o resultado: confira se o tratamento ajustado mantém a hierarquia relativa e a legibilidade em conteúdo representativo, em vez de julgar valores numéricos isoladamente.
- Testar novamente para consistência: teste novamente o sistema ajustado no formato de destino e retenha a alteração quando as relações entre as funções permanecerem reconhecíveis sob aquela condição.
Solucionar problemas de comportamento tipográfico inconsistente
O comportamento tipográfico inconsistente se manifesta como desvios observáveis da hierarquia aprovada, das atribuições de função tipográfica, da escala, do espaçamento ou das regras de uso.
Um sintoma como hierarquia concorrente, uma troca de fonte inexplicada, um tamanho único repetido ou inconsistência de espaçamento indica uma condição a investigar, não uma causa confirmada.
O mesmo sintoma pode ter mais de uma causa possível; por isso, verifique a configuração tipográfica aplicada antes de escolher uma direção corretiva.
Por exemplo, hierarquia concorrente pode indicar distinção insuficiente entre níveis aprovados, um tratamento não aprovado ou um ajuste específico de formato que alterou a relação pretendida.
Uma troca de fonte inexplicada pode indicar desvio de função tipográfica ou uma exceção aplicada fora de sua condição definida.
A tabela de diagnóstico separa sintomas observáveis de causas possíveis, verificações e direções corretivas.
| Sintoma | Causa Possível | Verificação | Direção Corretiva |
|---|---|---|---|
| Hierarquia concorrente | Níveis hierárquicos adjacentes podem ter perdido sua distinção pretendida, ou um tratamento não aprovado pode estar adicionando proeminência não intencional. | Compare os níveis afetados com suas relações aprovadas de tamanho, peso, estilo e espaçamento, e verifique se alguma exceção se aplica. | Após a verificação, restaure a relação aprovada ou documente e limite uma exceção justificada. |
| Trocas de fonte inexplicadas | Uma função tipográfica pode ter se desviado de sua função de conteúdo definida, ou uma exceção pode estar aparecendo fora de sua condição permitida. | Verifique o conteúdo afetado em relação à sua função tipográfica aprovada e a qualquer exceção documentada para aquele contexto. | Retorne o conteúdo à sua função aprovada ou corrija o escopo da exceção verificada. |
| Tamanhos únicos repetidos | A escala estabelecida pode não estar sendo aplicada consistentemente, ou uma necessidade recorrente de formato pode ter sido tratada por meio de ajustes isolados. | Compare os tamanhos repetidos com as relações de escala aprovadas e verifique se a mesma condição se repete em conteúdo equivalente. | Remova valores únicos não suportados ou, quando a necessidade recorrente for verificada, normalize um ajuste controlado dentro do sistema. |
| Espaçamento inconsistente | Funções de texto equivalentes podem estar usando estados de espaçamento diferentes, ou um ajuste de espaçamento específico de formato pode ter se espalhado além de sua condição pretendida. | Compare a entrelinha e o espaçamento vertical para funções equivalentes sob condições de layout comparáveis e verifique quaisquer exceções documentadas. | Restaure a relação de espaçamento aprovada ou limite um ajuste verificado à condição que o exige. |
A direção corretiva deve ter como alvo a falha verificada de regra, função tipográfica, escala, espaçamento ou exceção, em vez de apenas o sintoma visível.
Após a correção, verifique novamente a tipografia afetada sob a mesma condição e normalize uma alteração somente quando a verificação mostrar que ela representa um requisito recorrente do sistema, em vez de uma inconsistência isolada.
Reduzir funções de texto sobrepostas ou redundantes
Funções de texto sobrepostas tornam-se redundantes quando duas funções atendem à mesma tarefa de leitura sob condições equivalentes ou são visualmente semelhantes a ponto de não acrescentarem distinção útil à hierarquia.
Compare o que cada função de texto deve comunicar antes de decidir se a sobreposição exige consolidação ou diferenciação.
Comece pela função: se duas funções atendem à mesma tarefa de leitura sob as mesmas condições, a sobreposição pode indicar redundância real.
Se as tarefas de leitura diferem, mas tamanho, peso ou outro tratamento são semelhantes demais para tornar essa distinção visível, a diferenciação pode ser mais apropriada do que a consolidação.
Preserve funções separadas quando elas apoiam tarefas de leitura genuinamente diferentes, mesmo que alguns atributos visuais sejam compartilhados.
Consolide apenas quando a duplicação funcional for demonstrada, em vez de inferida apenas pela aparência.
Decidir entre consolidar e diferenciar
- Verificar sobreposição funcional: compare as duas funções por tarefa de leitura, função de conteúdo e valor da informação. Se ambas atendem à mesma função sob condições equivalentes, a redundância pode justificar a consolidação em uma função.
- Verificar semelhança visual: compare tamanho, peso, estilo, espaçamento e outras pistas de aparência. Se as funções atendem a tarefas de leitura diferentes, mas parecem muito semelhantes para apoiar a hierarquia pretendida, mantenha ambas e aumente a diferenciação em vez de remover uma.
- Verificar consequência na hierarquia: verifique se a sobreposição faz com que os leitores interpretem duas funções como o mesmo nível ou obscurece a relação pretendida entre elas. Se a hierarquia permanece clara apesar de alguns traços visuais compartilhados, funções separadas ainda podem ser apropriadas.
- Escolher a correção mais simples: consolide funções quando suas funções se duplicam genuinamente; diferencie seu tratamento quando suas funções são distintas, mas sua aparência cria uma colisão de funções. Preserve ambas quando cada função de texto continua a atender a uma tarefa de leitura separada.
Remover exceções não planejadas de fonte, peso e tamanho
Valores não planejados de fonte, peso e tamanho devem ser rastreados até seu contexto e função pretendida antes de serem removidos ou retidos.
Cada exceção tipográfica precisa de um motivo claro e de um impacto explícito na consistência para que a decisão possa distinguir um caso especial justificado de um desvio acidental.
Um valor inesperado tem mais probabilidade de representar desvio tipográfico quando não tem função documentada, não resolve uma condição recorrente de conteúdo ou aparece apenas como uma escolha isolada.
Uma exceção justificada pode ser mantida quando seu contexto e sua função pretendida são explícitos; se a mesma necessidade se repetir, o valor pode precisar ser incorporado ao sistema como valor aprovado, em vez de reaparecer informalmente.
Valores não aprovados repetidos não devem se acumular em um sistema paralelo sem uma decisão explícita.
Audite cada caso, desde a identificação até o motivo, impacto e ação de reter, normalizar ou remover.
- Identificar o valor: registre a fonte, peso ou tamanho não planejado exatamente como aparece e observe o contexto em que é usado, para que a exceção possa ser avaliada em relação ao sistema aprovado.
- Rastrear a função pretendida: verifique qual função de texto aprovada o valor está atendendo e se o desvio atende a uma condição distinta de leitura ou layout, em vez de duplicar um tratamento existente.
- Verificar o motivo: determine se a exceção tem uma justificativa funcional explícita. Se não existir um motivo claro e a função aprovada puder atender ao mesmo propósito, trate o valor como provável desvio, em vez de um caso especial justificado.
- Avaliar o impacto na consistência: verifique se o valor enfraquece o reconhecimento da função, cria tratamentos únicos repetidos ou altera relações hierárquicas em conteúdo comparável. Um desvio sem impacto material na consistência ainda pode ser retido quando sua condição especial é definida.
- Escolher reter ou normalizar: retenha uma exceção justificada quando ela estiver limitada a um contexto específico; normalize-a quando a mesma necessidade recorrer e deva se tornar um estado aprovado explícito dentro do sistema.
- Remover desvios não suportados: remova o valor não aprovado quando seu propósito duplicar a função pretendida e nenhuma exceção justificada permanecer, evitando que escolhas repetidas e isoladas de fonte, peso ou tamanho se tornem um sistema paralelo não documentado.