Escala tipográfica fluida
H1 a párrafo. Un ritmo, tres anchos.
Calcula la escala de H1 a párrafo y ve el corte en móvil, tablet y escritorio. El px es la entrada; al lado salen rem, em, vw y el clamp CSS.
Un Hn arrastra el ritmo. El lienzo cambia de ancho sin redimensionar el navegador.
La escala de marca se talla en el diseño. El diagnóstico es otro encargo.
La escala sobre un ancho real
Cambias un Hn y el resto sigue el ritmo. El px es la entrada; al lado van rem, em, vw y el clamp CSS.
768 px
Medida del párrafo —
El titular tiene que leerse a la primera (H1)
El H2 nombra la sección y agrupa lo que viene debajo (H2)
El H3 abre un apartado cuando la sección se alarga (H3)
El H4 marca un detalle o un paso, sin competir con el H1 (H4)
El párrafo existe para leer, no para titular. Lleva la explicación, el matiz y el ejemplo que los encabezados no pueden cargar. En la web la medida importa tanto como el tamaño: entre 45 y 75 caracteres por línea el ojo recorre el renglón sin saltar de más ni atascarse. Por debajo, cada frase se parte; por encima, se pierde el inicio al llegar al final. Este texto sirve para probar ese corte a 390, 768 y 1280: cambia el ancho y mira si el cuerpo sigue siendo un párrafo o se vuelve una columna de fragmentos.
Un segundo párrafo comprueba el ritmo entre bloques: el espacio, el interlineado y si el tamaño del cuerpo aguanta más de un graf. Si el primero ya se lee, este confirma que la escala no cansa en la lectura continua.
Cómo leerla
El slider es el viewport. El número es el tamaño de la escala.
-
Un Hn arrastra la escala
H1 a H4 guardan el ritmo de partida. El párrafo se edita aparte. El px no cambia al mover el lienzo: cambia el corte y las unidades vw.
-
Medida de 45 a 75
Un párrafo de lectura aguanta entre 45 y 75 caracteres por línea. Fuera de esa franja, o aprietas el tamaño o cambias el ancho de columna.
-
El H1 no se come el móvil
Si a 390 el titular parte en cinco líneas, ese tamaño es de escritorio. O bajas el número o la escala se hace fluida en el encargo.
-
No sustituye una escala de marca
Esto calcula una escala de partida. La que viaja a producción (rem, clamp, ritmos) se talla en el diseño. Si hay que operarla, el camino es el diagnóstico.
Preguntas frecuentes
Escala que se calcula y se ve cortar, no una guía en Figma que nadie abre.
El px que colocas no. El lienzo enseña el corte. La columna de unidades convierte ese px a rem, em (respecto del párrafo), vw de este ancho y un clamp entre 320 y 1280.
Son tres anchos de uso habitual: teléfono, tablet y escritorio. No cubren todos los dispositivos; sí cubren si la escala sobrevive el corte.
Sí, como punto de partida. Copia el clamp: asume raíz de 16px y un tramo 320–1280. Faltan pesos, interlineado fino y excepciones (tablas, legal).
Sirve para ver un corte. Elegir familia, ritmo y excepciones (tablas, cards, legal) es otro trabajo. Si el activo es un sitio B2B, solicita diagnóstico.
¿Quieres una escala que ya nazca en el diseño?
Tallamos el tipo con el layout, no al final. El diagnóstico revisa el activo: familia, ritmo y cortes.