Las escaleras tipográficas son honestas pero pesadas: tamaños en dispositivos móviles, más en tabletas, más en computadoras de escritorio y un nivel de encabezado en el medio que siempre muestra la costura. abrazadera escribe el mismo crecimiento en cada ancho y límites donde importa, todo en una sola declaración.

h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem); }

Prefiero una relación, no vw crudo

  1. Escriba la expresión del medio como una parte rem fija más una parte vw; la parte rem es lo que evita que los títulos se adelanten al cuerpo del texto en ambos extremos.
  2. abrazadera (mínimo, preferido, máximo) limita el resultado para que las ventanas de visualización pequeñas mantengan un tamaño legible y lo limita para que una solicitud de barra lateral de 4K nunca devuelva un encabezado de nueve rem.
  3. La combinación importa: rem-growth escala con la configuración de fuente del usuario, mientras que vw no, y ese emparejamiento es lo que le da tolerancia a este truco.

Sigue liderando honesta

Empareje la abrazadera con una altura de línea sin unidades para que las escalas principales con los glifos en lugar de luchar contra ellos. Luego, el ritmo del párrafo sobrevive a cada paso de la escala, que es la parte que la gente olvida y la parte que los lectores sienten apretada o etérea.

Muy interesante en el sentido de que elimina trabajo: un conjunto completo de pasos de encabezado tiene tres números por nivel, y los números sobreviven a una revisión de diseño porque su razonamiento cabe en una oración.