Propiedad CSS word-spacing
Usa la propiedad CSS word-spacing para especificar el espacio entre palabras en un texto. Lee sobre los valores y prueba ejemplos.
La propiedad CSS word-spacing controla la cantidad de espacio entre las palabras en un texto. Se añade (o se resta) al espacio predeterminado que la fuente ya coloca después de cada carácter de espacio, por lo que ajusta la distancia entre palabras, no entre letras individuales. Para el espacio entre letras, usa letter-spacing en su lugar.
Esta página cubre la sintaxis, cada valor aceptado, cómo se comportan las longitudes positivas y negativas, las unidades que puedes usar, consideraciones de accesibilidad y ejemplos ejecutables.
Cómo funciona
El navegador parte del espacio entre palabras definido por la fuente. El valor que le das a word-spacing se suma a esa base:
- Un valor positivo separa más las palabras.
- Un valor negativo acerca las palabras (y puede solaparlas si es suficientemente grande).
- La palabra clave
normalrestablece el espaciado predeterminado de la fuente; es equivalente a0, pero es el valor inicial de la propiedad en lugar de una longitud literal.
Dado que word-spacing actúa sobre los espacios producidos por los caracteres de espacio, solo afecta al contenido en línea. También se hereda, por lo que establecerlo en un contenedor lo aplica a todo el texto descendiente a menos que un elemento hijo lo sobreescriba.
¿Cuándo usarlo?
- Legibilidad — ampliar ligeramente los espacios entre palabras puede facilitar la lectura de encabezados densos o en mayúsculas.
- Tipografía de display — separar las letras de un encabezado estilo logo para un aspecto deliberado y aireado.
- Compresión — un pequeño valor negativo puede recuperar espacio en un diseño ajustado, aunque úsalo con moderación.
Para la mayoría del texto de cuerpo, déjalo en normal; los espacios grandes entre palabras ralentizan la lectura en lugar de ayudar.
La propiedad word-spacing se puede animar, por lo que puede utilizarse con la propiedad transition.
word-spacing se aplica solo al contenido en línea. Para espaciar letras en su lugar, consulta letter-spacing; para controlar el espaciado producido por los espacios en blanco, consulta white-space.
| Valor inicial | normal |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Heredado | Sí. |
| Animable | Sí. word-spacing es animable. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.wordSpacing = "40px"; |
Sintaxis
Sintaxis de la propiedad CSS word-spacing
word-spacing: normal | length | initial | inherit;Ejemplo de la propiedad word-spacing con el valor "normal":
Ejemplo de la propiedad CSS word-spacing con el valor normal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
word-spacing: normal;
}
</style>
</head>
<body>
<h2>Word-spacing property example</h2>
<p class="text">Lorem ipsum is simply dummy text...</p>
</body>
</html>En el siguiente ejemplo, el espacio entre las palabras es de 20px:
Ejemplo de la propiedad word-spacing especificada en "px":
Ejemplo de la propiedad CSS word-spacing con el valor de longitud (px)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
word-spacing: 20px;
}
</style>
</head>
<body>
<h2>Word-spacing property example</h2>
<p class="text">Lorem ipsum is simply dummy text...</p>
</body>
</html>Resultado
Ejemplo de un valor negativo de word-spacing:
Una longitud negativa acerca las palabras entre sí. Aquí el espacio se reduce en 3px:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
word-spacing: -3px;
}
</style>
</head>
<body>
<h2>Negative word-spacing example</h2>
<p class="text">Lorem ipsum is simply dummy text of the printing industry.</p>
</body>
</html>Unidades
El valor length acepta cualquier unidad de longitud CSS:
- Absolutas —
px,pt,cm. Fijas independientemente del tamaño de fuente. - Relativas —
emyrem. Un valoremescala con elfont-sizedel elemento, por lo queword-spacing: 0.25emmantiene la proporción constante a medida que el texto crece. Esta suele ser la opción más robusta para tipografía responsiva. Los valores en porcentaje no están permitidos.
Accesibilidad
Según WCAG 1.4.12 (Espaciado de texto), los usuarios pueden ajustar el espaciado entre palabras a al menos 0.16em para mayor legibilidad. Evita codificar valores de píxeles grandes que impidan el reajuste del texto, y nunca confíes solo en el espaciado de palabras para transmitir significado. Un espaciado excesivo también puede separar palabras para usuarios con discapacidades cognitivas o visuales, así que mantén los ajustes sutiles para el texto de cuerpo.
Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| normal | Especifica el espaciado de palabras normal. Este es el valor predeterminado de esta propiedad. | Pruébalo » |
| length | Especifica un espaciado de palabras adicional. Puede especificarse en px, pt, cm, em, etc. Los valores negativos son válidos. | Pruébalo » |
| initial | Hace que la propiedad use su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |