Um componente chave para qualquer design de site é o tipo. Selecionar fontes, tamanhos e cores pode ser uma grande parte de como você delineia seu site. Tão importante quanto as letras propriamente ditas, é o espaçamento em torno dessas letras e particularmente o principal usado em blocos de texto.

Quanto mais tipo você usar, mais importante se tornará. Por trás da fonte e do tamanho, é um dos fatores-chave a considerar quando você está olhando como o tipo é legível.

As principais especificações que você usa para um logotipo ou tela inicial podem ser muito diferentes do que o principal usado para o tipo em uma postagem no blog.

Outros elementos de design também têm um impacto sobre como você deve usar o entrelinhamento. O tamanho do tipo, a largura das colunas e até a cor do plano de fundo podem ajudar você a fazer escolhas inteligentes.

O modo como você usa o líder, mais notavelmente, entra em jogo para grandes blocos de texto.

O que está levando?

Leading - pronunciado ledding - é o espaçamento entre linhas do tipo. A liderança era tradicionalmente medida em pontos (assim como fontes). O termo originou-se com letras de estilo antigo, quando o tipo foi definido manualmente. As tiras de chumbo foram colocadas entre as linhas do tipo para manter tudo em perfeito alinhamento.

Desde o advento da publicação digital, a liderança tem sido frequentemente confundida com a altura da linha. A altura da linha é todo o espaço de uma linha de base - o plano imaginário no qual letras como 'a', 'x' e 'n' se sentam - para a próxima. Por outro lado, Liderar é o espaço da parte inferior de uma letra em uma linha até o topo de uma letra na seguinte: é literalmente a altura da linha menos a altura do texto.

Na tipografia digital, particularmente na tipografia da web, os termos principal e altura da linha são frequentemente usados ​​de forma intercambiável. Em CSS, por exemplo, não há um valor de entrelinha, usamos em vez disso a altura da linha.

Enquanto a liderança já foi um valor físico e mensurável, agora é mais comumente usada como conceito: a impressão visual do espaço entre duas linhas.

Como o entrelinhamento é usado em um bloco de texto pode afetar a legibilidade. Há uma linha tênue entre o tipo estar muito próximo e muito distante. Qualquer extremo pode ser difícil nos olhos de um leitor. Levar é tudo sobre como alterar a densidade do tipo. A chave é entender qual a mensagem que você pretende para o seu tipo para transmitir e combinar o líder de acordo.

Nenhuma solução perfeita

Facebook

Não existe uma fórmula mágica perfeita para determinar quanto líder você precisará. Uma combinação de fatores está envolvida - tamanho do tipo, cor, efeito desejado e, o mais importante, legibilidade.

Como regra geral, o ponto de partida para a entrelinha é geralmente o mesmo que o tamanho em pontos da fonte que você está usando. Alguns softwares, especialmente navegadores da Web, levam um pouco mais longe e definem o padrão levando um pouco acima do tamanho do ponto, geralmente usando um padrão de 120%. Portanto, os blocos que incluem texto de 10 pontos teriam um ponto final de 12 pontos.

Essa filosofia funciona muito bem para grandes blocos de texto, como posts em blogs, que usam fontes comuns sem ascendentes, descendentes ou ligaduras extravagantes em fundos de cores neutras e pálidas (pense no tipo preto em branco ou bege). Você mantém um senso de que todas as linhas de texto combinam enquanto adiciona espaço suficiente para que seja fácil para os olhos.

Blocos de texto são mais fáceis de ler quando a entrelinha é mais larga que o espaçamento de palavras. Essa proporção ajudará o olho a se mover pela página e depois descer, seguindo o fluxo natural de espaçamento do escuro para a luz.

Essa altura de linha "normal" também será adequada para coisas que exigem muita leitura. É o padrão usado por muitos sites e publicações impressas.

Mantenha apertado

Branch

Ligações estreitas ou negativas ocorrem quando as linhas do tipo estão mais próximas do que o tamanho do ponto do tipo. Por exemplo, se o seu tipo for dimensionado em 14 pontos, qualquer margem abaixo de 14 pontos será considerada apertada, mesmo que não pareça muito espaçada na tela.

A liderança precisa pode criar uma sensação de restrição. Também pode ser usado para criar o caos. Por outro lado, um líder mais rigoroso pode ser usado como um método para unir bits do tipo ou para criar um senso de organização distinto. Por muitos anos impressos e on-line, as organizações de notícias usaram algumas das mais rigorosas especificações líderes para o tipo de corpo. Na impressão, isso era para economizar espaço; on-line é manter o senso de credibilidade e a aparência associada às organizações e seus parceiros impressos.

Regenerate Music co

Pense no caso e nas letras que ficam acima e abaixo da altura x ao definir as especificações de altura da linha. Ao trabalhar em letras maiúsculas, não há ascendentes ou descendentes, portanto, talvez seja necessário aumentar o espaçamento entre linhas, como a técnica usada pela Regenerate Music Co. O mesmo se aplica às fontes que possuem ascendentes e descendentes mais curtos.

