Escala tipográfica
Una escala con clamp(), y la tabla de a cuántos píxeles queda de verdad.
A tu ventana, ahora mismo
Cada línea usa su clamp() de verdad. Estrecha o ensancha la ventana y verás la escala moverse.
+5Tipografía que respira+4Tipografía que respira+3Tipografía que respira+2Tipografía que respira+1Tipografía que respira0Tipografía que respira-1Tipografía que respira-2Tipografía que respiraA cuántos píxeles queda de verdad
Esta es la tabla que casi ninguna herramienta enseña, y es donde se ven los problemas: un titular que ya está al tope en un portátil mientras el cuerpo sigue pegado a su mínimo se lee «grande y apretado» a la vez.
| Paso | 390 | 768 | 1360 | 1920 | 95 % |
|---|---|---|---|---|---|
| --step-5 | 39.8 | 45.1 | 53.3 | 61.0 | 1700 px |
| --step-4 | 33.2 | 37.0 | 43.1 | 48.8 | 1681 px |
| --step-3 | 27.6 | 30.5 | 34.9 | 39.1 | 1658 px |
| --step-2 | 23.0 | 25.1 | 28.2 | 31.3 | 1629 px |
| --step-1 | 19.2 | 20.6 | 22.9 | 25.0 | 1590 px |
| --step-0 | 16.0 | 17.0 | 18.5 | 20.0 | 1538 px |
| --step--1 | 13.3 | 14.0 | 15.0 | 16.0 | 1461 px |
| --step--2 | 11.1 | 11.5 | 12.2 | 12.8 | 1340 px |
La anchura de ventana a la que ese paso ya casi ha terminado de crecer. Si los titulares llegan mucho antes que el cuerpo, la jerarquía se descompensa en los tamaños intermedios.
Para pegar en tu hoja de estilos
:root {
--step--2: clamp(0.6944rem, 0.6675rem + 0.1104vw, 0.8rem);
--step--1: clamp(0.8333rem, 0.7908rem + 0.1743vw, 1rem);
--step-0: clamp(1rem, 0.9363rem + 0.2614vw, 1.25rem);
--step-1: clamp(1.2rem, 1.1076rem + 0.3791vw, 1.5625rem);
--step-2: clamp(1.44rem, 1.3092rem + 0.5366vw, 1.9531rem);
--step-3: clamp(1.728rem, 1.5462rem + 0.746vw, 2.4414rem);
--step-4: clamp(2.0736rem, 1.8243rem + 1.0229vw, 3.0518rem);
--step-5: clamp(2.4883rem, 2.1502rem + 1.3871vw, 3.8147rem);
}Calculado sobre una raíz de 16 px, que es lo que traen todos los navegadores. El término en rem no es adorno: un font-size que fuera solo vw dejaría de responder al zoom.