El título más grande de tu web se queda corto.

Lo que midió el estudio

El estudio de taste-skill, un proyecto con licencia MIT que publica su estudio, puntuó un conjunto de webs con un panel y después midió su tipografía a 1440 por 900 px. De las 235 webs que se pudieron usar, 202 tenían texto suficiente para medir. Llama fuertes a las que sacaron 7,5 o más y débiles a las que quedaron debajo de 6,5.

La diferencia más clara está en el texto más grande de la página:

• Mediana de las fuertes: 8,4vw. A 1440 px son unos 121 px.
• Mediana de las débiles: 5,0vw. Unos 72 px.
• El cuarto superior de las fuertes empieza en 12,5vw; el de las débiles, en 6,7vw.
• La relación entre título y texto también cambia, aunque menos: 4,7 veces el tamaño del texto en las fuertes, 4,0 en las débiles.

Un dato que va contra la intuición: el número de renglones del título no separa. Las débiles tienen títulos de dos renglones o menos con más frecuencia que las fuertes (83 % contra 71 %). El problema no es que el título sea largo, es que sea plano.

El CSS

Para que el tamaño crezca con la pantalla sin romperse en el teléfono, usa clamp(): un mínimo para pantallas angostas, el valor en vw en el medio y un máximo para monitores muy anchos.

h1 {
  /* 44 px en el teléfono, 8,4vw en el medio, nunca más de 136 px */
  font-size: clamp(2.75rem, 8.4vw, 8.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.hero {
  /* que el contenedor no lo obligue a partirse en cinco renglones */
  max-inline-size: none;
}

El interlineado apretado y el tracking negativo son elección mía, no del estudio: a ese tamaño, el interlineado del texto corrido deja huecos y las letras se ven sueltas. Pruébalo con tu frase real. Si en el teléfono queda en más de tres renglones, acorta la frase antes que el tamaño.

Si ya tienes una escala propia, este es el escalón más grande: no hace falta un tamaño nuevo, hace falta que el de arriba esté lejos del resto.

Un título grande pide pocas palabras

A 120 px no entra un párrafo. Eso es bueno: obliga a decir en pocas palabras qué gana quien llega a la página, que es lo que tiene que hacer el título. Lo que no entre va en la línea de abajo, a tamaño de texto. Y que haya un solo texto a ese tamaño: si cada sección abre con un título enorme, volvemos a una página donde todo grita igual.

El prompt

Los modelos tienden a volver al tamaño seguro en cuanto cambias otra cosa. Díselo con el número y con la regla:

El título principal de la portada es el único texto grande de la página: font-size: clamp(2.75rem, 8.4vw, 8.5rem), line-height 0.95, letter-spacing -0.04em, text-wrap: balance. No lo metas en un contenedor angosto ni lo achiques para que entre en un renglón. Los títulos de las secciones van bastante más chicos, como máximo la mitad. Si el título no entra en tres renglones en un teléfono de 390 px, avísame para acortar la frase; no bajes el tamaño.

Después, mide tu página en el Slop Score y compara con cómo estaba. Más pasos como este, uno por cada cambio, están en la guía para arreglar una web hecha con IA.