7 regras simples para tipografia móvel
Você provavelmente já ouviu falar que a boa tipografia é invisível, mas é mais correto dizer que uma boa tipografia torna o ato de ler fácil.
Quando o olho viaja ao longo de uma linha de texto, o faz em saltos, chamados sacadas; você não lê letras, nem mesmo palavras, você lê instantâneos de partes de palavras e seu cérebro preenche o que espera encontrar. Se o cérebro é surpreendido, ele envia os olhos de volta para verificar se a suposição estava correta. Boa tipografia minimiza o trabalho que seus olhos têm que fazer criando um fluxo suave ao longo da linha.
Dispositivos móveis têm desafios inerentes para qualquer tipógrafo: o espaço é limitado e a luz do ambiente é frequentemente fraca. Mas, ao fazer ajustes simples nas técnicas que já usamos para a Web, podemos melhorar a legibilidade em dispositivos móveis.
1. Dê-se espaço
Ao contrário da crença popular, a tipografia não é sobre o arranjo de pequenas linhas onduladas em uma tela; tipografia é em grande parte sobre o espaço dentro e ao redor deles.
A tipografia deve muito menos às formas de letras do que ao espaço que elas moldam
Para entender isso, é útil entender de onde vieram as fontes: o buraco no meio de um 'o' (e um 'b', 'c', 'p', etc.) é chamado de “contador”. estavam sendo esculpidos em metal para uso nas prensas de impressão originais, esses contadores foram criados por um punção de metal que foi esculpido e, em seguida, levado a um prato. Os primeiros designers de tipos estavam realmente trabalhando com as formas que não imprimiam. A tipografia deve muito menos às formas de letra do que ao espaço que elas moldam.
Quando falamos de hierarquia, geralmente queremos dizer
através de
e, possivelmente, para
. Mas há uma hierarquia adicional que afeta o fluxo de uma linha, ou parágrafo, e essa é a hierarquia espacial: o espaço entre as letras é menor que o espaço entre as palavras, o espaço entre as palavras é menor que o espaço entre as linhas.
Para uma ótima legibilidade no celular, preste atenção especial à hierarquia espacial, o agrupamento de caracteres em estilo gestalt em palavras, linhas e parágrafos é ainda mais essencial à luz natural.
2. Obtenha a medida
Medida é o comprimento de uma linha de texto. Ou, mais precisamente, é o comprimento ideal para uma linha de texto, já que é raro que cada linha se encaixe exatamente.
A medida ideal geralmente aceita para uma leitura confortável é de cerca de 65 caracteres. A duração física da medida dependerá do design da fonte, do rastreamento (veja abaixo) e do texto exato que você está usando. Os primeiros 65 caracteres deste artigo, ambientados no PT Serif, possuem 26.875em de largura, em Open Sans, 28.4375em, no Ubuntu, 27.3125em; se eu tivesse adicionado itálico, letras maiúsculas pequenas ou uma dúzia de outros detalhes tipográficos, ele iria variar ainda mais.
É raro que 65 caracteres se estendam até a borda de um navegador de desktop, mas na maioria dos dispositivos móveis 65 caracteres (se exibidos grandes o suficiente para serem legíveis) se estendem além dos limites do navegador. Consequentemente, para dispositivos móveis, você é forçado a reduzir sua medida.
Não há um padrão comumente aceito para medir em uma tela móvel, no entanto, tradicionalmente, colunas estreitas de texto em jornais ou revistas aspiram a 39 caracteres. Como essa medida ideal foi testada ao longo dos séculos, ela nos serve bem para a tipografia móvel.
3. Solte e aperte a guia
Liderar é o espaço entre linhas, e quando ajustado com muita força, faz com que o salto sacádico entre o final de uma linha e o início do próximo seja difícil de seguir. Quando definidos de forma muito frouxa, as lacunas entre as palavras começarão a se alinhar, criando o que geralmente é chamado de rios, interrompendo o fluxo suave da linha.
l – r: líder ideal, muito apertado, muito solto.
O padrão usual de liderança é de cerca de 1,4em, mas na minha experiência é muito apertado para as telas: uma das principais características de um tipo de letra que funciona bem na tela são grandes contadores e contadores grandes exigem um pouco mais de liderança para manter a hierarquia espacial .
Invertendo essa regra, uma medida mais curta requer menos liderança. Então, enquanto você provavelmente definirá sua liderança um pouco mais flexível para estilos de área de trabalho, lembre-se de ajustá-la para telas de celular.
4. Encontre o ponto ideal
Todas as fontes têm pelo menos um ponto ideal; uma combinação do tamanho em que eles se reproduzem melhor na tela, e o ponto em que o anti-aliasing aplicado no navegador distorce o design do tipo de letra o mínimo possível.
O ponto ideal é geralmente o ponto em que a maioria dos traços se alinha com a grade de pixels - fontes de pixels, se você se lembrar delas, só funcionou quando dimensionadas para o ponto ideal.
Definir uma fonte para o seu ponto ideal resulta em maior contraste. O contraste é particularmente importante ao projetar para dispositivos móveis devido ao potencial de ofuscação de distração fora do seu laboratório de dispositivos sutilmente iluminado.
Você verá que pequenos ajustes na entrelinha empurram e afastam as linhas de pixels inteiros. Na minha opinião, o contraste supera as telas para dispositivos móveis, por isso, se você tiver que comprometer a liderança para manter linhas em pixels inteiros, faça isso.
A abordagem padrão para projetistas é definir o uso de uma grade de linha de base, mas, para dispositivos móveis, precisamos usar a altura x (a altura x é literalmente a altura da letra minúscula 'x'). Sabemos por estudos de legibilidade que o cérebro reconhece o topo das palavras, não o fundo, então, para alcançar um fluxo sacádico maior, precisamos garantir que o topo de nossos personagens esteja mais alinhado aos pixels.
5. Não perca o seu pano
Um trapo, é a borda de um bloco de texto. A maior parte do que você lê está alinhada à esquerda (pelo menos para idiomas baseados no latim), resultando em uma borda direita irregular .
Quando seus olhos saltam de uma extremidade a outra da linha, o cérebro é mais capaz de julgar o ângulo e a distância do próximo salto, se todos os saltos forem consistentes - pense nele correndo entre degraus, é muito mais rápido se eles estiverem espaçados de forma consistente. Por esse motivo, a borda esquerda do texto deve ser plana, com cada linha começando no mesmo local (o oposto é verdadeiro para idiomas que são lidos da direita para a esquerda).
Como resultado, você nunca deve centralizar o alinhamento de mais de duas ou três linhas de texto.
Muitas vezes, o texto é justificado, o que significa que as palavras na linha estão igualmente espaçadas, de modo que não há trapo em nenhum dos lados. (Eu suspeito que o texto justificado esteja na moda porque o design responsivo ensinou os designers a pensar em blocos.) O texto justificado resulta em espaços em branco inconsistentes, e nos piores casos leva a algumas palavras em uma linha, o que é seriamente chocante. O problema com o texto justificado é exacerbado por uma medida mais curta, de modo que o texto justificado pode ser ilegível no celular.
l – r: alinhado à esquerda, alinhado ao centro, justificado.
Se a limpeza for realmente importante para você, hifenize o texto para suavizar o pano, mas nunca justifique o texto no celular.
O texto à direita irregular tem um benefício adicional no celular: o texto é lido com frequência em situações de distração e os leitores freqüentemente olham para longe do texto - para verificar o nome de uma estação ou atender uma chamada. Um pano cria uma forma aleatória na coluna da direita que ajuda o olho a realocar sua última posição, com mínima releitura.
6. Reduza o contraste
Embora desejemos incentivar o contraste entre texto e fundo, queremos reduzi-lo entre diferentes níveis de tipos.
No celular, substancialmente menos texto é visível e, assim, o contraste se torna exagerado
A razão para isso é que nossos cérebros julgam a importância com base no contexto. Seus títulos podem ter duas ou até três vezes o tamanho do texto do seu corpo na área de trabalho, e isso funciona porque há mais texto na tela. No celular, substancialmente menos texto é visível e, assim, o contraste se torna exagerado.
A maioria dos designers usa uma sequência de Fibonacci de algum tipo para dimensionar o texto. Para celular, aperte as taxas para reduzir o contraste dos tamanhos de tipo. Por exemplo, se você estiver usando a proporção áurea para aumentar o tamanho, estará multiplicando por 1,618. Para dispositivos móveis, use a proporção menor e multiplique por 1.382.
As telas da área de trabalho toleram escalas tipográficas mais extremas do que as telas móveis.
7. Ajuste o rastreamento para dimensionar
Quando ajustamos nossos tamanhos de fonte para celular, precisamos estar cientes das alterações necessárias no acompanhamento.
(Deixe-me começar por dizer que você não deve ajustar o kerning. Kerning é o espaçamento de dois pares de letras para que o espaço entre eles seja opticamente consistente com o espaço entre os outros caracteres. Kerning foi adicionado à fonte quando foi construído e provavelmente demorou meses. Se você selecionou uma fonte construída profissionalmente, ela foi feita corretamente e, se você acredita que ela não foi feita corretamente, encontre uma fonte diferente.)
O rastreamento não é kerning. Rastreamento é o espaçamento entre letras aplicado a todos os caracteres na fonte. Você normalmente não deve ajustar o rastreamento também.
As exceções a essa regra são para texto grande, como cabeçalhos e texto pequeno, como notas de rodapé. Um texto maior requer menos rastreamento e um texto menor requer mais rastreamento. O primeiro é devido ao agrupamento, e o último é para beneficiar o contraste. Se você fez alterações nos títulos, ou se estiver usando um tipo de exibição que normalmente tem um acompanhamento mais preciso, talvez seja necessário afrouxar o rastreamento à medida que você reduz a escala.
Resumo
A tipografia é uma arte que os designers passam a vida inteira aperfeiçoando, precisamente porque cada texto, cada tipo de letra e cada tecnologia traz novos desafios. Não existem regras rígidas e rápidas que sempre funcionem em todas as situações.
Quando você está pensando em ler, há três princípios que você precisa ter em mente: um fluxo suave ao longo das linhas, uma clara hierarquia espacial e um contraste adequado. Isto é especialmente verdadeiro para a web móvel.
Não há nenhuma regra que não possa ser anulada pela evidência de seus próprios olhos, mas as diretrizes aqui servirão como um ponto de partida ideal para textos bem definidos em dispositivos móveis.