Online Tool Store
Vista Previa de Espaciado de Letras
Previsualiza el espaciado entre letras en px, em o rem con controles de fuente, grosor y transformación, y copia el CSS exacto. Funciona en tu navegador.
Esta herramienta funciona totalmente en tu navegador. Tus archivos nunca se suben a un servidor.
Cómo funciona la vista previa de espaciado de letras
- Escribe tu texto de vista previa y ajusta el espaciado de letras, tamaño de fuente, grosor, familia tipográfica y transformación de texto.
- Cambia la unidad de espaciado entre em, px y rem para que coincida con la forma en que está escrita la hoja de estilos de tu proyecto.
- Observa cómo se actualiza la vista previa en vivo mientras arrastras el control deslizante de espaciado.
- Copia las declaraciones CSS resultantes en tu hoja de estilos, o pulsa Restablecer para empezar de nuevo.
Preguntas frecuentes
¿Para qué se usa letter-spacing?
Para ajustar el espacio entre caracteres (tracking) y mejorar la legibilidad, dar énfasis a titulares o lograr un estilo tipográfico concreto, como etiquetas en mayúsculas con espaciado amplio.
¿Cuál es un rango típico de letter-spacing?
Los valores negativos pequeños (como -0.02em) ajustan texto grande, mientras que los valores positivos (0.05em a 0.2em) son comunes en etiquetas en mayúsculas e insignias. El espaciado muy amplio (0.3em o más) se usa para énfasis estilístico.
¿El grosor de fuente afecta cómo se ve letter-spacing?
Sí - los grosores más gruesos tienen formas de carácter naturalmente más anchas, por lo que el mismo valor de letter-spacing puede verse más ajustado o más amplio según el grosor y tamaño elegidos.
¿Puedo copiar el CSS directamente a mi proyecto?
Sí - las declaraciones generadas de letter-spacing, font-size, font-weight, font-family y text-transform están listas para pegar en tu hoja de estilos.
¿El letter-spacing debe ir en px, em o rem?
em es la opción más común porque escala con el font-size propio del elemento, así que el tracking se mantiene proporcional si el texto cambia de tamaño. rem escala con el tamaño de fuente raíz, útil si quieres un espaciado consistente entre distintos tamaños. px es la más predecible, pero no escala en absoluto. Esta herramienta te permite previsualizar y copiar cualquiera de las tres.
¿Qué letter-spacing funciona mejor para texto en mayúsculas?
Las etiquetas y botones en mayúsculas suelen leerse mejor con un tracking algo más amplio (entre 0.05em y 0.15em) para compensar lo juntas que quedan las letras mayúsculas. Usa el control de transformación de texto para previsualizar en mayúsculas antes de elegir un valor.
Cómo nos comparamos
| Feature | Online Tool Store | Calculadoras de letter-spacing | Herramientas de conversión de unidades |
|---|---|---|---|
| Vista previa con control deslizante en vivo | ✓ | ✓ | ✗ |
| Cambio de unidad em / px / rem con conversión correcta | ✓ | ✗ | ✓ |
| Selector de familia tipográfica en la vista previa en vivo | ✓ | ✗ | ✗ |
| Vista previa de transformación de texto (mayúsculas/minúsculas/capitalizar) | ✓ | ✗ | ✗ |
| CSS copiable al instante | ✓ | ✓ | ✓ |
Útil para ajustar el valor exacto de tracking de un titular o etiqueta de botón antes de escribirlo en tu CSS.