Conversor de interletraje

• Conversión multiumidad instantánea: el conversor de interletraje muestra los valores equivalentes en px, em, rem y porcentaje al instante, mientras ajustas el control deslizante o escribes un valor. Cada cambio actualiza la previsualización en vivo y la salida CSS en tiempo real, sin pulsar ningún botón.
• Previsualización en vivo con detección de Tailwind: ve el efecto exacto de los cambios de letter-spacing en un texto de muestra con una previsualización que se actualiza mientras ajustas. El conversor identifica automáticamente la clase tracking de Tailwind CSS más cercana (tracking-tight, tracking-wide, etc.) para que puedas usar la clase de utilidad adecuada de inmediato.
• 100 % privado, sin subidas: todas las conversiones de letter-spacing ocurren localmente en tu navegador. Tus valores nunca salen de tu dispositivo ni se envían a ningún servidor: seguro para sistemas de diseño propietarios y trabajos para clientes.
• Gratis y sin límites: convierte valores de letter-spacing ilimitados sin registro, sin suscripción y sin topes de uso. El conversor de interletraje es totalmente gratis para siempre, sin anuncios que bloqueen la interfaz.

• Diseño de interfaces y tipografía: los diseñadores de interfaces usan el conversor de interletraje para traducir valores de letter-spacing de sistemas de diseño entre unidades. Figma y Sketch suelen usar px o porcentajes, mientras que CSS usa unidades em. El conversor garantiza una traducción precisa entre diseño y código.
• Desarrollo CSS: los desarrolladores frontend usan el conversor de interletraje para generar valores de letter-spacing de CSS listos para producción. La salida CSS copiable y la detección de la clase tracking de Tailwind permiten pasar de la experimentación a la implementación con un clic.
• Ajuste de sistemas tipográficos: quienes mantienen sistemas de diseño usan el conversor de interletraje para definir tokens de tracking coherentes para titulares, texto corrido, pies de foto y texto de display. El control deslizante con marcas ayuda a fijar valores exactos para cada nivel de la escala tipográfica.
• Tipografía adaptable: los diseñadores móviles usan el conversor de interletraje para probar cómo se comporta el letter-spacing a distintos tamaños de fuente. Como las unidades em escalan con el tamaño de fuente, el conversor ayuda a garantizar que el tracking siga siendo proporcional en todos los tamaños de pantalla y puntos de ruptura.
• Diseño de logotipos y marca: los diseñadores de marca usan el conversor de interletraje para afinar logotipos tipográficos y la tipografía de marca. Un control preciso del letter-spacing es esencial para crear tratamientos tipográficos de marca distintivos que sigan siendo legibles en todos los tamaños.
• Texto en mayúsculas y display: los diseñadores que trabajan con titulares en mayúsculas, etiquetas de botones y elementos de navegación usan el conversor de interletraje para dar aire entre las letras mayúsculas. Los preajustes ofrecen puntos de partida rápidos para casos de uso habituales.

El letter-spacing (también llamado tracking en tipografía) es el espacio uniforme entre caracteres en un bloque de texto. Es distinto del kerning, que ajusta el espacio entre pares de caracteres concretos. El letter-spacing aplica un espaciado igual a todos los caracteres y se usa habitualmente para mejorar la legibilidad, crear jerarquía visual o lograr efectos de diseño específicos.

• Titulares y texto de display: los textos grandes se benefician de un interletraje más cerrado (valores negativos) para ganar impacto, o de un espaciado más amplio para una sensación elegante y premium. Las fuentes de display suelen verse mejor con un tracking de -0,01em a -0,03em.
• Texto en mayúsculas: el texto en mayúsculas casi siempre necesita letter-spacing positivo. Sin él, el texto en mayúsculas se ve apretado. Un valor de 0,05em a 0,1em es estándar para navegación, etiquetas de botones y títulos de sección.
• Texto pequeño: los pies de foto y las etiquetas pequeñas (menos de 14px) se benefician de un ligero letter-spacing positivo (0,01em a 0,02em) para mejorar la legibilidad en tamaños pequeños.
• Texto corrido: el cuerpo de texto suele usar letter-spacing normal (0em). Añadir tracking al texto corrido puede reducir la legibilidad al romper las formas de palabra que los lectores reconocen.

1. Ajusta el control deslizante para fijar el valor de letter-spacing, o haz clic en un botón de preajuste para valores habituales. El control cubre un rango amplio desde muy cerrado (-0,15em) hasta muy amplio (0,3em), con marcas etiquetadas para las clases tracking estándar de Tailwind.
2. Revisa todos los equivalentes de unidad en la cuadrícula de salida: los valores en px, em, rem y porcentaje se muestran simultáneamente. La clase tracking de Tailwind más cercana (tracking-tight, tracking-wide, etc.) se detecta automáticamente.
3. Previsualiza el efecto en el texto de muestra en el panel de previsualización en vivo. La previsualización se actualiza al instante mientras ajustas el control deslizante.
4. Copia la declaración CSS o la clase de Tailwind con un clic. La salida CSS incluye el valor exacto de letter-spacing en unidades em.