La letter-spacingpropiedad controla la cantidad de espacio entre cada letra en un elemento o bloque de texto determinado. Los valores admitidos por letter-spacingincluyen valores relativos a la fuente (em, rem), valores relativos a los padres (porcentaje), valores absolutos (px) y la normalpropiedad, que se restablece a la fuente predeterminada.
Se recomienda el uso de valores relativos a la fuente, para que letter-spacingaumente o disminuya de manera apropiada cuando se cambia el tamaño de la fuente, ya sea por diseño o por comportamiento del usuario.
p ( /* 16 * 0.0625 = 1px */ letter-spacing: 0.0625em; )El punto más importante a tener en cuenta al usar letter-spacinges que el valor especificado no cambia el valor predeterminado, se agrega al espaciado predeterminado que aplica el navegador (según las métricas de fuente). letter-spacingtambién admite valores negativos, que reforzarán la apariencia del texto, en lugar de aflojarlo.
Puntos de interés
- Valores de subpíxeles: en la mayoría de los navegadores, especificar un valor que se calcule a menos de
1pxno resultará enletter-spacingsu aplicación. Actualmente, Firefox 14+ e IE 10 admiten el diseño de subpíxeles; Opera y WebKit no. El parche ha aterrizado, por lo que WebKit ahora admite el espaciado entre letras de subpíxeles. - La
letter-spacingpropiedad es animable con CSS Transitions. - Una de las formas de luchar contra el espacio entre los elementos de bloque en línea es establecer
letter-spacing: -4px;en el contenedor principal de elementos de bloque en línea. A continuación, deberá restablecerletter-spacing: normal;los elementos secundarios. - Rara vez, si es que alguna vez, es una buena idea espaciar letras minúsculas.
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| Trabajos | Trabajos | Trabajos | Más | Trabajos | Trabajos | Trabajos |
Una nota sobre la compatibilidad con navegadores móviles: algunas versiones de Opera Mobile, implementaciones de WebKit no estándar y el navegador NetFront no son compatibles letter-spacing. Los detalles se detallan en el enlace QuirksMode anterior.