Cómo cambiar el espacio entre las letras con CSS

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.

Si te sirvió, ¡compártelo!

También te interesaría...

Suscríbete a nuestra lista de correo

Agregue un comentario

Su dirección de correo no se hará público.


Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.