O tipo usado em tamanhos maiores, como manchetes ou logotipos, também pode se beneficiar de uma liderança mais rígida.

Soltar

Onst Creative

Solta ou positiva, a entrelinha está adicionando espaçamento para que a entrelinha seja maior que o tamanho em pontos usado para o tipo. Por exemplo, se o seu tipo é dimensionado em 14 pontos, qualquer espaço de 15 pontos ou mais seria considerado solto. Com alguns tipos de letra, o espaçamento pode não parecer solto na tela, embora seja classificado dessa maneira.

A liderança solta pode tornar a página leve e arejada. É um truque testado pelo tempo para que os designers apenas adicionem a entrelinha quando o tipo parece muito volumoso ou pesado na página. A liderança que é muito solta pode ser difícil de ler e seguir se muitos textos forem usados; é melhor reservá-lo para poucas palavras.

Alistapart

A maioria dos designers está tendendo a usar um líder mais flexível para o tipo de corpo principal em blogs e para outros grandes blocos de texto. Solta, mas não muito solta, a liderança pode ser fácil de ler e seguir. Pode fazer com que um texto menor pareça um pouco maior do que é e ajude a equilibrar linhas de texto extremamente longas. Note o uso de liderança no blog A List Apart, o tipo de letra maior para o corpo usa uma especificação enquanto o tipo menor na barra lateral direita é muito mais flexível, tornando o tipo menor mais fácil de seguir e equilibrando-o com os outros elementos na página .

Muitos designers também optam por um líder mais flexível ao usar fontes sem serifas. Pode ser uma boa opção quando se trabalha com fontes com floreios ou ligaduras exageradas. O espaço extra permite que a sala de letras respire sem se sobrepor.

The Bloggess

O destaque a granel também é uma consideração importante se você planeja usar muitos tipos de letra em negrito ou coloridos com pesos pesados. O blog Bloggess usa uma combinação de cores, negrito e letras maiúsculas por todo o site, fazendo com que a liderança seja uma ferramenta de legibilidade necessária. Neste caso, a liderança solta também ajuda a chamar a atenção para as partes importantes do texto, que são coloridas e em negrito.

Cores de fundo e principais

A cor e o contraste são especialmente importantes ao escolher uma altura de linha.

Em fundos escuros, você pode querer usar um pouco mais de entrelinha do que em um fundo mais claro para ajudar a aliviar a sensação de massa. As cores escuras podem adicionar peso ao seu design, assim como a aderência justa, mas ao optar por usar apenas uma ou outra, você pode criar mais equilíbrio.

O mesmo acontece quando se usa o tipo de cor. As cores, além dos cinzas pretos e escuros, podem adicionar diferentes quantidades de peso ao seu design. Dependendo da cor de fundo, algum texto pode até ter a aparência de sangramento no fundo - isso acontece com algumas pessoas, especialmente ao ler letras vermelhas em um fundo branco. A adição de líderes pode ajudar a tornar esses tipos de texto mais legíveis.

Mudando larguras e levando

HappyCog

O design responsivo torna a compreensão líder (e o tipo em geral) ainda mais importante.

Com resoluções e formas variadas de tela, as especificações de tipo devem ser ajustadas adequadamente para garantir que um site permaneça legível. À medida que o texto encolhe (ou cresce) na tela, o líder deve ajustar de acordo.

Lembre-se de manter as proporções de altura da linha em mente ao fazer esses ajustes. Porque o tipo será menor para dispositivos móveis e outros dispositivos de tela pequena. Considere aumentar a altura da linha em 20% em relação ao que você usou para o projeto em escala total. O aumento da liderança deve ajudar na legibilidade quando emparelhado com um tipo menor.

Portanto, quando você estiver determinando as principais especificações do seu site, precisará de vários conjuntos de limites: um para seu design básico de site, um para dispositivos de tamanho médio, como o iPad e outros tablets, e um para telefones celulares. Cada um pode ter um conjunto diferente de proporções usadas para o texto até a altura da linha.

Conclusão

Agora que você está armado com uma variedade de dicas e ferramentas, por onde começar?

Não há lista de verificação. Sua melhor aposta é dar uma olhada no tipo e ver como se sente (use o bom e velho teste do olho). Deixe descansar por um tempo e volte a ele mais tarde. Você ainda se sente da mesma maneira sobre o texto? O sentimento que você tem combina com o sentimento que você tem em mente para o design do seu site?

Observe que isso é mais eficaz quando o bloco de texto contém uma cópia real em vez de um texto de espaço reservado. Você deseja obter uma visualização realista e as opções de espaço reservado às vezes contêm números ímpares de letras que não são usadas com frequência em cópias reais.

Brinque com isso. Mostre seu design de texto para outra pessoa para obter opiniões extras. Pergunte como eles se sentem sobre isso.

Também certifique-se de emparelhar o seu bloco de texto com o resto dos elementos no design. Isso pode não ser o primeiro passo, mas, às vezes, juntar tudo isso pode criar efeitos indesejados. Certifique-se de passar novamente no teste do olho.