Ajustador de espaciado entre letras

Elige el espaciado entre letras a ojo y conviértelo a valores de CSS, Figma y Photoshop

El ajustador de espaciado entre letras sirve para cambiar el hueco entre una letra y la siguiente (letter-spacing, también llamado tracking o interletraje uniforme) sobre una muestra a tamaño real. Cuando fijas un valor, genera el código CSS y una clase de Tailwind, y convierte ese mismo valor a las unidades de Figma, Photoshop y Word. Por ejemplo, letter-spacing: -0.02em; en un texto de 16px acerca cada letra 0,32px a la siguiente, lo que equivale a −2% en Figma, a un tracking de −20 en Photoshop y a −0,24pt en Word con texto de 12pt.

Escribe cualquier frase en el cuadro de la muestra. La vista ampliada dibuja en grande las primeras letras y marca con rayas los lugares donde se añade el espacio. La escalera de comparación coloca seis líneas por encima y por debajo del valor actual para que elijas a ojo. El gráfico de referencia por tamaño muestra el espaciado que usan Apple SF Pro, Inter y Material 3 en cada tamaño de fuente, junto a tu valor actual.

Por qué y cuándo ajustar el espaciado entre letras

Toda tipografía trae un espaciado por defecto que eligió su diseñador, y la mayoría de los textos se ven bien así. Pero ese espaciado está ajustado para un tamaño y un uso concretos, de modo que el texto muy pequeño, el muy grande y el escrito solo en mayúsculas pueden verse incómodos. Ajustar el espaciado consiste en ensanchar o estrechar un poco los huecos para que se lean mejor.

• Al pasar un diseño a la web: si escribes en CSS el −2% de Figma o el −20 de Photoshop tal cual, el resultado es otro muy distinto. Introduce el valor del diseño en el campo correspondiente del convertidor y obtendrás de inmediato los valores en em y px.
• Títulos grandes que se ven sueltos: cuando las letras crecen, los huecos entre ellas crecen también y se notan. Estrecharlos un poco suele dar un aspecto más compacto, aunque en algunas tipografías ocurre lo contrario, así que compara los valores de arriba y de abajo en la escalera de comparación.
• Texto pequeño y etiquetas en mayúsculas: los pies de foto, las notas, los botones y las etiquetas en mayúsculas se ven menos apretados con un poco más de espacio. La guía de tipografía de Google Fonts también explica que las mayúsculas se leen mejor con más espaciado.
• Logotipos y marcas de palabra: a veces se separan mucho las letras de una palabra corta para crear un ambiente. A partir de 0,1em conviene comprobar que el espacio que queda tras la última letra no descentra el texto.
• Ajustar un documento a una línea o a una página: en Word, cuando una o dos letras pasan a la línea siguiente, se suele arreglar condensando un poco el espaciado. Cada programa usa unidades y menús distintos, que se resumen más abajo.

Cómo usarlo

1. Elige un ejemplo parecido de los de arriba (texto, texto pequeño, título, título grande, etiqueta en mayúsculas, letras de logo) o fija tú mismo la fuente, el tamaño, el grosor y el interlineado. Las fuentes que no están instaladas en este equipo aparecen en la lista como «no está en este equipo».
2. Escribe tu frase en la muestra a tamaño real. La vista ampliada y la escalera de comparación pasan a usar la primera línea de esa frase.
3. Mueve la barra de espaciado o pulsa en la escalera de comparación la línea que se lea mejor. El valor pulsado pasa al centro, de modo que con unas pocas pulsaciones te acercas al valor que buscas. El paso de la escalera puede ser 0,005em, 0,01em o 0,025em.
4. Si ya tienes un valor de un archivo de diseño, introdúcelo en la tabla «Valores en otras aplicaciones» (% de Figma, tracking de Photoshop, pt de Word, etc.). Los demás campos se actualizan, escribas donde escribas.
5. Elige em o px para la salida CSS y copia el CSS completo, una sola línea de espaciado o la clase de Tailwind. También puedes guardar la muestra como imagen o copiar un enlace con la configuración actual para compartirlo.

