Propiedad letter-spacing de CSS
La propiedad CSS letter-spacing permite especificar el espacio entre letras o caracteres en un texto.
Los valores admitidos por letter-spacing incluyen valores relativos al contenedor (porcentaje), valores relativos a la fuente (em, rem), valores absolutos (px) y la palabra clave normal, que restablece el valor predeterminado de la fuente.
La propiedad letter-spacing admite valores negativos.
La propiedad letter-spacing es transicionable, por lo que el espaciado cambia suavemente cuando se define una transición.
INFO
La velocidad de la transición se especifica mediante la función de temporización de animación.
| Valor inicial | normal |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Heredado | Sí. |
| Animable | Sí. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.letterSpacing = "5px"; |
Sintaxis
Sintaxis de la propiedad letter-spacing de CSS
letter-spacing: normal | length | initial | inherit;Ejemplo de la propiedad letter-spacing:
Ejemplo de la propiedad letter-spacing de CSS con valores normal y negativos
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
letter-spacing: normal;
}
.spacing {
letter-spacing: 4px;
}
.spacing-negative {
letter-spacing: -4px;
}
</style>
</head>
<body>
<h2>Letter-spacing property example</h2>
<p>This is a paragraph.</p>
<p class="spacing">This is a paragraph.</p>
<p class="spacing-negative">This is a paragraph.</p>
</body>
</html>Resultado
En el ejemplo anterior, el primero es un párrafo normal, para el segundo párrafo el letter-spacing se establece en 4px, y para el tercer párrafo se establece un valor negativo (-4px).
En el siguiente ejemplo, letter-spacing se utiliza junto con la propiedad transición. Debes pasar el cursor sobre el texto para ver la transición.
Ejemplo de la propiedad letter-spacing con la propiedad de transición:
Ejemplo de la propiedad letter-spacing de CSS con valores normal y em
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #fff;
color: #666;
font-size: 1em;
font-family: Roboto, Helvetica Sans-serif;
}
.example1 {
background-color: #666;
color: #eee;
padding: 1em;
letter-spacing: .5em;
-webkit-transition: letter-spacing .5s ease;
transition: letter-spacing .5s ease;
}
.example1:hover {
letter-spacing: normal;
}
.example2 {
background-color: #eee;
color: #666;
padding: 1em;
}
</style>
</head>
<body>
<h2>Letter-spacing property example</h2>
<div class="example1">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus earum ut alias doloremque esse. Porro maxime dicta veniam molestias sed modi sunt sapiente eum nostrum consequatur accusantium facilis blanditiis nihil.
</p>
<div class="example2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, facilis, sed, consectetur incidunt quia sint accusamus obcaecati quisquam asperiores officiis mollitia explicabo est ratione. Qui id ipsa ratione inventore nam!
</div>
</div>
</body>
</html>Información adicional
- Los navegadores modernos admiten completamente los valores de subpíxeles para letter-spacing.
- No se recomienda generalmente aplicar letter-spacing a letras minúsculas, ya que puede reducir la legibilidad debido a un peso visual desigual.
- Puedes animar esta propiedad utilizando las transiciones CSS.
- Nota: Esta propiedad controla el espacio entre caracteres individuales, a diferencia de
word-spacing, que controla el espacio entre palabras.
Valores
| Valor | Descripción | Probar |
|---|---|---|
| normal | Indica que no habrá espacios extra entre los caracteres. Es el valor predeterminado de esta propiedad. | Probar » |
| length | Define un espacio extra entre los caracteres. Se permiten valores negativos. | Probar » |
| initial | Hace que la propiedad utilice su valor predeterminado. | Probar » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Cuál es la función de la propiedad 'letter-spacing' en CSS?