Componer es restar

Esta página es la muestra tipográfica de Markit. Es dos cosas a la vez: un ensayo que se puede leer de verdad, y una lista que recorre cada pieza de sintaxis Markdown que admite el editor. Ambas tienen que sostenerse al mismo tiempo — una muestra que solo apila sintaxis no engaña a nadie, y solo un texto corrido de verdad delata la línea floja, el margen que respira mal o la costura torpe entre letras y cifras.

La vara de medir de la tipografía nunca ha sido «si queda bonito», sino «cuánto se cansan los ojos después de mil palabras». Suena a perogrullada, pero descalifica a la mayoría de los diseños que lucen bien en una captura.

La primera regla de la página: restar

Lo único en la pantalla de un editor que pertenece de verdad al contenido es el propio texto. Todo lo demás — barras de herramientas, laterales, botones, indicadores de estado — compite con él por la atención. Por eso nuestra primera regla es: en el estado por defecto, los elementos de la interfaz o son invisibles o se retiran al borde de la vista.

En números concretos:

Las cifras de la tabla se alinean con numerales tabulares — un detalle pequeño, pero una columna de números que baila a izquierda y derecha obliga al lector a comparar en vez de comprender.

El blanco agrupa mejor que las líneas

Separar el contenido con filetes es el gesto del principiante; separarlo con espacio, el del oficio. La línea deja un borde duro en la página, mientras que el blanco es invisible:

• 16 px entre párrafos, para que las frases formen grupos
• 24 px sobre un subtítulo y 8 px debajo — apretado abajo, holgado arriba pega el título a lo que gobierna
• 40 px sobre un título mayor, para que la vista haga una pausa natural

Si ese escalonado se aplasta — digamos, bajo una regla de margin uniforme —, la página degenera al instante en una cadena de bloques equidistantes, con la jerarquía sostenida solo por el cuerpo de la letra. El fallo es silencioso: las declaraciones siguen en el código y, a simple vista, todo parece sano.

Fuentes: el latín y el CJK son dos oficios

La sustitución de fuentes en CSS ocurre carácter a carácter, así que el orden de la pila decide quién dibuja tu alfabeto latino. Pon primero una fuente CJK y camelCase, los números de versión como v1.522 y cada letra del abecedario caerán en los glifos occidentales que esa fuente lleva de regalo — casi siempre un añadido menor.

El orden correcto pone primero la fuente latina:

font-family: Charter, 'LXGW WenKai', -apple-system, 'PingFang SC', sans-serif;

Los dos órdenes «funcionan». La diferencia solo se ve en los glifos, así que una revisión de código no la caza — tiene que vigilarla un test.

Un contraejemplo

El fragmento de abajo comete los dos errores clásicos a la vez — la fuente CJK primero y, encima, estilo sintético:

// ⚠️ mal en los dos sitios
const stack = "'PingFang SC', Charter, sans-serif"  // CJK primero: el latín queda sin control
const emphasis = { fontStyle: 'italic' }            // una oblicua no es una cursiva

La cursiva verdadera es otro dibujo de las letras; la oblicua fabricada inclinando es el mismo dibujo, solo volcado. En cuerpos pequeños, los trazos se empastan donde se cruzan.

La negrita sintética es la misma familia de problema. Si a una fuente le falta la negrita real, el navegador engorda los contornos y la relación entre trazos gruesos y finos queda destruida.

La lista de sintaxis

Lo que sigue recorre la sintaxis restante y comprueba, de paso, que bajo esta hoja de estilos nada pelea con nada.

Elementos de línea

En el texto corrido pueden aparecer negrita, énfasis, tachado, código en línea y un enlace externo. Las direcciones reconocidas automáticamente también cuentan: https://example.com . Cuando todo esto se mezcla en un párrafo, la primera víctima es la interlínea — basta un elemento con padding propio para descuadrar la línea.

Las etiquetas son metadatos, no la gracia de la frase, así que se dibujan como píldoras de baja saturación y no como un muro de colores: #tipografía #fuentes #oficio

Listas

Las listas ordenadas son para pasos; las desordenadas, para elementos paralelos:

1. Primero, establecer qué problema se resuelve
2. Después, establecer si merece resolverse
   1. A cuánta gente toca
   2. Cada cuánto muerde
3. Solo al final, cómo resolverlo

Las listas de tareas son para repasos:

• Fijar la caja y la interlínea
• Fijar el orden de la pila de fuentes
• Decidir cómo se ve el énfasis en el texto corrido
• Verificar la puntuación colgante en un dispositivo real

Una lista anidada:

• Tipografías
  • Latinas: Charter, Georgia, Palatino
  • CJK: LXGW WenKai, Source Han Serif, la sans del sistema
• Composición
  • Espaciado donde el latín toca el CJK
  • Compresión de la puntuación

Citas y avisos

Un buen texto merece una buena página.

El fin de la tipografía no es embellecer las letras, sino que el lector olvide que la página existe.

Los cinco avisos llevan cada uno su tono. Son semántica que elige el autor, no adorno que añade la interfaz:

Para lecturas largas, compensa una fuente de texto con cursiva verdadera; los cortes display pertenecen a los títulos.

El archivo .md del disco es la única verdad. Cualquier efecto tipográfico vive en la capa de render y en ningún otro sitio.

Nunca toques el texto del usuario mientras escribe. Un espacio insertado automáticamente acabará en el disco con el próximo autoguardado.

Bloques de código

Un bloque de código debe desplazarse hacia los lados en vez de reventar la caja, y su paleta debe quedarse callada — palabras clave en el color de acento, comentarios retirándose al gris, lo demás en tinta de texto. El resaltado arcoíris grita sobre papel cálido:

/// Mostrar el documento actual en el Finder
@objc private func revealInFinder(_ sender: Any?) {
    guard let url = session.url else { return }
    NSWorkspace.shared.activateFileViewerSelecting([url])
}

Una línea muy larga debe desplazarse, no partirse:

curl -sSL "https://raw.githubusercontent.com/example/repo/main/very/long/path/to/some/file.txt" -o output.txt

Imágenes

Cuando a una imagen le sigue un pie, el hueco entre ambos debe ser más estrecho que el de un párrafo normal — solo así se leen como una unidad.

Al final

El filete de arriba es uno de sus usos legítimos: marca una ruptura real — «el ensayo termina, empieza la coda» —, no la respiración entre párrafos. Cuanto menos se usa, más fuerza tiene la única vez que aparece.

Que un esquema tipográfico se sostenga se reduce a una sola pregunta: al leer esta página de arriba abajo, ¿hubo algún punto en el que te detuviste y notaste la página misma? Donde eso ocurrió, ahí queda trabajo.