Web design sempre emprestou princípios e definições do mundo do design gráfico e impresso. Isso é especialmente verdadeiro quando se trata de tipografia na web e da forma como obtemos formas de letras em nossas páginas da web. Esses paralelos nem sempre são de 1 para 1 traduções, mas você certamente pode ver onde uma disciplina influenciou a outra. Isso é especialmente evidente quando você considera a relação entre o termo de tipografia tradicional "leading" e a propriedade CSS conhecida como "line-height".
O propósito de liderar
Quando as pessoas usavam manualmente as letras de metal ou de madeira para criar a tipografia de uma página impressa, pedaços finos de chumbo eram colocados entre linhas horizontais de texto para criar espaçamento entre essas linhas. Se você quisesse um espaço maior, você inseriria pedaços maiores de chumbo. É assim que o termo "líder" foi cunhado. Se você consultasse o termo "líder" em um livro sobre design tipográfico e princípios, ele leria algo como: "a distância entre as linhas de base de linhas sucessivas de tipo".
Líder em Web Design
No design digital, o termo principal ainda é usado para se referir ao espaçamento entre linhas de texto. Muitos programas usam esse termo exato, embora o lead real obviamente não esteja sendo usado nesses programas. Esse é um ótimo exemplo de novas formas de design que emprestam idéias das tradicionais, mesmo que a implementação exata desse princípio tenha mudado.
Quando se trata de web design, não há propriedade CSS para "líder". Em vez disso, a propriedade CSS que manipularia essa exibição visual de texto é chamada de altura da linha. Se você quiser que seu texto tenha espaço adicional entre linhas horizontais de texto, você usaria essa propriedade. Por exemplo, digamos que você queira aumentar a altura da linha para todos os parágrafos dentro da main p { altura da linha: 1,5;}
Isso seria agora 1,5 vezes a altura da linha normal, com base no tamanho de fonte padrão da página (que normalmente é 16px). Conforme detalhado acima, a altura da linha é apropriada para espaçar as linhas de texto em parágrafos ou outros blocos de texto. Se houver pouco espaço entre as linhas, o texto pode ficar confuso e difícil de ler para os espectadores em seu site. Da mesma forma, se as linhas estiverem espaçadas demais na página, o fluxo normal de leitura será interrompido e os leitores terão problemas com seu texto por esse motivo. É por isso que você deseja encontrar a quantidade adequada de espaçamento entre linhas para usar. Você também pode testar seu projeto com usuários reais para obter feedback sobre a legibilidade da página. Não confunda a altura da linha com o preenchimento ou as margens que você usaria para adicionar espaço em branco ao design da sua página, incluindo o cabeçalho ou os parágrafos. Esse espaçamento não está levando e, portanto, não é tratado pela altura da linha. Se você quiser adicionar espaço em certos elementos de texto, você usaria margens ou preenchimento. Voltando ao exemplo CSS anterior que usamos, poderíamos adicionar isto: main p { altura da linha: 1,5; margem inferior: 24px;}
Isso ainda teria a altura de 1,5 linha entre linhas de texto para os parágrafos de nossa página (aqueles dentro do main p { altura da linha: 1,5; fundo de enchimento: 24px;} Em quase todos os casos, isso exibiria o mesmo que o CSS anterior. Digamos que você queira adicionar o espaçamento abaixo dos itens da lista que estavam dentro de uma lista com uma classe de "services-menu", você usaria margens ou preenchimento para fazer isso, NÃO altura da linha. Então isso seria apropriado. .services-menu li {< fundo de enchimento: 30px;} Você só usaria a altura da linha aqui se quisesse definir o espaçamento do texto dentro dos próprios itens da lista, assumindo que eles tivessem longas execuções de texto que poderiam ser executadas em várias linhas para cada ponto de marcador. Quando usar altura de linha
Quando não usar altura de linha
