5.1 Propriedade line-height
Parâmetros de texto, como line-height, letter-spacing e word-spacing, têm um papel importante na estilização de texto em
páginas web. Eles permitem controlar o espaçamento entre linhas (interlinhas), o espaçamento entre letras e
o espaçamento entre palavras, respectivamente. Vamos analisar cada uma dessas propriedades com mais detalhes.
A propriedade line-height define a altura da linha do texto. Ela determina a distância entre as linhas de base
das linhas de texto adjacentes, o que afeta a densidade e a legibilidade do texto.
Valores:
- Valor numérico: valor relativo sem unidades (por exemplo, 1.5), que é multiplicado pelo tamanho atual da fonte
- Valor percentual: valor relativo em porcentagem do tamanho atual da fonte (por exemplo, 150%)
- Valor absoluto: valor em unidades fixas (por exemplo, em pixels) (por exemplo, 24px)
- Palavra-chave
normal: valor padrão, geralmente igual a 1.2
Exemplo de uso:
.normal {
line-height: normal;
}
.one-point-five {
line-height: 1.5;
}
.double {
line-height: 2;
}
<body>
<p class="normal">Este texto tem uma altura de linha normal. Este texto tem uma altura de linha normal.</p>
<p class="one-point-five">Este texto tem uma altura de linha de 1.5. Este texto tem uma altura de linha de 1.5.</p>
<p class="double">Este texto tem uma altura de linha dupla. Este texto tem uma altura de linha dupla.</p>
</body>
5.2 Propriedade letter-spacing
A propriedade letter-spacing define o espaçamento entre letras, ou seja, o espaço adicional entre os caracteres
do texto. Ela pode ser usada para melhorar a legibilidade ou criar efeitos visuais.
Valores:
- Valor absoluto: valor em unidades fixas (por exemplo, em pixels — 2px)
- Valor negativo: reduz o espaço entre os caracteres (por exemplo, -1px)
- Palavra-chave
normal: valor padrão, que é 0 (sem espaço adicional)
Exemplo de uso:
.normal {
letter-spacing: normal;
}
.wide {
letter-spacing: 2px;
}
.narrow {
letter-spacing: -1px;
}
<body>
<p class="normal">Este texto tem espaçamento normal entre letras.</p>
<p class="wide">Este texto tem espaçamento aumentado entre letras.</p>
<p class="narrow">Este texto tem espaçamento reduzido entre letras.</p>
</body>
5.3 Propriedade word-spacing
A propriedade word-spacing define a distância entre as palavras no texto. Ela adiciona ou remove
espaço entre palavras, o que pode ser usado para melhorar a legibilidade ou criar efeitos visuais.
Valores:
- Valor absoluto: valor em unidades fixas (por exemplo, pixels) (por exemplo, 4px)
- Valor negativo: reduz a distância entre as palavras (por exemplo, -2px)
- Palavra-chave
normal: valor padrão, que é a distância intermédia padrão entre palavras (geralmente 0)
Exemplo de uso:
.normal {
word-spacing: normal;
}
.wide {
word-spacing: 4px;
}
.narrow {
word-spacing: -2px;
}
<body>
<p class="normal">Este texto tem espaçamento normal entre palavras.</p>
<p class="wide">Este texto tem espaçamento aumentado entre palavras.</p>
<p class="narrow">Este texto tem espaçamento reduzido entre palavras.</p>
</body>
GO TO FULL VERSION