A tipografia envolve muito mais do que escolher uma ótima fonte. Quando usado de forma eficaz, pode aprimorar a usabilidade, legibilidade, acessibilidade e hierarquia em uma interface. Neste artigo, compartilharei algumas dicas e princípios padrão da indústria para usar tipos como um profissional de criação de sites grátis em uma IU.

  1. Terminologia de tipografia

A terminologia tipográfica cria a base de nosso conhecimento sobre tipos. Pense em termos de tipografia como kerning, lead e weight como alavancas que podemos usar para criar designs mais legíveis e esteticamente agradáveis.

Rastreamento

Rastreamento ou espaçamento entre letras se refere a aumentar ou diminuir uniformemente o espaçamento horizontal entre um intervalo de caracteres.

Linha de base

A linha de base é a linha invisível sobre a qual repousa uma linha de texto.

Conduzindo

À esquerda é o espaçamento vertical entre duas linhas de base do tipo. Isso é mais freqüentemente chamado de altura de linha na era moderna. Ah, e também é pronunciado “ledding”.

Peso

Peso refere-se à espessura relativa do traço de uma fonte.

Serif / Sans Serif

Uma serifa é uma pequena linha ou traço regularmente anexado ao final de uma letra ou símbolo dentro de uma determinada fonte ou família de fontes. Uma fonte que não inclui serifas é uma fonte sem serifa (sans = sem).

criação de sites grátis

  1. Hierarquia

Não existem muitas interfaces sem palavras na página. A grande maioria dos designs de IU é composta de alguns elementos padrão – texto, retângulos / caixas, botões (indiscutivelmente um retângulo + texto) e ícones. É o que fazemos com esses elementos que podem construir ou quebrar uma interface.

A hierarquia nos ajuda a melhorar a capacidade de varredura e a legibilidade de uma interface, tornando mais fácil para os usuários encontrar informações importantes mais rapidamente.

Devíamos usar um texto maior e mais ousado para nosso texto mais importante, porque é para isso que os olhos das pessoas serão atraídos. Para nossas informações menos importantes, um texto menor e mais claro é o ideal.

  1. Altura e comprimento ideais da linha

O espaçamento entre linhas remonta aos dias da composição manual nas impressoras. Seu nome técnico, principal, refere-se a tiras finas de metal de chumbo que separavam as linhas do texto.

Na era moderna, a altura e a largura da linha são essenciais para garantir que nossos blocos de texto sejam facilmente legíveis em dispositivos de diferentes tamanhos.

Aqui estão algumas heurísticas úteis a seguir para a altura da linha:

Experimente entre 130% -180% para obter legibilidade e acessibilidade ideais. O objetivo é encontrar um ponto ideal – muito espaçamento e é fácil se perder, muito pouco e é difícil de ler – teste diferentes escalas em sua fonte.

Verifique o espaçamento entre linhas ao alterar fontes ou tamanhos de fonte. Fontes diferentes têm alturas máximas diferentes, portanto, verifique o espaçamento entre linhas para facilitar a leitura.

Limite o comprimento da linha a 70–80 caracteres. Longas linhas de texto podem ser intimidantes e confusas de seguir.

Fontes pequenas devem ter mais espaçamento porque fontes menores são mais difíceis de ler, então o espaço adicional facilita a análise.

  1. Priorize a legibilidade

Para garantir que nossa tipografia seja facilmente legível e acessível para pessoas com deficiências, como daltonismo, deficiência visual, deficiência auditiva e assim por diante, devemos seguir as Diretrizes de Acessibilidade de Conteúdo da Web (WCAG).

Aqui estão alguns padrões que otimizarão nossa IU para facilitar a leitura. Encontre mais em Accessible.org.

Regra de ouro; o tamanho do texto deve ser 16 no mínimo. Isso é obviamente específico do dispositivo, mas frequentemente permanece. Se for uma interface de TV, por exemplo, o texto deve ser ainda maior.

Deve haver uma taxa de contraste de cor de pelo menos 4,5: 1 entre todo o texto e o fundo. Baixe o plugin Stark para garantir que você está atendendo a esse padrão no XD, Sketch e Figma.

Não dependa apenas da cor para transmitir informações. Por exemplo, um estado de erro não deve ser apenas exibido com um contorno vermelho, use um ícone de aviso e um texto descritivo para alertar que um problema ocorreu.

Redimensionar texto (1.4.4): O texto deve ser redimensionado em até 200% sem afetar negativamente a capacidade de ler o conteúdo ou usar funções.

Imagens de texto (1.4.5): não use imagens de texto, a menos que necessário (por exemplo, logotipo).

  1. Limite o número de fontes

Misturar muitos tipos diferentes pode fazer nosso aplicativo parecer fragmentado e desleixado.

Em vez de introduzir novas fontes na interface, use famílias de fontes. As fontes da mesma família são projetadas para funcionar juntas, portanto, são flexíveis e consistentes.

  1. Defina as diretrizes de escala de tipo

Se você está relutante em criar diretrizes de tipografia do zero, experimente o gerador de escala de tipo de material para gerar tamanhos de fonte para parágrafos, cabeçalhos, botões e assim por diante.

