¿Por qué usar em en lugar de px para letter-spacing?

Con em el espaciado escala con el font-size. 0.05em en 16px es 0.8px, en 24px es 1.2px — misma proporción visual.

¿Cuál es la diferencia entre letter-spacing, word-spacing y line-height?

letter-spacing: espacio entre caracteres. word-spacing: espacio entre palabras. line-height: distancia vertical entre líneas.

¿Cuándo aumentar el letter-spacing?

Texto en mayúsculas (0.05–0.15em), texto pequeño como leyendas, grandes títulos display.

¿Qué valores de line-height mejoran la legibilidad?

Cuerpo de texto: 1.5–1.7. Encabezados: 1.1–1.3. WCAG 1.4.12 recomienda al menos 1.5.

Letter Spacing Tool

Calibra el espaciado de letras, palabras y altura de línea con vista previa y estilos predefinidos.

6 presetspx / em / remCopia CSS al instante

① Ajusta espaciado, altura de línea y tamaño de fuente ② Vista previa en vivo ③ Copia los valores CSS

Presets

Espaciado de letras0em

Espaciado de palabras0em

Altura de línea1.6

Tamaño de fuente (px)16px

Peso de fuente

Familia tipográfica

Transformación de texto

Typography is the art and technique of arranging type. Good spacing creates rhythm, hierarchy, and visual comfort for the reader.

Salida CSS

letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.6;
font-size: 16px;
font-weight: 400;
font-family: DM Sans, sans-serif;
text-transform: none;

¿Qué es letter-spacing en CSS?

La propiedad CSS letter-spacing controla el espacio horizontal entre caracteres individuales (llamado tracking en tipografía de imprenta). Acepta valores positivos o negativos en px, em o rem. Usar unidades em es preferible porque el espaciado escala proporcionalmente con el font-size.

La propiedad word-spacing añade espacio entre palabras, mientras que line-height define el ritmo vertical. WCAG 1.4.12 requiere que no se pierda contenido cuando letter-spacing sea al menos 0.12em, word-spacing al menos 0.16em y line-height al menos 1.5.

Preguntas frecuentes

La propiedad CSS letter-spacing añade espacio uniforme entre cada carácter. En tipografía de imprenta se llama "tracking". Los valores positivos separan los caracteres; los negativos los acercan.

Con em el espaciado escala automáticamente con el font-size. Por ejemplo, letter-spacing: 0.05em en 16px es 0.8px, pero en 24px es 1.2px — manteniendo la misma proporción visual.

letter-spacing controla el espacio entre caracteres individuales. word-spacing añade espacio horizontal entre palabras. line-height establece la distancia vertical entre líneas de texto.

Aumenta letter-spacing para: (1) texto en mayúsculas — necesita tracking extra (0.05–0.15em); (2) texto pequeño como leyendas; (3) titulares display a tamaños muy grandes para un aspecto más refinado.

Para cuerpo de texto, 1.5–1.7 es óptimo. Los encabezados pueden usar 1.1–1.3. Las leyendas funcionan bien a 1.4. WCAG 1.4.12 recomienda al menos 1.5 para contenido de cuerpo.

Los diseñadores usan el espaciado preciso para: guías de estilo de marca, bibliotecas de componentes CSS, diseño editorial con fuentes display, auditorías de accesibilidad WCAG 1.4.12.

WCAG 2.1 SC 1.4.12 establece que no se pierde contenido cuando se aplica: letter-spacing al menos 0.12em, word-spacing al menos 0.16em, line-height al menos 1.5, espacio tras párrafos al menos 2em.

¿Qué es letter-spacing en CSS?

Preguntas frecuentes

Explora nuestra red