5.1 Propiedad line-height
Los parámetros de texto como line-height, letter-spacing y word-spacing, juegan un papel importante en la estilización del texto en
páginas web. Permiten controlar el interlineado (la distancia entre líneas), el espaciado entre letras y
el espaciado entre palabras respectivamente. Vamos a ver cada una de estas propiedades con más detalle.
La propiedad line-height determina la altura de la línea de texto. Establece la distancia entre las líneas base
de líneas de texto adyacentes, lo cual afecta la densidad y legibilidad del texto.
Valores:
- Valor numérico: valor relativo sin unidades (por ejemplo, 1.5), que se multiplica por el tamaño de fuente actual
- Valor porcentual: valor relativo en porcentajes del tamaño de fuente actual (por ejemplo, 150%)
- Valor absoluto: valor en unidades fijas (por ejemplo, píxeles) (por ejemplo, 24px)
- Palabra clave
normal: valor por defecto, generalmente igual a 1.2
Ejemplo de uso:
.normal {
line-height: normal;
}
.one-point-five {
line-height: 1.5;
}
.double {
line-height: 2;
}
<body>
<p class="normal">Este es un texto con una altura de línea normal.</p>
<p class="one-point-five">Este es un texto con una altura de línea de 1.5.</p>
<p class="double">Este es un texto con una altura de línea doble.</p>
</body>
5.2 Propiedad letter-spacing
La propiedad letter-spacing define el espaciado entre letras, es decir, el espacio adicional entre los caracteres
del texto. Puede usarse para mejorar la legibilidad o crear efectos visuales.
Valores:
- Valor absoluto: valor en unidades fijas (por ejemplo, píxeles — 2px)
- Valor negativo: reduce el espacio entre los caracteres (por ejemplo, -1px)
- Palabra clave
normal: valor por defecto, igual a 0 (sin espacio adicional)
Ejemplo de uso:
.normal {
letter-spacing: normal;
}
.wide {
letter-spacing: 2px;
}
.narrow {
letter-spacing: -1px;
}
<body>
<p class="normal">Este es un texto con un espaciado normal entre letras.</p>
<p class="wide">Este es un texto con un espaciado aumentado entre letras.</p>
<p class="narrow">Este es un texto con un espaciado reducido entre letras.</p>
</body>
5.3 Propiedad word-spacing
La propiedad word-spacing determina la distancia entre palabras en el texto. Añade o elimina
espacio entre las palabras, lo cual puede usarse para mejorar la legibilidad o crear efectos visuales.
Valores:
- Valor absoluto: valor en unidades fijas (por ejemplo, píxeles) (por ejemplo, 4px)
- Valor negativo: reduce la distancia entre palabras (por ejemplo, -2px)
- Palabra clave
normal: valor por defecto, igual al espaciado estándar entre palabras (usualmente 0)
Ejemplo de uso:
.normal {
word-spacing: normal;
}
.wide {
word-spacing: 4px;
}
.narrow {
word-spacing: -2px;
}
<body>
<p class="normal">Este es un texto con un espaciado normal entre palabras.</p>
<p class="wide">Este es un texto con un espaciado aumentado entre palabras.</p>
<p class="narrow">Este es un texto con un espaciado reducido entre palabras.</p>
</body>
GO TO FULL VERSION