19 habilidades de tipografia que cada designer deve saber

Sarah Elson Blocked Desbloquear Seguir Seguindo 27 de novembro de 2018

Mais de 90% de todas as informações da web consistem em texto. Embora os designers gastem muito tempo decidindo os gráficos, a interface e o estilo da página, uma quantidade igual de tempo é necessária para escolher a tipografia perfeita. Especialmente quando se trata de dispositivos móveis, a tipografia da Web para dispositivos móveis requer atenção especial, pois apresenta dois grandes desafios: espaço disponível e tamanho tipográfico. Este artigo irá retransmitir 19 dicas de tipografia necessárias para desbloquear uma interface do usuário impressionante em seu design da Web para dispositivos móveis com uma experiência rica para o usuário.

Dê algum espaço

A tipografia móvel não se trata de organizar letras na tela, trata-se de organizá-las de uma maneira que as torne legíveis para os usuários. Utilize o espaço em branco corretamente e forneça espaço adequado entre as letras, as linhas e os parágrafos para que o usuário possa ler o conteúdo adequadamente sem a necessidade de ampliar o zoom.

Tamanho apropriado da fonte

Você pode manter suas fontes da área de trabalho em um tamanho de 14px, mas quando o mesmo é feito em dispositivos móveis, isso pode resultar em conteúdo menor ou maior, dependendo da resolução do dispositivo. Verifique o tamanho da fonte em toda a resolução e use consultas de mídia para que a tipografia resultante da Web para dispositivos móveis seja legível em todos os dispositivos portáteis de diferentes resoluções.

Use Unidades de Medição Adequadas

Para o tamanho da fonte da web para celular, a tipografia não usa pontos (pt). Em vez disso, use ems ou rems. Isso é preferido pela maioria dos projetistas, já que essas unidades tornam o conteúdo escalável, já que elas são baseadas em porcentagem e não em qualquer tamanho estático.

Escolha cores contrastantes

Melhor contraste garante melhor legibilidade. Ao pensar sobre a cor da tipografia da web móvel, pense na comparação entre o claro e o escuro. Se o fundo da página for de cor escura, use fontes coloridas brilhantes. Por exemplo, fontes brancas no fundo preto e vice-versa.

Garantir melhor legibilidade

Há muitas fontes gratuitas e empolgantes disponíveis hoje, mas se você planeja usá-las em seu conteúdo, verifique todos os alfabetos para garantir que a família de fontes e o tamanho que você está usando tornem esses conteúdos legíveis. Não faz sentido usar essas fontes legais se o leitor não conseguir entender seu conteúdo.

Alinhar os textos corretamente

O alinhamento é um fator importante quando se trata de tipografia da web para celular. O cérebro humano gosta de ler o texto em blocos na tela pequena. Normalmente, os textos são alinhados à esquerda, o que significa que há uma borda irregular no lado direito do bloco. Ajuste-o corretamente e verifique se você está usando alinhamento 'justificado', isso não resulta em um espaço em branco que não seja consistente.

Definir o líder

A tipografia na web móvel exige uma liderança consistente (o espaço entre as linhas). Quando é muito pequeno, em um grande conteúdo, o fim de uma linha e o início da próxima são difíceis de seguir. Se for muito grande, resultará em espaços em branco desnecessários. Certifique-se de não interromper o fluxo suave de uma linha.

Encontrando seu ponto doce

Todas as fontes têm um ponto ideal. A combinação de tamanho de fonte e entrelinha onde eles garantem a melhor legibilidade e menos distorção causada pelo anti-aliasing padrão do navegador. Experimente o tipo de letra que você está usando e encontre aquele ponto ideal.

Utilização de espaço em branco

Espaços brancos são frequentemente utilizáveis. No caso de CTAs ou links clicáveis, use o espaço em branco para que eles possam ser distinguidos e clicados usando o índice ou o polegar. Como o usuário não está usando um mouse como em uma área de trabalho, o polegar ou índice é considerado o cursor, que tem cerca de um milímetro de espessura. Pense nisso e utilize os espaços em branco de forma eficaz.

Pegue a largura da tela na conta

Ao projetar a tipografia na web móvel, você precisa pensar em como as pessoas lêem textos. Normalmente, existem dois tipos de largura em um dispositivo móvel, vertical e horizontal. Portanto, ao projetar a tipografia, leve em consideração as larguras e defina o alinhamento e o espaçamento de acordo.

