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

ilustração dsa 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

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:

HTML
<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:

1°. Parágrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis.

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.

CSS
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.

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

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

CSS
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.

CSS
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:

HTML
<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:

CSS
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.

1°. Parágrafo....Lorem ipsum dolor sit amet Parágrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis.

1°. Parágrafo....Lorem ipsum dolor sit amet Parágrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis.

1°. Parágrafo....Lorem ipsum dolor sit amet Parágrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis.

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:

HTML
<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:

CSS
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.

1°. Parágrafo....Lorem ipsum dolor sit amet Parágrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis.

1°. Parágrafo....Lorem ipsum dolor sit amet Parágrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis.

1°. Parágrafo....Lorem ipsum dolor sit amet Parágrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis.

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:

HTML
<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:

CSS
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.

1°. Parágrafo....Lorem ipsum dolor sit amet Parágrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis.

1°. Parágrafo....Lorem ipsum dolor sit amet Parágrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis.

1°. Parágrafo....Lorem ipsum dolor sit amet Parágrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis.

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.

CSS
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:

CSS
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

logo twitter logo facebook logo linkedin logo reddit

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.