El ajuste óptico de los márgenes

Dos elementos alineados al mismo píxel pueden verse desalineados, y no es una ilusión que se pueda ignorar: es cómo funciona la percepción de bordes. La tipografía profesional lleva siglos corrigiendo esas discrepancias a mano, y en CSS la mayoría de esas correcciones siguen siendo manuales porque la propiedad que las automatiza solo la implementa un motor.

Por qué la alineación medida no es la vista

Tres discrepancias, todas de percepción y todas medibles en la práctica.

Las formas redondas parecen más pequeñas. Una O y una H de la misma altura métrica se ven distintas: la O parece menor porque solo toca la línea superior en un punto, mientras que la H la toca en todo su ancho. Los tipógrafos lo corrigen dibujando las redondas ligeramente desbordadas por arriba y por abajo. Es una corrección que ya viene hecha dentro de la fuente y que conviene conocer porque explica por qué las alturas de glifo no son exactamente lo que dice la métrica.

La puntuación al principio de línea abre un hueco. Una línea que empieza por comillas o por una raya de diálogo tiene, en la parte alta, mucho menos tinta que las de abajo. El ojo lee el bloque como si estuviera sangrado, aunque el borde izquierdo esté en el mismo píxel.

Los caracteres pequeños al final de línea desalinean el borde derecho. Un punto o una coma al final de una línea justificada dejan un hueco visual respecto a las líneas que acaban en letra.

La puntuación colgante y su soporte

La solución tipográfica clásica es colgar la puntuación fuera del bloque, de forma que el borde óptico lo marquen las letras. CSS lo expresa así:

.articulo p { hanging-punctuation: first last; }

first cuelga la puntuación de apertura al principio del primer renglón, last la de cierre al final del último, force-end y allow-end controlan el comportamiento en el borde final de cada línea.

El soporte es el problema: solo Safari la implementa, desde la versión 10 y de forma completa desde la 26.5. Chromium y Firefox no la tienen. Como es una propiedad, degrada sola —se descarta y no pasa nada— así que ponerla es gratis y beneficia a una parte de los usuarios. Pero no se puede construir un diseño sobre ella.

La alternativa manual funciona en todas partes y consiste en desplazar el bloque hacia fuera la anchura aproximada del signo:

.cita {
  /* el bloque entero se desplaza y el texto vuelve a su sitio */
  margin-inline-start: -0.42em;
}

.cita p::before { content: open-quote; }
.cita p::after  { content: close-quote; }

El valor en em es una estimación de la anchura de la comilla en esa fuente, así que hay que medirlo una vez por familia. Al estar en em, se mantiene correcto a cualquier tamaño.

La misma técnica sirve para los marcadores de lista, los guiones de una enumeración y cualquier signo que deba quedar fuera del bloque de texto.

El tracking como función del tamaño

El espaciado entre letras que una fuente trae de fábrica está pensado para un cuerpo de texto, en torno a 16 píxeles. A tamaños de titular ese espaciado se ve suelto, y a tamaños muy pequeños o en mayúsculas se ve apretado.

La corrección profesional no es un valor global sino una curva: espaciado ligeramente negativo a medida que crece el tamaño, positivo a medida que baja, y positivo también en las mayúsculas y las versalitas, que están dibujadas para aparecer sueltas dentro de un texto en minúsculas.

Como letter-spacing en em ya escala con el tamaño, lo que hay que ajustar es el coeficiente, paso a paso de la escala tipográfica:

:root {
  --track-4: -0.022em;   /* titular grande */
  --track-3: -0.017em;
  --track-2: -0.011em;
  --track-1: -0.005em;
  --track-0:  0;         /* cuerpo, el diseno de la fuente */
  --track-menos: 0.01em; /* texto pequeno */
  --track-caps: 0.06em;  /* mayusculas y versalitas */
}

h1 { font-size: var(--t-4); letter-spacing: var(--track-4); }
h2 { font-size: var(--t-3); letter-spacing: var(--track-3); }
p  { font-size: var(--t-0); letter-spacing: var(--track-0); }

.rotulo {
  font-size: var(--t-menos);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  word-spacing: 0.08em;
}

Fíjate en el word-spacing del rótulo: al abrir el espacio entre letras, el espacio entre palabras deja de destacar y las palabras se funden. Abrirlo un poco restablece la separación entre unidades de lectura. Es el ajuste que casi nadie hace y que distingue un rótulo en mayúsculas bien compuesto de uno simplemente estirado.

Y un aviso: el espaciado negativo tiene un límite estrecho. Pasado un punto las letras se tocan, las ligaduras se rompen y la legibilidad cae. Los valores útiles rara vez bajan de -0.03em.

El centro óptico

Un contenido asimétrico centrado geométricamente se ve descentrado. El caso canónico es el botón de reproducir: un triángulo apuntando a la derecha tiene su masa a la izquierda, así que centrado por su caja parece desplazado hacia atrás.

.boton-reproducir svg {
  /* el triangulo se desplaza hacia su vertice */
  transform: translateX(6%);
}

El mismo problema aparece en tres sitios más:

• Un botón con un icono a la izquierda necesita menos padding en ese lado que en el otro, porque el icono tiene menos peso visual que una letra.
• Un texto en mayúsculas centrado verticalmente en una caja se ve bajo, porque no tiene descendentes y su masa está por encima del centro de la caja.
• Un carácter suelto centrado en un círculo —una inicial en un avatar— casi nunca está donde debería, por la misma razón.

La corrección siempre es un desplazamiento pequeño en em o en porcentaje, nunca en píxeles, para que sobreviva al cambio de tamaño.