Conversión de unidades: em, px, %, tracking y pt

Cada programa mide el espaciado con su propia unidad. El em de CSS, el % de Figma y el tracking de Adobe son proporcionales al tamaño de la fuente, así que la proporción se mantiene aunque cambie el tamaño. En cambio, el px y los pt de Word son longitudes fijas, y hay que recalcularlas para cada tamaño si quieres conservar la misma proporción. La tabla siguiente muestra qué valor se introduce en cada programa para −0.02em en un texto de 16px (12pt).

Word fija el tamaño de fuente en pt, así que para igualar un tamaño web en px se usa 1px = 0,75pt (16px = 12pt). El kern de iOS y el tracking de SwiftUI son longitudes fijas en pt, de modo que, con el mismo tamaño numérico de fuente, se introduce el mismo número que en el campo de px. Tailwind CSS tiene las seis clases de espaciado siguientes. Esta herramienta genera el nombre de la clase cuando el valor coincide exactamente y, si no, una clase de valor arbitrario como tracking-[-0.02em].

Un espaciado distinto para cada tamaño de fuente

Incluso dentro de una misma tipografía, el espaciado adecuado cambia con el tamaño. Apple publica para SF Pro una tabla de tracking de 6pt a 96pt, Inter publica una fórmula que da el espaciado a partir del tamaño (−0,0223 + 0,185 × e^{−0,1745 × tamaño}) y Material 3 fija el espaciado de cada uno de sus 15 roles tipográficos. En todos se añade espacio al texto pequeño, pero los detalles difieren. Apple e Inter llegan a 0 hacia los 12px y estrechan en los tamaños de texto (de 14 a 20px). Material 3 da valores positivos (de +0,007 a +0,045em) a los roles de texto y de etiqueta y a los títulos pequeños (Title Medium y Small), y 0 a Title Large y a los roles Headline y Display (solo el mayor, Display Large, tiene −0,004em). En tamaños grandes Inter se queda cerca de −0,022em, mientras que la tabla de SF Pro vuelve a ser positiva desde 24pt y es 0 a partir de 80pt.

La tabla de Apple está en pt y la de Material 3 en sp, así que en la web se leen como el mismo número de px y se pasan a em (con tres decimales). La tabla de Apple es la misma en iOS y en macOS. Como la dirección del espaciado en los títulos grandes cambia de una fuente a otra, lo más seguro es preparar una muestra con la tipografía que vayas a usar y comparar los valores tú mismo.

Dónde cambiar el espaciado en Word y en los programas de diseño

El texto japonés parte de otro valor por defecto. Los requisitos del W3C para la composición de texto japonés (JLREQ) explican que, en principio, los recuadros de los ideogramas, el hiragana y el katakana son cuadrados y los caracteres se componen sin espacio entre ellos (composición compacta, o «solid setting»). Es decir, la base del texto japonés es un espaciado de 0, y solo se ajusta donde hace falta, como en los títulos o en las columnas estrechas. Cada programa pone el ajuste en un sitio distinto.

• Word: en la pestaña Inicio, abre el iniciador del cuadro de diálogo Fuente y ve a la pestaña Avanzadas. En el cuadro Espaciado elige Expandido o Condensado y escribe la cantidad en el cuadro Por (en puntos). Todas las letras seleccionadas cambian en la misma longitud.
• Figma: escribe un valor en % o en px en el campo Letter spacing de las propiedades del texto. La documentación de los plugins de Figma define la unidad de este valor como PERCENT o PIXELS.
• Photoshop, Illustrator, InDesign: escríbelo en el campo de tracking del panel Carácter. La ayuda de Adobe indica que tanto el tracking como el kerning se miden en unidades de 1/1000 em.

Accesibilidad: que el diseño no se rompa cuando el usuario amplía el espaciado

