Tipografía Fluida y Web Escalable con CSS Clamp y Rem

Con este artículo te voy a enseñar a:

1. Usar la función clamp() para que el tamaño del texto de una web aumente o disminuya en función del tamaño de la pantalla.

2. Escalar una web –es decir, aumentar o disminuir proporcionalmente el tamaño de todos sus elementos– para que siga luciendo bien en pantallas grandes.

Lograr esto antes era un quebradero de cabeza. Con clamp() lo vamos a conseguir con una sola línea de código.

La web que estás viendo ahora mismo tiene implementado clamp() para ajustar el tamaño tanto de la tipografía como de otros muchos elementos en tamaños de pantalla superiores a 1550px. ¡Prueba a cambiar el tamaño de la ventana y lo verás en acción!

Pst: Clamp como verbo en inglés significa “restringir a”. Ya verás ahora que el nombre tiene sentido.

Vamos al lío.

¿Qué es la función CSS clamp()?

La función clamp() es una poderosa herramienta de CSS que permite establecer un rango de valores posible para ciertas propiedades de estilo. 

Esta función toma tres argumentos: 

1. un valor mínimo, 

2. un valor preferente y 

3. un valor máximo. 

La sintaxis es la siguiente:

property: clamp(mínimo, preferente, máximo);

Generalmente, se usa como valor preferente una unidad relativa, como puede ser un porcentaje o vw (que es una unidad relativa al ancho de la pantalla).

Por ejemplo, en términos de tipografía, esto puede usarse para establecer un tamaño de fuente que sea fluido o adaptable al tamaño de la ventana del navegador.

p {   
    font-size: clamp(1rem, 1vw + 0.5rem, 2rem);
}

En este ejemplo, el tamaño de fuente de los párrafos nunca será inferior a 1 rem ni superior a 2 rem. Como valor preferente le hemos pasado un cálculo:

1vw + 1rem

Es decir, le estamos diciendo que queremos un valor preferente igual al 1% del ancho de pantalla + 1 rem. Si este cálculo resulta en un tamaño de fuente inferior a 1 rem o superior a 2 rem, se impondrán los límites establecidos.

Si tomamos como valor del rem 16 px (que es el valor por defecto en los navegadores) y un tamaño de pantalla imaginario de 1900 px nos quedaría así la fórmula:

clamp(16, 0.01 * 1900 + 8, 32) = 16, 27, 32

Es decir, que para un tamaño de pantalla de 1900 px se impondría el valor preferente de 27 px (que expresado en rem, sería 27/16 = 1.6875 rem), ya que es inferior al valor mínimos e inferior al valor máximo.

¿Por qué tanto rem?

Quizá te ha extrañado el uso de “+ 1 rem” en el cálculo del valor preferente. 

Esto lo hacemos principalmente para lograr que el valor resultante esté en rem. Si no lo hiciéramos, el valor estaría en píxeles, ya que vw es relativo al tamaño de pantalla y el tamaño de pantalla el navegador lo expresa en píxeles.

¿Y rem pa qué?

Pues porque es una unidad de medida accesible. No voy a entrar ahora en ello porque se merece un artículo aparte. Solo te diré que si aún expresas los tamaños en píxeles dejes todo lo que estás haciendo y dediques una hora a actualizarte. El mundo te lo agradecerá y tú vivirás más feliz.

Y ahora viene la magia: combinando clamp() con rem

El uso de clamp() con unidades rem es una combinación mágica, especialmente cuando queremos lograr un diseño que escala perfectamente en diferentes tamaños de pantalla.

Las unidades rem son medidas relativas al tamaño de la fuente raíz del documento, que se define en el elemento html. Normalmente, el tamaño de la fuente raíz se establece en 16 px por defecto, pero se puede cambiar según nuestras necesidades. 

Imagina que tienes un icono en tu web. A este icono le has dicho que quieres que mida 2 rem.

Si 1 rem = 16 px, el icono medirá 2 * 16 = 32 px. Hasta aquí todo bien normal.

Si ahora vamos y definimos un valor al tamaño de fuente en la raíz distinto al por defecto…html {font-size: 17px;}Tu icono ahora medirá 2 * 17 = 34 px.

Ahora imagina que prácticamente todos los tamaños de cosas de tu web los has definido en rem. Al modificar el tamaño de fuente raíz, todo lo que habías definido en rem habrá cambiado su tamaño de forma proporcional.

Pero, ¿y si pudiéramos hacer que el tamaño de la fuente raíz se adapte al tamaño de la ventana del navegador para que todo escale de forma relativa al tamaño de la ventana? Pues podemos. ¡Podemos! Simplemente, aplicamos la fórmula que hemos visto antes al font-size definido en el elemento html y ya lo tenemos.

html {    
    font-size: clamp(1rem, 1vw + 0.5rem, 2rem);
}

Este enfoque tiene una implicación asombrosa: todas las propiedades de estilo que utilicen rem se adaptarán automáticamente al tamaño de la ventana. Esto nos permite escalar una web para que se adapte a grandes tamaños de pantalla con una sola línea de código.

Vale, pero de dónde saco los valores para la función clamp

Ya, ¿no es demasiado intuitivo, verdad?

Te doy unos consejos:

• Valor mínimo: teniendo en cuenta que el valor por defecto es 16 px, ¿quieres que elementos y textos de tu web puedan reducir su tamaño? Esto es un poco peligroso. Imagina que tienes un texto a 13 px. Si permites que este texto encoja, fácilmente pasará a ser demasiado pequeño como para poder leerse con comodidad. Lo mismo te ocurrirá con iconos y otros elementos ya de por sí pequeños. Así pues, yo te recomiendo que dejes 1 rem (16 px) como valor mínimo.

• Valor máximo: cuánto quieres que los elementos de tu web puedan agrandarse. De nuevo, va bien pensar en los textos como ejemplo. Si un texto tenía 16px de tamaño, ¿quieres que pueda crecer hasta volverse de 50 px? Lo dudo. Yo creo que un valor razonable estaría entre los 19 px y los 22 px.

• Valor preferido: aquí es más complicado. Puedes leer este artículo si te gustan las matemáticas. Si lo que quieres es ir al grano, usa esta calculadora. Con la calculadora te será facilísimo jugar un poco para encontrar tu tamaño perfecto.

Conclusión

clamp() en combinación con rem son dos herramientas que juntas ofrecen una forma poderosa y elegante de lograr tipografías fluidas y diseños responsivos. Al entender y aprovechar estas funcionalidades, podemos crear sitios web que no solo son visualmente atractivos, sino que también proporcionan una experiencia de usuario excepcional y accesible, independientemente del tamaño de la pantalla del dispositivo.

Recuerda que, a medida que avanza la tecnología, también lo hacen las expectativas de los usuarios. En la era actual de diversidad de dispositivos, tener un diseño que se adapte a todos los tamaños de pantalla y que sea accesible ya no es una opción, sino una necesidad. ¡Así que anímate a jugar con clamp() y rem y crea algo bonito!