Inter para el texto, otra letra para los títulos.

La señal que más se repite

En el estudio de noviembre, con las 509 webs que la gente midió con una misma versión de las reglas, La tipografía de siempre apareció en 290. Ninguna otra señal se repite tanto.

Lo que la vuelve útil es cómo separa: está en 55 de las 63 webs que sacaron 55 puntos o más, y en 41 de las 167 que sacaron menos de 15. Es decir, en casi nueve de cada diez de las más sloppy y en una de cada cuatro de las más cuidadas. Muchas webs cuidadas usan Inter; lo que casi no hacen es usarla para todo.

Lo que cuenta como elegir

El Slop Score mira qué fuente ocupa la mayor parte del texto. Si es una de las que la IA usa por defecto (Inter, Geist, system-ui, y una segunda fila con Plus Jakarta Sans, Poppins, DM Sans, Manrope, Space Grotesk u Outfit) y además los títulos están en la misma, marca la señal.

Si el H1 o el H2 usan otra fuente que alguien eligió, la cuenta como pareja y la señal pesa mucho menos. Pero no cualquier fuente cuenta como elegida:

• Las serif de reflejo no cuentan: Playfair Display, Fraunces, Instrument Serif, Cormorant, DM Serif, Lora y compañía son lo que la IA elige cuando le pides algo elegante. Con fondo crema, además, el Slop Score las marca como El slop elegante, crema y serif.
• Las monoespaciadas de siempre tampoco: JetBrains Mono, Space Mono o Geist Mono en los títulos no son una decisión, son otra plantilla.
• Una sola fuente nueva alcanza: no hace falta una tercera ni una cuarta. Dos familias, una para títulos y otra para texto, es suficiente.

El CSS para copiar

Descarga la fuente con su licencia, súbela a tu proyecto (por ejemplo a public/fuentes/) y cárgala con @font-face. Con font-display: swap, según MDN, el navegador muestra enseguida una letra de reemplazo y cambia a la tuya cuando termina de cargar, así el título nunca queda invisible.

:root {
  --letra-texto: "Inter", system-ui, sans-serif;
  --letra-titulos: "Tu Fuente", var(--letra-texto);
}

@font-face {
  font-family: "Tu Fuente";
  src: url("/fuentes/tu-fuente.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

body { font-family: var(--letra-texto); }

h1, h2 {
  font-family: var(--letra-titulos);
  font-weight: 500;
  letter-spacing: -0.02em;
}

Deja el H3 y lo de abajo en la letra del texto: si todo pasa a la fuente nueva, vuelves al problema de una sola letra, solo que con otra. El tamaño del título también ayuda a que se note la elección; en un título que domine la página está el clamp() para eso.

Pídeselo así a la IA

Si trabajas con Lovable, v0, Bolt o Cursor, el pedido tiene que decir qué fuente, dónde y qué no tocar. Si no lo dice, el modelo elige por ti, y elige de la lista de arriba.

Cambia solo la tipografía de los títulos.
- H1 y H2 en "[nombre de la fuente]", cargada con @font-face desde
  /fuentes/[archivo].woff2 y font-display: swap.
- El resto del texto sigue en la fuente actual. No toques H3, botones
  ni formularios.
- No uses Playfair, Fraunces, Instrument Serif, Cormorant ni Space
  Grotesk, aunque te parezcan mejores.
- Define las dos fuentes como variables CSS (--letra-titulos y
  --letra-texto) y usa esas variables, no clases sueltas.

Hay un brief más completo, con colores y espacios, en la guía de prompts.

Compruébalo

Mide la web en el Slop Score antes y después del cambio. La señal puede seguir apareciendo, pero con mucho menos peso. Si pesa igual que antes, revisa que la fuente nueva se cargue de verdad (que el archivo exista en esa ruta) y que no sea una de las serif de reflejo.