Usa el Probador de Espaciado entre Letras gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningún servidor.
Tracking e Interlineado: Los Dos Espaciados Que Dan Forma al Texto
Dos controles de espaciado dan forma a cómo se siente un texto más que cualquier elección de fuente. El tracking, la propiedad CSS letter-spacing, es el espacio entre letras. El interlineado, la propiedad line-height, es el espacio entre lÃneas. Pequeños cambios en cualquiera de los dos pueden convertir un texto apretado en un texto elegante, o convertir un tÃtulo fuerte en un desorden disperso. La herramienta de arriba te permite arrastrar ambos controles sobre un texto de ejemplo en vivo y copiar el CSS cuando se vea bien.
Empieza con el ejemplo tal como está, y luego mueve un control a la vez. Cambiar ambos a la vez hace difÃcil saber qué cambio ayudó. Observa todo el bloque, no una sola palabra: el buen espaciado se muestra en la textura del párrafo, en si el ojo se mueve con fluidez o tropieza.
Tracking: Cuándo Añadir Aire y Cuándo Ajustar
Los tÃtulos en mayúsculas casi siempre se benefician de tracking extra. Las letras mayúsculas son anchas y uniformes, asà que un poco de aire entre ellas, más o menos de 0,05em a 0,2em, hace que se lean como una etiqueta diseñada en lugar de un grito. Por eso las marcas de lujo, las invitaciones de boda y los certificados usan mayúsculas con tracking amplio.
El texto del cuerpo es lo contrario. El texto normal de frases no necesita casi ningún tracking, y cualquier valor por encima de 0,02em empieza a romper las palabras. Ajustar en negativo, o tracking negativo, puede ayudar a que un texto de exhibición muy grande se sienta fuerte y moderno, pero daña rápidamente la legibilidad en tamaños pequeños, donde las letras chocan. Como regla: aplica tracking a los tÃtulos, deja el texto del cuerpo en paz, y ajusta en negativo solo palabras grandes de exhibición.
Interlineado: El Espacio Entre LÃneas
El interlineado controla con qué facilidad el ojo encuentra la lÃnea siguiente. Para el texto del cuerpo, de 1,5 a 1,7 veces el tamaño de letra es la zona cómoda para la mayorÃa de las fuentes. Por debajo de 1,4, las lÃneas se sienten apretadas, sobre todo en fuentes con descendentes largas. Por encima de 1,8, el párrafo se afloja y pierde su sensación de bloque único.
Los tÃtulos pueden admitir un interlineado más ajustado, alrededor de 1,1 a 1,3, porque ocupan solo una o dos lÃneas y la tensión los hace sentir sólidos. Los tÃtulos de varias lÃneas son la excepción: si un tÃtulo ocupa tres lÃneas, aflójalo un poco para que las lÃneas no choquen. La herramienta te permite probar ambos casos escribiendo tu propio tÃtulo en el cuadro de ejemplo.
Cómo Trabajan Juntos el Tracking y el Interlineado
Los dos espaciados interactúan. Un tracking amplio hace cada lÃnea más larga, lo que puede empujar palabras a lÃneas extra, que luego necesitan un poco más de interlineado para seguir siendo cómodas. Un tracking ajustado acorta las lÃneas y puede tolerar un interlineado algo más ajustado. Cuando cambias uno, revisa el otro en lugar de tratar cualquiera de los dos como terminado de forma aislada.
La elección de fuente también cambia el equilibrio. Las fuentes estrechas toleran un tracking más amplio; las fuentes anchas necesitan menos. Las fuentes con ascendentes altos necesitan más interlineado. No existe una pareja perfecta universal, y por eso un probador en vivo supera a una tabla de valores recomendados: tu fuente, tu tamaño y tu texto deciden la respuesta.
Ajustes Prácticos Para Empezar
Para un tÃtulo de sección en mayúsculas, prueba 24 pÃxeles, tracking de 0,08em e interlineado de 1,2. Para texto del cuerpo, prueba 18 pÃxeles, tracking cero e interlineado de 1,6. Para un tÃtulo principal grande, prueba 44 pÃxeles, tracking negativo de 0,01em e interlineado de 1,1. Usa estos valores como punto de partida, pruébalos en la herramienta con tus palabras reales, y ajústalos hasta que el bloque se lea con fluidez de un vistazo. Copia el CSS y usa la misma pareja en todas partes donde aparezca ese elemento, para que tu sitio se mantenga coherente.
Por último, prueba el espaciado en contexto, no de forma aislada. Una pareja que se ve perfecta en una vista previa en blanco puede sentirse distinta dentro de una composición real, junto a imágenes y otros tÃtulos. Pega el CSS en una página de borrador, léelo como lo harÃa un visitante, y ajústalo una vez más si la textura se siente rara. El buen espaciado se juzga leyendo, no midiendo.
Herramientas relacionadas
- Letter Spacing Tester (English version)
- Creador de Firmas Online Gratis
- Generador de Estilos para Botones
Pingback: Letter Spacing Tester - Fine-Tune Tracking and Leading