El criterio de éxito 1.4.12 Espaciado del texto (AA) de WCAG 2.2 exige que no se pierda contenido ni funcionalidad cuando el usuario fija el interlineado en 1,5 veces el tamaño de la fuente, el espacio tras los párrafos en 2 veces, el espaciado entre letras en 0,12 veces y el espaciado entre palabras en 0,16 veces. No pide que uses esos valores en tu diseño. Pide que el texto no se recorte ni se solape cuando un lector que lo necesita amplía el espaciado. La marca «WCAG 0,12» de la barra señala ese valor. Comprueba que los botones de ancho fijo y los títulos cortados en una sola línea no se desborden con 0,12em.

La guía de tipografía de Google Fonts explica que el texto solo en mayúsculas se lee mejor con más espaciado y no recomienda el espaciado negativo salvo en tamaños de título muy grandes. Para el texto de lectura, empieza en 0 y compara los valores de arriba y de abajo en la escalera de comparación.

Cómo funciona realmente letter-spacing en CSS

• El valor en em se convierte en px en el elemento donde se declara, y ese valor en px se hereda. CSS Text 3 define el valor calculado de letter-spacing como una longitud absoluta. Por eso, si un elemento padre de 16px tiene letter-spacing: 0.1em, un hijo de 32px hereda 1,6px sin cambios (medido en Chrome 151). Para mantener la proporción en un hijo de otro tamaño, vuelve a escribir el valor en em en ese hijo. La unidad % que añade CSS Text 4 se hereda como porcentaje, y los datos de compatibilidad de MDN indican que se admite desde Chrome 145, Firefox 45 y Safari 7.
• Algunos navegadores añaden espacio también tras la última letra. La especificación indica que no se añade espaciado al principio ni al final de la línea, pero Chrome 151 sí lo añade tras la última letra. Por eso un título centrado se desplaza hacia la izquierda la mitad del espaciado. Dale al bloque del título un padding-left con el mismo valor, o resta ese valor con margin-right en el elemento que envuelve el texto, y vuelve al centro. La última raya atenuada de la vista ampliada es ese espacio.
• Las ligaduras pueden desactivarse. La especificación recomienda no aplicar ligaduras opcionales como fi cuando el espaciado no es 0. Si las necesitas, puedes activarlas con font-feature-settings, y la especificación señala que esa configuración tiene prioridad.
• Las escrituras cursivas conectadas, como la árabe, no reciben espaciado. La especificación indica que no se debe añadir espaciado entre las letras de una escritura que se enlaza.

Errores frecuentes

• Usar el tracking de Photoshop directamente como px: un tracking de −20 no son −20px, sino −0.02em. Con 16px son −0.32px.
• Usar el % de Figma como em: si escribes el −2% de Figma como −2em, las letras se solapan por completo. Divide entre 100 y escribe −0.02em.
• Fijar un valor en px y cambiar después solo el tamaño de fuente: los −0.32px que iban bien con texto de 16px pasan a ser −0.01em, la mitad de la proporción, en un título de 32px. Usa em donde el tamaño cambie.
• Olvidar que el espaciado en em de un padre llega a los hijos como px: un espaciado en em puesto en un título grande se transmite en px al texto pequeño de su interior y lo deja demasiado ancho, o al revés.
• Aplicar espaciado negativo a las mayúsculas: empieza las etiquetas en mayúsculas por el lado ancho. El ejemplo de etiqueta en mayúsculas usa +0.08em.
• Ajustar el texto justo al ancho de un botón fijo: si el usuario amplía el espaciado a 0,12em, el texto se desborda (WCAG 1.4.12). Deja que el ancho del botón crezca con el texto.
• Centrar texto con mucho espaciado: con 0.2em en las letras de un logo, Chrome lo desplaza 0,1em hacia la izquierda. Usa también la corrección explicada arriba.

Límites y precauciones

