Cómo crear una tipografía fluida con clamp()

En diseño responsive, a veces necesitamos que ciertos valores, como el tamaño de la fuente, se adapten al tamaño de pantalla, pero sin aumentar ni disminuir demasiado. Para eso existe clamp(), la función de CSS para crear tipografía fluida, escalable y accesible, sin necesidad de usar media queries.

Esta función nos permite definir un valor que escale de forma fluida con el ancho del viewport, pero sin salirse de un mínimo ni de un máximo.

Esta es la sintaxis básica de clamp():

clamp(valor-mínimo, valor-ideal, valor-máximo)

clamp(valor-mínimo, valor-ideal, valor-máximo)

Qué hace

• valor-mínimo: el valor más pequeño que puede tener aunque se trate una pantalla muy estrecha.
• valor-ideal: un valor fluido que variará según el ancho del viewport y que se ajustará entre el mínimo y el máximo.
• valor-máximo: el tope que no debe superar, por muy grande que sea la pantalla.

Ejemplo

font-size: clamp(1rem, 0.5rem + 1.5vw, 2rem);

font-size: clamp(1rem, 0.5rem + 1.5vw, 2rem);

• El tamaño nunca será menor del mínimo (1rem).
• El valor ideal suma rem + vw.
• El tamaño nunca será mayor que el máximo (2rem).

Pero vamos a empezar por el principio, para comprender mejor todos los valores. Ya verás como es mucho más fácil de entender de lo que parece.

Tipografía responsive

El tamaño de la tipografía debe ser más grande en escritorio y más pequeño en dispositivos móviles. Esto es así básicamente por dos razones:

• Por la distancia a la que leemos, ya que cuando sujetamos el móvil con la mano, la pantalla está más cerca que cuando leemos en el ordenador, que suele estar más lejos.
• Por el tamaño de las pantallas, que es más pequeño en móvil y más grande en el ordenador. Un tamaño ligeramente más pequeño en móviles mejora la legibilidad al permitir más caracteres por línea y mantener una lectura cómoda a corta distancia.

Para conseguir esto, antiguamente, se usaban media queries: para dispositivos móviles, se declaraba un valor y, a partir de cierta medida del viewport, se declaraba otro.

Con esto, conseguíamos que los valores en móviles fueran más pequeños que en escritorio. ¿Pero qué pasaba con los tamaños intermedios? Justo antes de los puntos de ruptura establecidos por las media queries, se producía un salto. No había un cambio de tamaño fluido.

Esto era un problema porque había muchos dispositivos en los que el tamaño de la letra no era el ideal para ese tamaño de dispositivo.

Tipografía fluida

La solución a estos saltos llegó con las unidades de viewport: vw. Declarando el tamaño de la letra con vw, se calculaba el valor del tamaño respecto al ancho del viewport, de manera fluida.

1 vw equivale al 1 % del ancho de la ventana.

Por lo tanto, declarando el tamaño de la letra con unidades de viewport, conseguíamos que el tamaño cambiara proporcionalmente a medida que cambiaba el tamaño del viewport.

Pero el problema no estaba resuelto del todo, por dos motivos importantes:

1. Había un grave problema de accesibilidad.
2. Al no haber límites, en tamaños de pantalla pequeños el tamaño de la letra quedaba demasiado pequeño y en tamaños de pantalla grandes, el tamaño de la letra quedaba demasiado grande.

El problema de accesibilidad se daba porque declarar tamaños de la letra con unidades de viewport no permite al usuario cambiar el tamaño predeterminado.

Si declaramos las unidades en rem o em, el usuario puede cambiar el tamaño en las opciones de configuración del navegador. De forma predeterminada, 1rem son 16px, pero el usuario puede cambiar este valor si tiene necesidades diferentes. Si tiene dificultades para ver las letras pequeñas, puede establecer un tamaño mayor, y todos los valores de rem serán mayores proporcionalmente.

Esta ventaja se pierde si declaramos en unidades de viewport. Por eso, no es accesible usar vw.

Fluidez visual sin perder accesibilidad

El valor ideal combina unidades rem + vw para conseguir fluidez visual sin perder accesibilidad.

