En este tutorial de CSS, vamos a aprender cómo cambiar el espaciado entre letras. Esto nos permite aumentar o reducir el espacio entre cada letra, logrando un cambio de estilo. Podemos crear textos apretados con las letras muy juntas, y también textos con las letras totalmente espaciadas.
Propiedad de CSS: letter-spacing
La propiedad de CSS usada para cambiar el espaciado entre letras es letter-spacing. Hasta su nombre lo dice en ingles: espaciado de letras. Debes utilizar valores numéricos, que pueden estar en px, em o cualquier otra unidad.
- Para aumentar el espacio entre las letras usamos un valor positivo en
letter-spacing. - Para reducir el espacio entre las letras usamos un valor negativo en
letter-spacing.
Ejemplos
Como ejemplo, vamos a crear varios elementos de párrafos en HTML con distintas clases:
<p class="normal">letras con un espaciado normal</p> <p class="letras-separadas">letras un poco más separadas</p> <p class="letras-muy-separadas">letras muy separadas</p> <p class="letras-juntas">letras un poco juntas</p> <p class="letras-muy-juntas">letras muy juntas</p>
Ahora, vamos a aplicar el CSS respectivo a cada clase diferente:
.normal {
letter-spacing: normal;
}
.letras-separadas {
letter-spacing: 0.5px;
}
.letras-muy-separadas {
letter-spacing: 5px;
}
.letras-juntas {
letter-spacing: -0.5px;
}
.letras-muy-juntas {
letter-spacing: -2px;
}
El resultado sería el siguiente:
letras con un espaciado normal
letras un poco más separadas
letras muy separadas
letras un poco juntas
letras muy juntas
Así de sencillo se puede cambiar el espacio entre letras con CSS. Así que solo te queda probar esta propiedad de CSS para cambiar el estilo de tus encabezados. Recuerda que puedes usar letter-spacing para cambiar el espaciado de letras de cualquier elemento de HTML.
Si tienes alguna pregunta, por favor, déjanos un comentario para ayudarte.
