07 de 12
Tipografía
Las cuatro caras, la escala y el tracking. Cada paso dibujado a su tamaño real.
El papel llega antes que la letra, y ya compone: el grano, el borde deshilachado y la sombra rasante fijan el tono de la página sin una sola palabra encima. La cara no se elige por gusto sobre un lienzo neutro — se elige para caer sobre esto.
Cada paso se dibuja a su tamaño real. Un número sin la letra al lado obliga a elegir el cuerpo a ojo, y ahí se pierde la escala: el registro publica 36px, pero quien compone la página decide si 36px es un titular o un subtítulo.
Por eso ningún espécimen de esta sección entra a la medida de lectura. Las cuatro caras, los nueve pasos y los tres trackings van sangrados: a cuerpo de párrafo las cuatro caras se parecen, y parecerse es exactamente lo contrario de lo que esta página afirma.
Cuatro papeles, cuatro clases
Las cuatro caras
Glífica flareada
Marca · wordmark
Clase Optima, en versales. El género lo carga la modulación, no la serif. Las versales son las que sostienen el tracking abierto del logotipo.
--font-glif ↳ Marcellus · 0.32em
Cada quien su casa.
Transicional firme
Titulares · despliegue (eje óptico expuesto)
Corre con el eje óptico expuesto: a cuerpo grande el navegador aplica el corte de despliegue en vez de ampliar el remate engrosado de párrafo.
--font-serif ↳ Source Serif 4
Texto de lectura larga.
Grotesca neutra
Texto · interfaz
Callada a propósito. No compite con el titular y no aporta carácter: el carácter ya lo pusieron las otras dos.
--font-sans ↳ Inter
LOTE 0426 · COA
Monoespaciada
Datos · registro
Todo dato de prueba vive aquí. Es lo que hace que el registro se lea como dossier y no como etiqueta de producto.
--font-mono ↳ JetBrains Mono
Cuatro oficios y cuatro caras: en cuanto dos comparten oficio, la página deja de decir cuál manda. Puestas una junto a otra a este cuerpo se ve de un golpe lo que a tamaño de párrafo no se ve — que las cuatro suenan distinto, y que por eso ninguna puede cubrir el turno de la otra.
Lo decidido y lo prestado
Lo decidido es la clase; los cortes que corren son sustitutos abiertos hasta licenciar los reales. El filtro de compra es uno solo: que la familia traiga corte de despliegue propio, no sólo pesos — una serif cara que sólo trae pesos falla igual a cuerpo grande.
Ratio 1.25 · anclada en 16px
La escala
Nueve pasos y ninguno más. Cada muestra corre al cuerpo del token y en la cara con la que ese cuerpo se compone: la escala se ve, no se lee.
Estándar
01 --text-xs
0.75rem (12px) · Monoespaciada
Eyebrow, microcopy, dato
Estándar
02 --text-sm
0.875rem (14px) · Grotesca
Caption, tabla, nota legal
Estándar
03 --text-base
1rem (16px) · Grotesca
Body / lectura larga
Estándar
04 --text-lg
1.125rem (18px) · Grotesca
Body destacado, intro
Estándar
05 --text-xl
1.375rem (22px) · Transicional
H4 / subtítulo
Estándar
06 --text-2xl
1.75rem (28px) · Transicional
H3
Estándar
07 --text-3xl
2.25rem (36px) · Transicional · -0.015em
H2 (tracking −0.015em)
Estándar
08 --text-4xl
3rem (48px) · Transicional · -0.02em
H1 (tracking −0.02em)
Estándar
09 --text-5xl
4rem (64px) · Transicional · -0.02em
Hero tipográfico (el wordmark es vector)
La misma palabra en los nueve pasos, cada uno pintado con su variable. Cambiar la muestra entre paso y paso dejaría de medir la escala y empezaría a medir la palabra; encogerla a media columna acercaría el 01 al 09 y la escala dejaría de verse.
Lo que no entra
No hay quinta cara ni paso intermedio.
Lo que no está aquí no se compone. Un cuerpo elegido entre dos pasos, o una quinta cara traída para resolver un caso, dejan de ser decisiones del sistema y pasan a ser decisiones del día — y el día siguiente decide otra cosa.
La renuncia es lo que hace que la escala mida: nueve pasos que se pueden desobedecer no miden nada, y una escala que no mide es una lista de tamaños bonitos.
Tres pasos, tres contextos
El tracking
Tres valores registrados, cada uno con su oficio. Fuera de estos tres, el tracking de una página es el que trae la cara.
Prueba de lote
--tracking-micro
0.16em
Microcopy en versalitas
LOTE 0426 · 60 CÁPSULAS · COA
--tracking-data
0.02em
Dato de prueba — mono: lote, dosis, COA
Estándar
--tracking-wordmark
0.04em
Wordmark en texto vivo, hasta vectorizar el corte
Cada muestra corre al cuerpo donde ese tracking existe de verdad: 11px el microcopy, 14px el dato. Agrandarlos para que luzcan en la lámina dejaría de probar el tracking del microcopy y probaría el de un titular que nadie compone así.
0.32em · placa
Fuera de la escala
El logotipo no es un tracking: es una placa.
Corre a 0.32em y no está en la escala de tracking: no es una composición que se repita, y su geometría vive en un solo componente. El paso de 0.04em es para el nombre cuando cae dentro de texto vivo.
A este cuerpo se ve que son dos cosas distintas y no dos ajustes del mismo valor: el paso de 0.04em acomoda un nombre dentro de un renglón, y esto de aquí ya no cabe en un renglón.
Dichas y dibujadas
Las reglas de composición
01 · Los titulares
Interlínea de 0.96 a 1 y tracking negativo. A cuerpo grande el espacio por defecto de la cara está calculado para párrafo: sin cerrarlo, un titular de dos líneas se abre y deja de leerse como bloque.
La arquitectura puede ser de club. Los objetos, no.
line-height 0.98 · letter-spacing −0.02em · peso 400
Dos líneas y una sola masa: eso es lo que compra el 0.98. Con la interlínea que trae la cara, el mismo titular se abre y el ojo lo lee como dos frases sueltas que casualmente están juntas.
02 · La prosa
Interlínea 1.7 en columna de 65ch. Más ancha, el ojo pierde el renglón al volver; más apretada, el párrafo se cierra y deja de invitar.
El club entrega cada mes una fórmula y publica lo que lleva. La letra hace la mitad del trabajo: la transicional titula, la grotesca lee, la monoespaciada registra el dato, y la glífica firma una sola vez. Cuando las cuatro se quedan cada una en su oficio, la página se lee como documento y no como campaña — que es exactamente la diferencia entre un estándar publicado y un anuncio.
65ch · line-height 1.7 · grotesca a 16px
03 · El eyebrow
Mono, 10 u 11px, versalitas, tracking de 0.14em a 0.22em. Va con moderación: es firma, no relleno — uno por bloque, y un bloque sin nada que firmar no lleva.
Nonova · sección
11px · 0.14em
Nonova · sección
10px · 0.22em
Los dos pasos, lado a lado y a su cuerpo real: la diferencia entre 0.14em y 0.22em es de un pelo y sólo se decide viéndolos juntos. Publicada como cifra suelta, cualquiera de las dos parece igual de correcta.
- .glifEl logotipo
- .dispTitulares
- .monoDato y rótulo
04 · Las clases
Las cuatro caras se cargan una sola vez, en el marco, y se componen por clase. La grotesca ya la sirve el marco por herencia, así que sólo tres tienen clase. Una página que vuelve a llamar a la misma familia carga un segundo subset de la misma cara.
Tres chips y no cuatro: la ausencia de una clase para la grotesca es el argumento. Una cuarta sería una manera de volver a pedir lo que el marco ya sirve, y ésa es la línea que carga el segundo subset.
Todavía no está decidido
El peso y la interlínea no están decididos.
El registro tiene la escala y tiene los trackings. No tiene ni una escala de pesos ni una de interlíneas: hoy los dos se eligen en cada página. Mientras eso siga así, dos maquetas del mismo bloque pueden salir distintas y las dos parecer correctas — y un sistema en el que las dos parecen correctas no está midiendo nada.
- 01El pesoLos titulares corren en 400 y el énfasis en 500, pero eso es una costumbre, no un registro. Falta decidir cuántos pesos entran y qué hace cada uno.
- 02La interlínea0.96–1 en titular y 1.7 en prosa son las dos puntas. Los pasos de en medio —subtítulo, pie, dato— no tienen valor registrado.
- 03El corteLo que corre son sustitutos abiertos. La clase está cerrada; la licencia de la glífica y la transicional no.