Para separar un par de letras demasiado apretado, primero revisa el espaciado entre letras y el kerning de la fuente del encabezado. En una etiqueta latina corta, un margen en línea local puede abrir un límite, pero interrumpe el ajuste tipográfico allí. Este flujo de trabajo para Mac explica cuándo es apropiado aceptar esa compensación.

¿El problema es el espaciado entre letras, el kerning o una colisión local?

Esta guía está dirigida a quienes ajustan un encabezado web en un Mac y pueden editar su HTML y CSS. El objetivo es mejorar un par de letras que resulta incómodo y mantener el resto del texto en el flujo normal del navegador. El encabezado sintético NOVA STUDIO sirve de ejemplo concreto; eso no significa que esas letras choquen con todas las fuentes.

El espaciado entre letras controla la separación en toda una selección de texto. CSS lo ofrece mediante letter-spacing: los valores positivos aumentan el espaciado y los negativos lo reducen. Por eso, aumentar esa propiedad en todo el encabezado cambia más que el par problemático. Empieza comprobando si un valor negativo heredado causó el problema. MDN: letter-spacing

El kerning usa la información de espaciado almacenada en la fuente. La propiedad CSS font-kerning acepta auto, normal o none; no acepta una distancia personalizada para un par de letras determinado. Al establecerla en normal, se solicita la información de kerning de la fuente, pero no se puede proporcionar un ajuste de par que falte ni garantizar que una combinación concreta se vea bien. MDN: font-kerning

Usa esta guía de decisión antes de añadir marcado:

Lo que observas Primera acción Cuándo continuar
La mayoría de los espacios parecen demasiado estrechos Compara el encabezado con letter-spacing: normal Continúa solo si un par todavía necesita atención
El encabezado se ve distinto al comenzar una animación de texto Compáralo con el texto original sin dividir Investiga cómo se divide el texto antes de hacer ajustes compensatorios
Un límite se ve apretado en una palabra latina corta que, por lo demás, es aceptable Considera un ajuste local del espaciado Acepta que el ajuste tipográfico cambia en ese límite
Es imprescindible conservar exactamente el ajuste tipográfico original Mantén intacto el tramo de texto y compara otra fuente o versión de fuente adecuada Elige una representación que funcione sin insertar un límite

En una página que estés inspeccionando en Chrome, pulsa Command–Option–C y haz clic en el encabezado. El panel Elements selecciona su marcado y la pestaña Styles muestra el CSS aplicable. Busca reglas del encabezado, espaciado entre letras heredado y elementos que envuelvan caracteres individuales. Estos pasos de inspección siguen el flujo de trabajo documentado de Chrome para Mac. Abrir las herramientas para desarrolladores de Chrome

Haz las comparaciones con el tamaño, el peso y la fuente previstos. El ajuste elegido para el texto de ejemplo en Arial es solo una demostración; elige el ajuste real mientras ves el encabezado previsto. Anota las declaraciones originales para poder comparar un cambio a la vez.

¿Qué puede conservar un ajuste local?

Un span sencillo proporciona un punto de referencia para aplicar estilos sin añadir significado propio. Representa a sus elementos secundarios, por lo que un encabezado puede conservar el texto NOVA STUDIO mientras una clase identifica el prefijo que termina en el límite problemático. Estándar HTML de WHATWG: el elemento span

Sin embargo, un elemento en línea y un ajuste de espaciado tienen consecuencias distintas. El borrador actual de recomendación candidata de CSS Text Level 3 del W3C indica que el ajuste tipográfico debe mantenerse continuo a través de los límites entre elementos en línea cuando no hay cambios efectivos de formato. También especifica que los márgenes, bordes o rellenos en línea distintos de cero que separan caracteres interrumpen el ajuste tipográfico en ese límite. Por lo tanto, un margen local no puede garantizar que se conserve el kerning original entre el par ajustado. CSS Text Module Level 3: ajuste tipográfico a través de los límites entre elementos

En el ejemplo, coloca NOV dentro de un único span en línea y deja A justo después. Al añadir un margen al final de ese prefijo, se abre el límite entre V y A. Las demás letras siguen siendo texto en línea normal; no hace falta dar a cada carácter su propia caja. En el texto horizontal de izquierda a derecha, margin-inline-end corresponde al margen derecho. MDN: margin-inline-end

Esta limitación importa al evaluar el resultado: el cambio visible incluye la pérdida de cualquier ajuste tipográfico en ese límite, además del margen añadido. No necesariamente equivale al espaciado original del par más exactamente la distancia especificada. Si es obligatorio conservar el ajuste tipográfico original, mantén intacto el tramo de texto y compara las fuentes.

Prueba un ejemplo local completo en tu Mac

Crea una vista previa independiente antes de adaptar la técnica a un encabezado que mantengas. En TextEdit, elige File → New y después Format → Make Plain Text. Pega el documento completo que aparece abajo, guárdalo como pair-preview.html y, si se te pregunta, elige Use .html. Apple documenta este proceso para crear archivos HTML. Trabajar con documentos HTML en TextEdit en Mac

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Local pair spacing preview</title>
  <style>
    body {
      margin: 2rem;
      background: #fafafa;
      color: #222;
    }

    main {
      max-width: 48rem;
    }

    h1 {
      --pair-gap: 0.02em;
      font-family: Arial, sans-serif;
      font-size: 64px;
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: normal;
      font-kerning: normal;
    }

    .keep-word {
      white-space: nowrap;
    }

    .pair-prefix {
      margin-inline-end: var(--pair-gap);
    }
  </style>
</head>
<body>
  <main>
    <p>Heading preview</p>
    <h1><span class="keep-word"><span class="pair-prefix">NOV</span>A</span> STUDIO</h1>
    <p>Change the pair gap, save, and reload to compare.</p>
  </main>