Faça sua tipografia distinguível

A tipografia da sua página da Web para dispositivos móveis deve ter um recurso distinto, na aparência, na cor ou em efeitos adicionais. Especialmente, nos conteúdos que você deseja que os usuários leiam, escolha cuidadosamente os tipos de letra para os títulos que os destacam do resto.

Verificar o dimensionamento e as proporções

Verifique o conteúdo em diferentes dispositivos móveis de diferentes resoluções. Além disso, amplie e reduza o zoom para garantir que a tipografia da Web para dispositivos móveis seja dimensionada e se ajuste à largura total da tela. A capacidade de resposta do seu conteúdo é imprescindível e você deve testá-lo e escrever consultas de mídia no caso de haver alguma interrupção para uma determinada resolução.

Levar a funcionalidade à conta

Existem muitos elementos de texto em um site para dispositivos móveis que permitem ao usuário executar determinadas ações, como enviar uma mensagem ou fazer uma chamada. A tipografia da Web para dispositivos móveis deve ser projetada com cuidado para garantir que os usuários entendam que um texto específico é, na verdade, uma CTA ou executa uma determinada funcionalidade.

A página de texto é pesada?

Se sua página é pesada em termos de texto, como um blog ou um artigo de notícias, muito pouca interação é necessária. O objetivo principal do usuário é ler, garantir que a tipografia da Web para dispositivos móveis seja projetada de acordo.

A página é interativa-pesada?

Se a sua página envolver mais ações de clique e clique, além de digitar, editar, etc., ajuste seus textos de acordo. Certifique-se de que o tamanho da fonte não seja menor do que 18px, para que os usuários possam entender que alguma ação deve acontecer quando eles clicam ou passam o mouse sobre o texto.

Web design responsivo

Como mencionado anteriormente, os pixels devem ser evitados durante a tipografia da Web para dispositivos móveis. Eles têm um padrão de dimensão fixa. Use em ou rem em vez disso. Eles são baseados em porcentagem e escaláveis. Quando o conteúdo é visualizado em um dispositivo móvel com resolução diferente, eles ajustam seu tamanho de acordo. Lembre-se de que o conteúdo de texto de sua página da Web responsiva deve ser dimensionável e ajustar seu tamanho automaticamente de acordo com a largura da tela. Você pode usar o LambdaTest para realizar seus testes responsivos. Com um único clique, você pode verificar a capacidade de resposta do seu site em mais de 44 dispositivos móveis com diferentes resoluções.

Emparelhamento de várias fontes

Ao projetar a tipografia da Web para dispositivos móveis, você pode combinar fontes diferentes para cabeçalho e parágrafo, rótulos etc. Mas certifique-se de que eles correspondam entre si. Misturar argelino para título e história em quadrinhos sem MS para um parágrafo é uma má ideia.

Fonte-peso: pesado ou leve?

Fontes móveis são relativamente menores quando comparadas a desktops. É preciso ter cuidado para torná-los legíveis ou clicáveis quando envolvem sua funcionalidade. A chave para decidir o peso da fonte é experimentar. Embora atualmente a tipografia em negrito e grande para a Web para dispositivos móveis seja uma tendência, você deve usar vários tipos de peso de fonte e testar o aplicativo em diferentes resoluções para garantir que não haja interrupção em nenhum lugar.

Mantenha o fundo em mente

Se o plano de fundo é estático e monocromático, como mencionado anteriormente, você pode usar cores de fonte do contraste oposto. Mas quando um fundo é uma imagem ou um vídeo, a escolha ideal seria experimentar cores diferentes e verificar qual delas se encaixa corretamente e tornar o conteúdo legível.

A tipografia é um ofício delicado. Os designers costumam passar a vida inteira aprimorando suas habilidades tipográficas. Com cada novo tipo de letra trazendo um novo desafio, temos certeza de que as dicas de tipografia móvel mencionadas acima serão úteis na próxima vez que você estiver criando uma nova página da web para celular. Além disso, lembre-se de realizar testes de compatibilidade entre navegadores para garantir que os tipos de letra ou estilos que você está usando funcionem corretamente em todos os navegadores. O LambdaTest pode ser usado para realizar testes de compatibilidade entre navegadores em mais de 2000 diferentes navegadores e suas versões. Certifique-se de que o tipo de letra é suportado em todas as navegações necessárias e apresente aos seus usuários a rica experiência do usuário que eles merecem.