| Definición | Establece la separación entre las letras del texto |
|---|---|
| Valores permitidos | Uno y sólo uno de los siguientes valores: |
| Valor inicial | normal |
| Se aplica a | Todos los elementos |
| Válida en | medios visuales |
| Se hereda | si |
| Definición en el estándar | w3.org/TR/CSS21/text.html#propdef-letter-spacing |
Ejemplos de uso
Aunque CSS 2.1 incluye numerosas propiedades relacionadas con el texto, no dispone de algunas de las características más avanzadas de los lenguajes y aplicaciones específicos para el control de la tipografía.
Así, la propiedad letter-spacing es una simplificación de las opciones tracking y kerning disponibles en algunas aplicaciones específicas.
El valor normal indica que el navegador se encarga de determinar la separación óptima entre las letras del texto. Esta separación se hace más evidente cuando se justifica el texto con la propiedad text-align:
text-align: left; letter-spacing: normal
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi at arcu. Nunc varius orci in erat. Fusce venenatis est eget arcu sodales tempor. Ut lobortis augue sed elit. Nam neque. Sed et lorem a nunc ultrices molestie. Sed vitae nisi ut odio ornare sollicitudin. Vivamus eget lacus. Morbi consequat, lectus non porttitor porttitor, lorem arcu tincidunt ante, eu laoreet lorem mi ut velit. Vestibulum non neque.
text-align: justify; letter-spacing: normal
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi at arcu. Nunc varius orci in erat. Fusce venenatis est eget arcu sodales tempor. Ut lobortis augue sed elit. Nam neque. Sed et lorem a nunc ultrices molestie. Sed vitae nisi ut odio ornare sollicitudin. Vivamus eget lacus. Morbi consequat, lectus non porttitor porttitor, lorem arcu tincidunt ante, eu laoreet lorem mi ut velit. Vestibulum non neque.
Si se indica una medida, se considera que es el espaciado adicional que se añade a la separación normal de cada letra:
letter-spacing: 0
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi at arcu. Nunc varius orci in erat. Fusce venenatis est eget arcu sodales tempor.
letter-spacing: 2px
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi at arcu. Nunc varius orci in erat. Fusce venenatis est eget arcu sodales tempor.
letter-spacing: 0.3em
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi at arcu. Nunc varius orci in erat. Fusce venenatis est eget arcu sodales tempor.
letter-spacing: 1pt
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi at arcu. Nunc varius orci in erat. Fusce venenatis est eget arcu sodales tempor.
Si se utilizan medidas, también es posible indicar valores negativos, de forma que la separación entre letras sea inferior a la normal:
letter-spacing: 0
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi at arcu. Nunc varius orci in erat. Fusce venenatis est eget arcu sodales tempor.
letter-spacing: -1px
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi at arcu. Nunc varius orci in erat. Fusce venenatis est eget arcu sodales tempor.
letter-spacing: -0.1em
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi at arcu. Nunc varius orci in erat. Fusce venenatis est eget arcu sodales tempor.
letter-spacing: -0.5pt
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi at arcu. Nunc varius orci in erat. Fusce venenatis est eget arcu sodales tempor.
Si el texto está justificado, el navegador puede ignorar o aplicar parcialmente el valor establecido en la propiedad letter-spacing. El estándar CSS 2.1 no indica el algoritmo que se debe utilizar para determinar la separación entre letras, por lo que el aspecto del texto varía en cada navegador.
Si la separación entre letras es diferente a la separación normal, el estándar CSS 2.1 indica que los navegadores no deben utilizar ligaduras tipográficas.
La propiedad letter-spacing se aplica normalmente en los titulares de sección o en zonas cortas de texto para conseguir efectos gráficos avanzados.
Para controlar la separación entre palabras, CSS 2.1 dispone de la propiedad word-spacing.