</body>
</html>

Abre el documento guardado en tu navegador. Mantén el texto del encabezado en la misma línea de origen que se muestra: no hay espacio entre NOV y A, y hay un espacio normal antes de STUDIO. Así se conserva la redacción de la etiqueta sin insertar un carácter de espacio visible o especial.

La propiedad personalizada --pair-gap controla el margen en el límite seleccionado. Su valor inicial es ilustrativo. Con un tamaño de fuente de 64px, 0.02em representa 1.28 píxeles CSS de margen; con 40px, representa 0.8 píxeles CSS. El margen escala con el tamaño del texto, aunque el ajuste visual sigue requiriendo revisión. MDN documenta que los márgenes em son relativos al tamaño del texto. MDN: margin-inline-end

El span exterior .keep-word aplica white-space: nowrap solo a NOVA. Así, esa palabra corta permanece unida y el espacio normal antes de STUDIO sigue disponible para el salto de línea. Evita aplicarlo a todo el encabezado, salvo que necesites intencionalmente una sola línea sin saltos. MDN: white-space

Si más adelante TextEdit abre el archivo como contenido con formato, usa File → Open, selecciona el archivo, elige Show Options y selecciona Ignore rich text commands. Otra opción es activar Display HTML files as HTML code instead of formatted text en TextEdit → Settings → Open and Save. Guía de Apple sobre HTML en TextEdit

¿Cómo eliges el ajuste mínimo que resulte útil?

Haz una comparación controlada en vez de aumentar repetidamente el espacio hasta que llame la atención:

  1. Establece --pair-gap en 0em, guarda y vuelve a cargar. Primero revisa el encabezado sin ajustes.
  2. Prueba 0.01em y luego 0.02em; guarda y vuelve a cargar entre una comparación y otra. Son valores de prueba, no estándares tipográficos recomendados.
  3. Evalúa el par junto con las letras inmediatamente adyacentes. Detente cuando encaje con el ritmo general de la palabra.
  4. Reduce el ancho de la ventana del navegador hasta que el encabezado se ajuste a varias líneas. Revisa el encabezado completo, no solo las letras ajustadas.
  5. Repite la comparación con cada tamaño y peso de encabezado que use tu diseño.

Ten cuidado al comparar un margen de cero con uno distinto de cero. Al cruzar ese umbral se introduce el límite de ajuste tipográfico descrito antes, así que el primer cambio puede ser mayor de lo que sugiere el valor numérico del margen. Si un valor positivo pequeño ya deja el par demasiado separado, elimina la solución provisional y reconsidera la fuente o los estilos existentes del encabezado.

El ajuste también ocupa espacio en el diseño. Las letras que siguen al límite se desplazan junto con el texto, y un encabezado que esté cerca del ancho disponible podría saltar de línea de otra manera. El espaciado local evita añadir espaciado entre letras a todos los huecos, pero no garantiza que se mantenga el mismo final de línea. Antes de conservar el cambio, revisa la disposición tanto en su versión estrecha como en la ancha.

Limita el elemento que impide los saltos de línea a una palabra corta. Si la palabra supera el ancho disponible, puede desbordarse. Reduce el tamaño del encabezado para ese diseño o reconsidera el elemento en lugar de ocultar el desbordamiento. MDN distingue el control de saltos mediante white-space de las propiedades que permiten saltos dentro de las palabras. MDN: white-space

¿Qué ocurre si el encabezado ya usa SplitType?

SplitType es una herramienta de animación que envuelve líneas, palabras y caracteres en elementos. Su documentación oficial recomienda font-kerning: none en los elementos objetivo para evitar pequeños desplazamientos de caracteres al dividir o restaurar el texto. Esa recomendación aborda su flujo de animación; adoptarla puede cambiar el espaciado de todo el encabezado. Documentación de SplitType

Si un encabezado existente usa SplitType, compara el texto original antes de añadir otra corrección. La biblioteca documenta un método de instancia, instance.revert(), que restaura el contenido original. En una implementación que ya administra una instancia de SplitType, usa su ciclo de vida documentado para inspeccionar ese estado original. El ejemplo HTML local de arriba no depende de ninguna biblioteca. SplitType: restaurar el texto dividido

Revisa también el comportamiento al cambiar el tamaño. SplitType indica que las divisiones de palabras y caracteres con posicionamiento relativo pueden reorganizarse, mientras que la división en líneas o el posicionamiento absoluto requieren volver a dividir el texto tras cambiar el tamaño del contenedor. Si la colisión aparente ocurre solo después de un cambio de ancho, investiga ese comportamiento del diseño antes de codificar una corrección permanente para el par. SplitType: texto adaptable

Para esta tarea de ajustar un solo par, la recomendación práctica es evitar dividir los caracteres solo para poder controlar el espaciado. Eso introduce más límites de diseño de los que necesita el ejemplo.

¿Cuándo conviene dejar intacto el tramo de texto?

Usa el ejemplo de margen local solo para un límite elegido deliberadamente entre letras latinas simples. No lo generalices para crear una rutina que envuelva cada posición de una cadena. El W3C advierte que dividir grupos de grafemas o ligaduras con límites entre elementos puede producir una representación incoherente o no deseada. Una posición de carácter en una cadena no es automáticamente un lugar adecuado para interrumpir el ajuste tipográfico. CSS Text Module Level 3: caracteres y letras

Cuando sea imprescindible conservar exactamente el ajuste tipográfico, deja el encabezado como texto continuo, compara sus ajustes de kerning nativos y elige una representación de fuente que resuelva satisfactoriamente el par. Si es aceptable una excepción local controlada, añade un solo límite, usa el margen mínimo que resulte útil y revisa la palabra y los saltos de línea en conjunto.

Fuentes