Kerning, Tracking e Leading: um guia simples para uma digitação eficaz

Ao projetar para a web, você deve manter uma coisa em mente o tempo todo: a legibilidade. Não importa o quão bom é o design, quão lindo é o seu layout ou quão genial é o uso das cores. Se as pessoas não conseguem ler as palavras na tela (e isso pressupõe que haja palavras na tela, é claro), o site não pode cumprir sua função. Três dos elementos mais importantes de legibilidade de texto são kerning, tracking e lead, embora muitas pessoas os confundam ou simplesmente não entendam como usá-los com eficácia. Pretendemos consertar isso hoje.

Kerning, Tracking e Leading

Se você resumir esses três aos fundamentos absolutos, verá o espaçamento entre os caracteres nos eixos X e Y. Explorando, você verá que há mais do que isso, mas, em essência, você está olhando para a relação entre os caracteres do texto. É importante entender a relação entre esses três atributos porque um bom design e legibilidade dependem de você usá-los da melhor maneira possível.

E isso vem com o tempo e a prática. Mas, depois de começar a prestar atenção neles, você notará como kerning, tracking e lead são usados ​​de forma eficaz e inadequada em tudo o que você lê e vê diariamente. Vamos cavar.

Ajustando Kerning, Leading e Tracking (e mais!)

Na verdade, antes de nos aprofundarmos, vamos examinar como você pode alterar e ajustar essas configurações. Embora a maioria dos programas de processamento de texto tenha opções para ajustá-los, a maioria das pessoas nunca precisará disso ao escrever uma cópia ou um texto típico. É quando você está criando um texto que se torna mais um problema, então programas como Photoshop, Illustrator, etc. terão as opções de que você mais precisa.

Nos produtos Adobe, basta abrir o Painel de Caracteres da Camada de Texto e você terá tudo o que precisa. O V / A é kerning, o VA em uma caixa está rastreando e os As verticais sublinhados são Leading. Você também pode ajustar tachado, peso, tamanho, super / subscrito e muito mais neste painel. Vale a pena se acostumar a manter isso aberto.

Basta colocar o cursor onde você precisa ajustar o espaçamento e pronto.

O que é Kerning?

Vamos começar com o kerning . Kerning é o mais simples dos três, na verdade. É o espaço entre dois personagens lado a lado. Em uma palavra, você pode ter kerning variável porque o espaço entre as duas primeiras letras pode ser diferente do que entre as duas últimas (e assim por diante).

Em fontes monoespaçadas, cada caractere ocupa exatamente a mesma quantidade de espaço horizontal sem sobreposição. O A tem a mesma largura que o B, o J e o K. Ajustar o kerning entre essas letras tende a ser mais fácil do que as fontes com espaçamento variável, onde as letras podem se sobrepor e também imprimir em larguras diferentes.

No exemplo acima, temos três linhas que foram copiadas e coladas usando a fonte monoespaçada Courier New . O kerning da linha superior é definido como 0, que é o padrão e usa o espaçamento que o designer de fonte escolheu. A segunda linha é definida igualmente entre letras (e espaços) em 200. Como você pode ver, os espaços são uniformes entre os caracteres da linha. Finalmente, a terceira linha foi kerned aleatoriamente com espaçamento positivo e negativo dentro de cada palavra individual. Como você pode ver, cada personagem pode ter kerning diferente em cada lado.

O que é rastreamento?

Tracking é semelhante ao kerning, mas não é kerning. Onde kerning é o espaço entre dois caracteres individuais, tracking é o espaço uniforme entre cada palavra ou linha individual. Em vez de se preocupar com a forma como as coisas são agrupadas letra por letra, como acontece com o kerning, certifique-se de que toda a linha esteja uniformemente espaçada. Olhando para a imagem do exemplo anterior, a segunda linha poderia ter sido feita de uma maneira muito mais fácil.