• La muestra se dibuja solo con las fuentes instaladas en este equipo. Una fuente marcada como «no está en este equipo» en la lista, o un nombre personalizado que no se encuentra, se dibuja con una fuente de reemplazo, por lo que el espaciado puede diferir de la fuente web de tu sitio real.
• Hay aspectos que varían según el navegador, como el espacio tras la última letra o el redondeo de los px fraccionarios. Las medidas de este artículo son de Chrome 151, y no se han medido Safari ni Firefox. La vista ampliada comprueba si el navegador que estás usando añade espacio tras la última letra y te lo indica.
• La documentación de Figma solo dice que las unidades de Letter spacing son % y px, y no indica a qué se refiere el %. Esta herramienta calcula el % como porcentaje del tamaño de fuente, así que compara al menos una vez el valor en px que muestra Figma al cambiar su unidad a px con el campo de px de aquí.
• Guardar como imagen vuelve a dibujar la muestra en un canvas, así que los saltos de línea pueden caer en sitios distintos de los de la pantalla. En los navegadores sin compatibilidad con letterSpacing en canvas (anteriores a Safari 18.4, según MDN), las letras se dibujan una a una y se pierde el kerning.
• Los valores del gráfico de referencia los fijaron Apple, Inter y Material 3 para sus propias tipografías. Con otras fuentes, úsalos como punto de partida y confirma con la muestra.

Fecha de referencia: 22 de octubre de 2026. Basado en W3C CSS Text Level 3 (Candidate Recommendation Draft 2026-08-14) y Level 4 (Editor's Draft 2026-08-14), WCAG 2.2 (2024-12-12), MDN browser-compat-data 8.1.6, Apple HIG Typography (actualizada el 2025-12-16), androidx Material 3 TypeScaleTokens, W3C JLREQ y medidas en Chrome 151.

Fuentes

• 01W3C: CSS Text Module Level 3Candidate Recommendation Draft 2026-08-14. Definición de letter-spacing (normal | longitud), sin espaciado al principio ni al final de la línea, ligaduras opcionales, escrituras conectadas
• 02W3C: CSS Text Module Level 4Editor's Draft 2026-08-14. Porcentajes permitidos en letter-spacing, relativos al tamaño de fuente usado
• 03MDN: letter-spacingbrowser-compat-data 8.1.6 (2026-10-15): valores % en Chrome 145, Firefox 45, Safari 7; letterSpacing de canvas en Chrome 99, Firefox 115, Safari 18.4
• 04W3C WAI: Understanding Success Criterion 1.4.12 Text SpacingAA. Interlineado 1,5, espacio tras párrafos 2, espaciado entre letras 0,12 y entre palabras 0,16 veces el tamaño de fuente sin perder contenido
• 05Google Fonts Knowledge: Tracking / letter-spacingLas mayúsculas se leen mejor con más espaciado; el espaciado negativo, solo en tamaños de título muy grandes
• 06Apple: Human Interface Guidelines, TypographyTabla de tracking de SF Pro por tamaño (6 a 96pt, 1/1000 em), actualización registrada el 2025-12-16
• 07Inter: Lab (Dynamic Metrics)tracking = −0,0223 + 0,185 × e^(−0,1745 × tamaño de fuente)
• 08AndroidX: Material 3 TypeScaleTokensTamaño y espaciado (sp) de los 15 roles, de Display a Label
• 09Adobe: Photoshop, espaciado de líneas y de caracteresEl tracking y el kerning se miden en 1/1000 em (la ayuda de InDesign e Illustrator dice lo mismo)
• 10Microsoft: Cambiar los espacios entre texto en WordCuadro de diálogo Fuente, pestaña Avanzadas, Espaciado: Expandido o Condensado; la unidad del valor es pt (documentación de VBA Font.Spacing)
• 11Figma Plugin API: LetterSpacingLas unidades de Letter spacing son PIXELS y PERCENT
• 12Android Developers: TextView.setLetterSpacingEl espaciado entre letras se indica en em
• 13Apple Developer: NSAttributedString.Key.kernEl ajuste entre letras está en pt (el tracking de SwiftUI también)
• 14Tailwind CSS: letter-spacingSeis pasos, de tracking-tighter −0.05em a tracking-widest 0.1em
• 15W3C: Requirements for Japanese Text Layout (JLREQ)En principio, los recuadros de ideogramas, hiragana y katakana son cuadrados y los caracteres se componen sin espacio intermedio (solid setting)

Preguntas frecuentes

Herramientas relacionadas