Al sumarle un valor en unidades relativas, el resultado siempre será relativo, es decir, tendrá en cuenta el valor que el usuario haya configurado en las propiedades del navegador.

Una vez que tenemos claro por qué usamos la suma de valores en rem y en vw para declarar el tamaño ideal, vamos a ver cómo decidimos qué valores concretos declarar.

Cómo decidimos qué valor es el ideal

Te voy a explicar paso a paso de dónde sale la suma del valor ideal.

Paso 1: Definir tamaños extremos del viewport

Lo primero que hacemos es definir el ancho mínimo y el ancho máximo del viewport. El ejemplo típico es:

• Viewport mínimo: 360px (móviles)
• Viewport máximo: 1440px (escritorio)

Paso 2: Elegir los tamaños de fuente de los extremos

Elegimos el tamaño de fuente que queramos declarar en esos extremos:

• Tamaño mínimo deseado: 1rem (16px)
• Tamaño máximo deseado: 3rem (48px)

Paso 3: Convertir los valores

Convertimos los valores de tamaño del viewport a rem

Asumiendo que 1rem = 16px:

• 360px = 22.5rem
• 1440px = 90rem

Paso 4: Calcular la pendiente (slope)

La pendiente define cuánto debe crecer la fuente por cada unidad que aumenta el viewport.

pendiente = (tamaño_máx - tamaño_mín) / (viewport_máx - viewport_mín)
          = (3 - 1) / (90 - 22.5)
          = 2 / 67.5 ≈ 0.02963 rem/rem

pendiente = (tamaño_máx - tamaño_mín) / (viewport_máx - viewport_mín)
          = (3 - 1) / (90 - 22.5)
          = 2 / 67.5 ≈ 0.02963 rem/rem

Multiplicamos la pendiente por 100 para convertirla a vw:

pendiente_en_vw = 0.02963 × 100 = 2.963vw

pendiente_en_vw = 0.02963 × 100 = 2.963vw

Calculamos el valor base (intersección):

El valor base es lo que debería medir la fuente cuando el viewport fuera 0 (aunque eso nunca ocurra). Se calcula así:

base = tamaño_mín - (pendiente × viewport_mín)
     = 1rem - (0.02963 × 22.5)
     = 1rem - 0.6666rem = 0.3333rem

base = tamaño_mín - (pendiente × viewport_mín)
     = 1rem - (0.02963 × 22.5)
     = 1rem - 0.6666rem = 0.3333rem

Paso 5: Construir la fórmula completa

font-size: clamp(1rem, 0.3333rem + 2.963vw, 3rem);

font-size: clamp(1rem, 0.3333rem + 2.963vw, 3rem);

Esta fórmula asegura que:

• A 360px, el tamaño sea 1rem
• A 1440px, sea 3rem
• Y para los valores intermedios escalará de forma suave, accesible y legible

Ahora, el modo fácil

Obviamente, no hace falta que calculemos nosotros todo esto. Solo tenemos que definir:

• Ancho mínimo y máximo del viewport
• Tamaño mínimo y máximo que queremos declarar

Y usar una de las muchas calculadoras de Clamp() que hay publicadas.

No solo para tamaños de fuente

Usar clamp() con rem + vw como valor ideal es una estrategia muy potente, no solo para declarar tamaños de fuente, sino también para declarar otras reglas, como los interlineados y espaciados, y lograr así un ritmo vertical fluido.

Con esta función, te evitas usar media queries y, si lo haces bien, no solo ganas en legibilidad, sino también en accesibilidad.

Una vez entiendes estos conceptos, puedes construir tus propias escalas fluidas con confianza, sabiendo que se verán bien, no solo en todos los dispositivos, sino para todos los usuarios.

¿Te gustaría que tu web tuviera una tipografía fluida, accesible y bien escalada desde el primer día? Así diseño webs corporativas en WordPress.

Te lo ha contado

Ana Cirujano

Soy diseñadora y ayudo a negocios online a fortalecer su marca, mejorar la experiencia de usuario y obtener mejores resultados.

Quién soy Cómo te puedo ayudar