O que fiz para o kerning foi colocar meu cursor entre cada caractere individual e ajustar para 200. Eu basicamente rastreei a linha inteira. Que é o que você deve fazer. Basta destacar o que você precisa rastrear e ajustar no painel de caracteres.

Esteja ciente, entretanto, que algumas fontes e scripts podem se tornar ilegíveis conforme o rastreamento é ajustado.

As fontes de escrita à mão e as fontes cursivas são definidas com kerning específico e, se você ajustar o rastreamento, obterá lacunas em uma linha que de outra forma não seria interrompida. Ou indo em outra direção para compactar as linhas, você pode simplesmente tornar o script ilegível.

O que está liderando?

Com Leading, você não está mais lidando com espaçamento entre personagens. Liderar é o espaço entre as linhas.

O uso eficaz de entrelinhas permite que você use os espaços em branco em seus designs. Linhas estreitas - mesmo com kerning / rastreamento correto e bem feito - podem ser uma experiência péssima para os leitores.

Em alguns lugares, você pode ver o entrelinhamento chamado de altura da linha , mas eles são praticamente a mesma coisa. Uma boa regra é certificar-se de deixar pelo menos um pequeno espaço acima e abaixo de seus personagens. Como você pode ver no exemplo superior, uma fonte de 40px tem uma altura de linha de 48px. Isso significa que não importa o que aconteça, haverá espaçamento entre as letras. Se você definir como igual ou inferior ao tamanho da fonte, obterá sobreposição de caracteres.

Além disso, esta é a altura da linha em que os personagens se sentam. Esta não é a altura do personagem . Assim como o kerning e o tracking não tornam os personagens mais gordos ou finos, o tracking não os torna mais curtos ou altos. É simplesmente o espaço ao redor deles.

Como você pode ver, no entanto, as opções em kerning / tracking no Painel de caracteres do Photoshop ajustam a largura / altura dos caracteres independentemente de kerning, tracking e entrelinhamento.

Atalhos de teclado do Photoshop / Illustrator

A única desvantagem do Painel de Personagem é que ele se torna muito chato quando você precisa de um ajuste fino. Felizmente, existem atalhos de teclado que tornam o uso do kerning, do tracking e do Leading uma brisa absoluta.

Esses atalhos são para o pacote Adobe Creative Cloud, então eles podem ser diferentes no Gimp ou Paint.NET ou outro programa.

• Kerning - Com o cursor entre dois caracteres, segure ALT (ou Option no Mac) e use as setas esquerda / direita para ajustar o kerning
• Rastreamento - Com a palavra / linha destacada, segure ALT (ou Option no Mac) e use as setas direita / esquerda para ajustar o rastreamento do texto destacado
• Entrelinha - Destaque as linhas que deseja ajustar, segure ALT (ou Option no Mac) e use as setas para cima / para baixo para ajustar o espaço entre as linhas

Embora você possa posicionar o cursor ou destacar o texto e digitar valores no Painel de Caracteres, os atalhos do teclado tornam todo o processo muito menos tedioso e demorado. Além disso, você obtém um controle mais granular, para que também possa fazer projetos melhores dessa forma.

(Como um aparte, se você não estiver usando atalhos de teclado do Photoshop / Illustrator / Premier, etc. regularmente, é altamente recomendável aprender, pois torna seu fluxo de trabalho muito mais suave, mais agradável e mais produtivo também.)

Empacotando

Kerning, tracking e lead são os fundamentos do texto legível em web design (e design em geral). Aprender a diferença e como usar cada um deles de forma eficaz o tornará um designer muito melhor. Pode parecer um pouco estranho que algo tão simples como o espaçamento entre letras e linhas possa ter um impacto tão grande, mas depois de lidar com isso por um breve período, você nunca verá sites, anúncios, logotipos ou outdoors da mesma forma novamente.

Quais são suas dicas e truques para obter o rastreamento, o kerning ou a liderança perfeitos em um design?

Imagem de destaque do artigo por BarsRsind / shutterstock.com