Escalas tipográficas para móvil y escritorio

Un h1 de 51px se gana su tamaño en una página de escritorio: ancla la maquetación, fija la jerarquía de un vistazo y aún deja el primer párrafo a la vista. Envía ese mismo título a un teléfono de 375px de ancho y deja de anclar y empieza a devorar: cuatro palabras se parten en tres líneas, el párrafo inicial cae por debajo del pliegue y el lector se topa con un muro de tipografía de display antes de cualquier contenido real.

Una escala tipográfica adaptable resuelve esto aplanando la parte superior, no encogiéndolo todo: el texto de cuerpo se mantiene en 16px en todas las pantallas y la razón baja en las pequeñas; por ejemplo, de 1,333 en escritorio a 1,2 en móvil, lo que hace bajar ese h1 de 51px a unos 33px mientras el texto de cuerpo no se mueve ni un píxel. Las dos escalas comparten una base, un conjunto de pasos y un conjunto de nombres de rol; solo cambia la razón.

Este artículo cubre específicamente la decisión de móvil frente a escritorio; para entender cómo funcionan las escalas y las razones en primer lugar, empieza por nuestra guía de escalas tipográficas.

¿Por qué la escala de escritorio no puede simplemente encogerse?

Porque la parte inferior de la escala está fijada. Para bajar un h1 de 51px a 33px mediante un escalado uniforme, tendrías que multiplicarlo todo por unos 0,65, lo que lleva el texto de cuerpo de 16px a unos 10px. Y el texto de cuerpo es el único tamaño que no tiene margen que ceder en móvil, por dos motivos:

• Legibilidad. El texto en el teléfono se lee a la distancia del brazo, a menudo en movimiento y a plena luz del día. 16px es un mínimo muy usado para la lectura sostenida en móvil; los tamaños de fuente por debajo de él empujan a muchos lectores a hacer zoom con los dedos.
• Una trampa práctica que conviene conocer por su nombre. Safari en iOS hace zoom sobre toda la página cuando el usuario pone el foco en un campo de formulario cuyo tamaño de fuente es inferior a 16px. Una larga cola de informes de error del tipo «¿por qué salta mi página cuando toco el campo de email?» es exactamente este comportamiento; mantener los campos de entrada en 16px lo evita por completo.

Así que la restricción es asimétrica: la parte superior de la escala tiene margen para moverse, la inferior no. Por eso el ajuste para móvil es un aplanamiento.

También hay un motivo perceptual por el que el aplanamiento funciona, en lugar de limitarse a encajar: la jerarquía se juzga en relación con su marco, no en píxeles absolutos. En un lienzo de 1440px de ancho, un h1 necesita elevarse sobre lo que le rodea para organizarlo; en un lienzo de 375px compite con mucho menos, y aproximadamente el doble del tamaño de cuerpo se lee con una autoridad comparable a la del triple del tamaño de cuerpo en escritorio. Una escala tipográfica para móvil es más plana, no más pequeña: la misma jerarquía percibida, re-derivada para un marco más pequeño.

¿Qué cambia en móvil, la base o la razón?

Mantén la base, baja la razón. La base se queda en 16px porque es el punto fijado; la razón baja de 1,333 a algo así como 1,2. Cada rol conserva su número de paso, y cada paso se recalcula.

Un movimiento equivalente es mantener una sola razón y limitar los niveles de encabezado a pasos más bajos: el h1 de móvil usa el paso 3 (38px) en lugar del paso 4 (51px), y cada nivel inferior hace lo mismo. Eso reutiliza los tamaños de escritorio en lugar de calcular nuevos, lo que algunos equipos prefieren para tener un inventario de tamaños más reducido; aunque ten en cuenta el suelo: baja seis roles un paso en una escalera de cinco pasos y el encabezado más bajo aterriza en el tamaño de cuerpo, así que limitar suele ir de la mano de fusionar los roles de encabezado más bajos. Ambos enfoques aplanan la parte superior; el ejemplo trabajado de más abajo usa la bajada de la razón, que mantiene los seis roles diferenciados.

¿Qué aspecto tienen los mismos seis roles con ambas razones?

Base 16px en ambas columnas, tamaños redondeados a píxeles enteros:

Dos detalles merecen una segunda mirada. El rango se comprime de 3,2× el tamaño de cuerpo (51/16) a unos 2,1× (33/16): la jerarquía conserva su orden pero baja la voz. Y la fila de la leyenda se mueve hacia arriba: 16 ÷ 1,2 es 13,3, así que el texto más pequeño se hace ligeramente más grande en la pantalla pequeña. El aplanamiento tira de ambos extremos hacia la base, que es lo que quiere un teléfono: una leyenda de 12px es más difícil de defender a la distancia del brazo que una de 13px.

Abre la escala de móvil en Scale Composer — base 16, razón 1,2 — y arrastra la razón hacia arriba en dirección a 1,333 para ver cómo la jerarquía de escritorio vuelve a emerger paso a paso.

¿Cómo se cambia de escala en un breakpoint?

Dos definiciones de escala, un solo conjunto de nombres. El nombre del rol es la API estable; el valor que hay detrás cambia en el breakpoint. En propiedades personalizadas de CSS:

:root {
  --text-h1: 2.07rem;   /* ≈ 33px — escala de móvil, razón 1.2 */
  --text-h2: 1.73rem;   /* ≈ 28px */
}

@media (min-width: 768px) {
  :root {
    --text-h1: 3.16rem; /* ≈ 51px — escala de escritorio, razón 1.333 */
    --text-h2: 2.37rem; /* ≈ 38px */
  }
}

Los elementos hacen referencia a var(--text-h1) y nunca saben qué escala está activa: los componentes no cambian, la media query se encarga del cambio. La mecánica de @media está documentada en MDN; la decisión de diseño que queda es dónde poner el breakpoint, y un único cambio en algún punto del rango 600–900px es un punto de partida habitual.

Los tokens son lo que hace que la configuración de dos escalas resulte limpia en lugar de ingeniosa. Scale Composer exporta cada escala como tokens DTCG, propiedades personalizadas de CSS, un bloque @theme de Tailwind v4 o Variables de Figma; los nombres de rol se mantienen idénticos en ambas exportaciones, de modo que las definiciones de móvil y de escritorio solo se diferencian en sus valores.

¿Es un cambio brusco la única opción?

No: la tipografía fluida es la alternativa suave. En lugar de dos escalas estáticas y un breakpoint, los tamaños interpolan de forma continua con el ancho del viewport, de modo que el h1 viaja de 33px a 51px de forma gradual en lugar de dar un salto. Las contrapartidas son genuinamente distintas — transiciones más suaves, pero ya no hay una única respuesta a «¿qué tamaño tiene el h1?» — y este sitio cubre la tipografía fluida frente a la basada en breakpoints por separado. Para un primer sistema, dos escalas estáticas son el punto de partida más fácil: más simple de razonar, de probar y de entregar a un equipo.

Encuentra tu propia razón para móvil

Los números de arriba son un punto de partida, no una ley: un producto denso en texto podría aplanar menos (digamos 1,25), y un sitio editorial más. La forma de encontrar tu valor es observar cómo ocurre el colapso: arrastra la razón hacia abajo desde 1,333 hacia 1,2 y fíjate en dónde cada encabezado deja de pelear con la pantalla pero aún no ha dejado de ordenarla, mientras el texto de cuerpo permanece plantado en 16px todo el rato. Empieza desde la versión de escritorio de los mismos seis roles en Scale Composer.