Propiedad CSS letter-spacing
Aprende a usar la propiedad CSS letter-spacing para definir el espaciado entre letras/caracteres. Consulta valores y ejemplos.
La propiedad CSS letter-spacing controla el espaciado horizontal (conocido como tracking) entre los caracteres de un texto. Añade espacio además del espaciado predeterminado que ya proporciona la fuente, en lugar de reemplazarlo.
Resulta muy útil para ajustar títulos, etiquetas en mayúsculas y texto de tipo logotipo, donde el tracking predeterminado puede parecer demasiado estrecho o demasiado amplio. Para párrafos largos de texto corrido, déjalo en normal — incluso ajustes pequeños perjudican la legibilidad.
letter-spacing acepta un <length> (px, em, rem, etc.) o la palabra clave normal. Los valores de longitud pueden ser negativos, lo que acerca los caracteres entre sí. Como el valor es una longitud (no una proporción), usar em resulta conveniente: el espaciado escala con el tamaño de fuente del elemento.
La propiedad es animable, por lo que el espaciado cambia de forma suave cuando se define una transition.
La velocidad de la transición se especifica mediante la animation-timing-function.
| 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 CSS letter-spacing
letter-spacing: normal | length | initial | inherit;Ejemplo de la propiedad letter-spacing:
Ejemplo de la propiedad CSS letter-spacing 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 primer párrafo utiliza el espaciado normal predeterminado, el segundo establece letter-spacing: 4px (caracteres más separados), y el tercero usa un valor negativo, -4px (caracteres más juntos, incluso superpuestos).
En el siguiente ejemplo, letter-spacing se combina con la propiedad transition. Pasa el cursor sobre el texto para ver cómo se anima el espaciado.
Ejemplo de la propiedad letter-spacing con la propiedad transition:
Ejemplo de la propiedad CSS letter-spacing 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>Cuándo usar letter-spacing
- Títulos y etiquetas en mayúsculas. El texto en mayúsculas suele tener un kerning ajustado en la mayoría de las fuentes; añadir entre
0.05emy0.1emde espaciado facilita la lectura y da un aspecto pulido y cuidado. - Versalitas y acrónimos. Un poco de tracking adicional separa los glifos de mayúsculas densos.
- Efectos hover y focus. Como la propiedad es animable, hacer una transición del espaciado crea un efecto de revelación sutil en enlaces y botones.
- Evítalo en texto corrido. Espaciar párrafos largos ralentiza la lectura. Deja el texto de largo alcance en
normal.
Información adicional
- Los navegadores modernos admiten completamente valores subpíxel (fraccionarios) como
0.5px. - Los valores negativos reducen el espaciado y pueden hacer que los caracteres se superpongan — útil para títulos de estilo logotipo compactos, pero hay que probarlos con cuidado.
- Usar
emhace que el espaciado escale con elfont-sizedel elemento; usarpxlo mantiene fijo independientemente del tamaño de fuente. letter-spacingse hereda, por lo que los elementos hijos toman el valor a menos que lo restablezcan anormal.- Esta propiedad controla el espaciado entre caracteres individuales; para espaciar palabras completas, usa word-spacing.
Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| normal | Significa que no habrá espacios adicionales entre los caracteres. Es el valor predeterminado de esta propiedad. | Pruébalo » |
| length | Define un espacio adicional entre caracteres. Se permiten valores negativos. | Pruébalo » |
| initial | Hace que la propiedad use su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |