Controlando as entrelinhas com line-height

Introdução

A propriedade CSS line-height permite controlar o espaçamento entre as linhas de um texto.

A distância é medida entre as linhas de base (baseline) de duas linhas consecutivas. Lembrando que linha de base é a linha horizontal que passa por baixo das letras que não se estendem para baixo (por exemplo: as letras a, b, c, d e não as letras g, j, p, q).

A figura mostrada a seguir esclarece a medida da entrelinha

O valor nativo, padrão nos navegadores, para a propriedade line-height deve estar entre 1 e 1.2 vezes o valor de font-size (tamanho da fonte).

Valores válidos para a propriedade line-height

• normal: é o valor padrão nativo do navegador (entre 1 e 1.2);
• número: um valor expressso por um número inteiro ou decimal;
• comprimento: um valor CSS para comprimento (px, em, pt, etc)
• porcentagem: um valor expressso em porcentagem;
• herdado: o valor herdado conforme estudaremos adiante.

Não é válido declarar valores negativos para esta propriedade. Se for declarado, o valor será ignorado.

Valor normal

Observe a marcação HTML para um parágrafo conforme mostrada a seguir:

<p>1°. Parágrafo....Lorem ipsum dolor...</p>

Por padrão, a marcação mostrada é renderizada conforme a seguir com entrelinha igual a 1.2 vezes o tamanho da fonte:

Nota: A entrelinha deste site é 1.4. Note nos parágrafos do site a entrelinha é maior que a mostrada no parágrafo renderizado anteriormente com entrelinha padrão ou nativa.

Valor expresso por um número

Quando o valor de line-height é declarado com uso de um número inteiro ou decimal a entrelinha é igual ao número declarado multiplicado pelo valor de font-size.

No exemplo a seguir a entrelinha declarada na regra CSS é igual à 1.5 x 20px = 30px.

p {
 font-size: 20px;
 line-height: 1.5;

}

Valor expresso por uma medida CSS de comprimento

Quando o valor de line-height é declarado com uso de uma medida CSS de comprimento a entrelinha é igual à medida declarada. Para valores que independem do valor de font-size (px, pt, etc) a entrelinha é o valor declarado e para aqueles que dependem do valor de font-size (em e rem) a entrelinha é o valor calculado.

No exemplo a seguir a entrelinha é igual à 28px.

p {
 font-size: 20px;
 line-height: 28px;
 }

No exemplo a seguir a entrelinha é igual à 40px.

p {
 font-size: 20px;
 line-height: 2em;
 }

Valor expresso em porcentagem

Quando o valor de line-height é expresso em porcentagem a entrelinha é igual a porcentagem do valor de font-size.

No exemplo a seguir a entrelinha é igual à 44px.

p {
 font-size: 22px;
 line-height: 200%;

}

Valor herdado

O mecanismo de herança para a propriedade line-height depende do valor declarado. Vejamos a seguir a herança para cada um deles.

Herança para line-height declarada em porcentagem.

O valor de line-heightherdado pelos elementos descendentes é igual ao valor de line-height calculado para o elemento ancestral, ou seja, não depende do valor da font-size dos elementos descendentes.

Considere três elementos parágrafos dentro de um elemento-pai DIV como mostrado a seguir:

<div>
 <p class="um">1°. Parágrafo....Lorem ipsum dolor sit amet...</p>
 <p class="dois">2°. Parágrafo....Lorem ipsum dolor sit amet...</p>
 <p class="tres">3°. Parágrafo....Lorem ipsum dolor sit amet...</p>
</div> 

e a seguinte folha de estilos:

div {
 font-size: 20px;
 line-height: 130%;
 }
 p.um { font-size: 14px; }
 p.dois { font-size: 20px; }
 p.tres { font-size: 30px; }

O mecanismo de herança funciona da seguinte maneira:

1. Calcula line-height para o elemento ancestral que irá passar a herança. No nosso exemplo o elemento div cuja line-height calculada é 20px x 130% = 26px.
2. Os elementos descendentes herdam a line-height calculada para o elemento ancestral. Não é calculado um valor para cada parágrafo, ou seja será considerado 26px de entrelinha para os três parágrafos.

Observe a seguir a renderização deste exemplo.

No exemplo acima é possível visualizar que a entrelinha permanece rigorosamente igual para os três parágrafos resultando entrelinha muito grande para a fonte pequena de 14px (1°. parágrafo), muito pequena para a fonte grande de 30px (3°. parágrafo) e aceitável para a fonte de 20px (2°. parágrafo).

Herança para line-height declarada com uso de número.

O valor de line-height herdado pelos elementos descendentes é igual ao valor de line-height declarado para o elemento ancestral, ou seja, é igual ao número declarado e assim sendo depende do valor da font-size dos elementos descendentes.

Considere três elementos parágrafos dentro de um elemento-pai DIV como mostrado a seguir:

<div>
 <p class="um">1°. Parágrafo....Lorem ipsum dolor sit amet...</p>
 <p class="dois">2°. Parágrafo....Lorem ipsum dolor sit amet...</p>
 <p class="tres">3°. Parágrafo....Lorem ipsum dolor sit amet...</p>
</div>

e a seguinte folha de estilos:

div {
 font-size: 20px;
 line-height: 1.3;
 }
 p.um { font-size: 14px; }
 p.dois { font-size: 20px; }
 p.tres { font-size: 30px; }

O mecanismo de herança funciona da seguinte maneira:

1. Calcula line-height para o elemento ancestral. No nosso exemplo o elemento div cuja line-height calculada é 20px x 1.3 = 26px.
2. Os elementos descendentes não herdam a line-height calculada para o elemento ancestral. São calculados os valores para cada parágrafo como mostrado a seguir:
   1. 1°. Parágrafo - 14px x 1.3 = 18.2px
   2. 2°. Parágrafo - 20px x 1.3 = 26px
   3. 3°. Parágrafo - 30px x 1.3 = 39px

Observe a seguir a renderização deste exemplo.

No exemplo acima é possível visualizar que a entrelinha é diferente para cada parágrafo.

Herança para line-height declarada com uso de medida de comprimento CSS.

O valor de line-heightherdado pelos elementos descendentes é igual ao valor de line-height declarado para o elemento ancestral, ou seja, é igual à medida de comprimento CSS declarada e permanece constante, portanto não depende do valor da font-size dos elementos descendentes.

Considere três elementos parágrafos dentro de um elemento-pai DIV como mostrado a seguir:

<div>
 <p class="um">1°. Parágrafo....Lorem ipsum dolor sit amet...</p>
 <p class="dois">2°. Parágrafo....Lorem ipsum dolor sit amet...</p>
 <p class="tres">3°. Parágrafo....Lorem ipsum dolor sit amet...</p>
</div>

e a seguinte folha de estilos:

div {
 font-size: 20px;
 line-height: 24px;
 }
 p.um { font-size: 14px; }
 p.dois { font-size: 20px; }
 p.tres { font-size: 30px; }

O mecanismo de herança funciona da seguinte maneira:

1. O valor de line-height tanto para o elemento ancestral como para os elementos descendentes do nosso exemplo é igual a 24px.
2. Os elementos descendentes herdam a line-height declarada para o elemento ancestral. É atribuído o mesmo valor (herdado) para cada parágrafo como mostrado a seguir:
   1. 1°. Parágrafo - 24px
   2. 2°. Parágrafo - 24px
   3. 3°. Parágrafo - 24px

Observe a seguir a renderização deste exemplo.

No exemplo acima é possível visualizar que a entrelinha é a mesma para cada parágrafo.

Declarar line-height na propriedade font

A propriedade abreviada para declaração de fontes (propriedade font), admite na sua sintaxe a declaração de line-height como mostrado a seguir.

font: <'font-style'> || <font-variant-css21> || <'font-weight'> || 
<'font-stretch' ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | 
caption | icon | menu | message-box | small-caption | status-bar

Na sintaxe mostrada a propriedade line-height deve ser declarada logo após a propriedade font-size e dela separada por uma / (barra) conforme o exemplo mostrado a seguir:

p {
 font: bold 20px/1.4 sans-serif;
 }

Conclusão

A herança para a propriedade line-height pode trazer resultados inesperados. Assim, salvo casos especiais é de boa prática adotar números inteiros ou decimais para valor desta propriedade, garantindo que a herança resultará em entrelinhas consistentes.

Compartilhe essa matéria com seus amigos