Para criar diretrizes de escala de tipo para um projeto de IU, aqui está como faço isso:

Selecione uma fonte para trabalhar. Meus lugares favoritos para obter fontes de IU de alta qualidade são as fontes do Google ou fontes Adobe.

Estabeleça um tamanho de fonte básico. Começo estabelecendo a escala de tipo mais comumente usada para o texto do corpo como 16pt, por exemplo, em seguida, determino uma altura de linha adequada.

Altura da linha. Como mencionei anteriormente, experimente entre 130% -180% para uma legibilidade ideal. Essa proporção nem sempre é precisa, mas é um bom lugar para começar e depois fazer os ajustes necessários.

Defina uma escala. Uma escala fornece consistência, ritmo e hierarquia à nossa tipografia. Para definir a escala de tipo para h1, h2, h3, corpo, legendas, botões e assim por diante, precisamos de um valor de escala para multiplicar por nosso tamanho de fonte base. As escalas comuns para o tipo são 1,250x, 1,414x, 1,5x, 1,618x. Novamente, encontre uma escala que funcione para sua fonte e interface do usuário.

Escalas de teste em dispositivos. Teste a fonte com diferentes escalas em vários tamanhos de dispositivo para decidir o valor certo.

  1. Use palavras e frases reconhecíveis

As regras e métodos que estou mencionando neste artigo podem fazer muito para melhorar a legibilidade e a estética de nossa interface. Mas e quanto a melhorar a compreensão das palavras em nossa interface?

Para realmente reunir tudo, devemos seguir algumas regras para o que está realmente contido no texto.

Aqui estão algumas dicas para transmitir mensagens claras:

Evite jargões. A menos que estejamos projetando um aplicativo para especialistas. Evite terminologia específica do setor, como “armazenamento em buffer” ou “configuração”.

Escreva no tempo presente. Em vez de dizer: “a mensagem foi enviada”, diga “mensagem enviada”.

Mantê-lo curto e doce. É provável que haja erros na cópia UX que podem ser facilmente removidos com uma auditoria rápida. Em vez de dizer: “Apenas membros Premium têm acesso a esse recurso”, dizer “Inscreva-se no Premium para acessar” o manterá conciso e direto.

criação de sites grátis

Comece com o objetivo. Quando uma frase descreve um objetivo e a ação necessária para alcançá-lo, comece a frase com o objetivo. Em vez de dizer: “Arraste uma foto para a lixeira para removê-la deste álbum”, diga “Para remover uma foto deste álbum, arraste-a para a lixeira”.

Mantenha a consistência. Ao se dirigir ao usuário, certifique-se de permanecer na primeira ou segunda pessoa, o que for escolhido. Portanto, em vez de “editar seu local em minha conta”, diga “edite seu local em sua conta”.

  1. Enfatize informações importantes

Algum texto invariavelmente será mais importante do que o outro texto na página. É essencial enfatizarmos a importância de um elemento com peso, tamanho, cor ou todos os itens acima para destacar e distingui-lo de outros elementos.

Podemos usar cores e peso visual para enfatizar ou tirar a ênfase da tipografia. Ao usar um texto mais claro como suporte ou blocos de texto menos importantes, ele chama mais atenção para o texto mais ousado e vibrante.

Isso melhora a digitalização de uma interface e permite que os usuários façam as ações desejadas rapidamente, sem usar seu precioso poder cerebral.

  1. Considere o suporte de idioma

Se você está no campo do suporte multilíngue para o seu software, você sabe quem você é. Esta é uma restrição que pode alterar drasticamente nossos layouts de pixel perfeito, se não for considerada adequadamente.

A primeira coisa a ter em mente é o comprimento da palavra – ele pode variar entre os idiomas, mesmo aqueles que usam glifos semelhantes, como inglês e alemão. “Novo”, por exemplo, é uma palavra curta de 3 letras em inglês e se encaixa perfeitamente em alguns pixels, no entanto, em francês precisaríamos de espaço suficiente para “Nouveau” e seus 7 caracteres.

Para alguns idiomas como árabe e hebraico, considerar o alinhamento é importante porque eles são exibidos com caracteres que aparecem da direita para a esquerda. Essas fontes podem parecer menores do que as latinas no mesmo tamanho de fonte, exigindo ajustes no espaçamento e alinhamento entre linhas para que a tipografia funcione bem nessa IU para todos os idiomas.

  1. Em caso de dúvida, use fontes do sistema

A tipografia pode ser um desafio para acertar e às vezes simplesmente não vale a pena o incômodo. A boa notícia é que iOS e Android têm fontes de sistema nativas que suportam uma variedade de pesos, tamanhos, estilos e idiomas, para que possamos criar experiências de leitura confortáveis e bonitas em qualquer aplicativo.

No iOS, eles têm São Francisco (SF) e Nova York (NY). No Android, a fonte principal é Roboto e Noto é a fonte padrão para todos os idiomas não cobertos pelo Roboto.

Quando usamos estilos de texto com as fontes do sistema, também obtemos suporte para Tipo Dinâmico e os tamanhos de tipo de acessibilidade maiores, o que fornece flexibilidade adicional ao permitir que os leitores escolham seu tamanho de texto preferido.