Diseño web responsive: Tipografía fluida con CSS clamp

Cuando creamos un diseño web, uno de los elementos de comunicación esenciales que tenemos para transmitir lo que queramos es el texto. Y como diseñadores, tenemos que verificar que el texto que usemos sea legible para el usuario. Esta legibilidad la medimos de diferentes formas: usando la tipografía correcta, teniendo un contraste adecuado entre el texto y su fondo, y que tenga un tamaño adecuado. Sobre esto último, siempre hay que tener en mente desde que dispositivo (y tamaño de pantalla) se va a ver nuestra web, para que el texto tenga las dimensiones correctas. Hasta ahora, lo habitual era usar media queries, y asignar distintos tamaños de fuente según el ancho de la pantalla. Es decir, lo que conocemos como diseño responsive. Pero actualmente tenemos una alternativa que no solo es más eficaz, sino que resulta más rápido y fácil de escribir su código. Nos referimos a la tipografía fluida.

La tipografía fluida tiene una ventaja esencial con respeto a asignar un tamaño de fuente a través de media queries. Si con media queries tenemos unos breakpoints con los que delimitamos el ancho de cada dispositivo que tenemos en cuenta. El problema viene que en el intervalo entre cada ancho, el tamaño de fuente siempre es el mismo. Por ejemplo, asignamos que para anchos de pantalla menores a 799px el tamaño de fuente es de 18px, y si es mayor de 799px, el tamaño de fuente es de 28px. Pero claro, es posible que si el ancho de pantalla es de 800px, ese tamaño nos resulte demasiado pequeño. O que en 799px sea demasiado grande. Podríamos hacer multitud de media queries con diferentes breakpoints, para que este salto no sea tan notorio. Pero eso sería un trabajo demasiado grande. Y aquí es donde entran las tipografías fluidas.

Con las tipografías fluidas, hacemos que el tamaño de la fuente esté directamente relacionado con al ancho de la pantalla. Es decir, el tamaño de la fuente se va ajustando dinámicamente según el ancho del dispositivo donde la estemos viendo. No se produce ese salto que teníamos con los media queries. Pero claro, tampoco queremos que este ajuste sea infinito y que, por diseño, siempre nos movamos entre un máximo y un mínimo de tamaño de fuente.

Por lo tanto, tenemos que jugar con tres factores: tamaño máximo de fuente, tamaño mínimo, y el ajuste dinámico entre estos dos valores. Aunque al principio pueda resultar complejo, lo vamos a resolver con bastante facilidad gracias a la función CSS clamp.

Usando CSS clamp para crear una tipografía fluida

Como la función CSS clamp vamos a poder designar todo lo que hemos comentado antes, y hacer que nuestra tipografía estática se convierta en una tipografía fluida. Lo primero, vamos a ver como es esta función:

Entre paréntesis de la función, tenemos los tres valores que ya mencionamos: tamaño mínimo de fuente, tamaño preferido (es el que se va ajustando con respecto al ancho del viewport o pantalla), y el tamaño máximo. El primer y último valor son sencillos de comprender. No son más que el rango de tamaño más grande y más pequeño que queremos que tenga nuestra fuente. Pero el tamaño preferido es algo más complicado de entender, pero vamos a intentarlo.

En el tamaño preferido usaremos la unidad vw o viewport-width, que no es más que el ancho de la pantalla o viewport. El valor 100vw es el 100% del ancho de la pantalla actual. Por lo que el tamaño de nuestra fuente preferida va a ser un porcentaje del ancho en pixeles de la pantalla. Por ejemplo, si decimos que nuestro tamaño preferido es de 3vw, cuando es ancho de la pantalla o viewport sea de 900px, la fuente tendrá un tamaño de 27px. Si el ancho de la pantalla es de 600px, el tamaño de la fuente será de 18px.

h2 {
    font-size: clamp(16px, 3vw, 36px);
    }

Como hemos estado hablando de pixeles para designar el ancho de pantalla, he puesto los valores del tamaño de fuente también en pixeles. Desde aquí, una petición al mundo: siempre que podamos, vamos a utilizar la unidad rem para los tamaños de fuentes. No voy a entrar en detalle, ya que es tema para otro artículo. Pero, en definitiva, el código correcto quedaría así:

h2 {
    font-size: clamp(1rem, 3vw, 2.25rem);
    }

Aquí podemos ver la importancia de establecer unos valores máximos y mínimos para nuestra fuente, para que en anchos de pantalla muy pequeños, el tamaño de la fuente sea tan minúsculo que no se pueda leer. Y que en anchos de pantalla muy grande crezca la tipografía demasiado hasta que sea grotesca.

Designar el valor máximo y mínimo de tamaño de fuente va a ser muy sencillo, ya que desde el propio diseño lo vamos decidir. Pero el tamaño preferido tiene algo más de truco. Por eso toda ayuda es poca, y os vamos a mostrar un par de webs en las que, simplemente introduciendo algunos datos no solo vamos a ver de forma gráfica como se va a comportar nuestra tipografía fluida, sino que nos va a devolver el código CSS necesario para ponerla en funcionamiento.

Herramientas online para calcular tipografías fluidas

Si buscáis por Google seguro que veréis otra herramientas online, aunque voy a centrarme en estas ya que son las que uso de forma más habitual.

La primera es Modern fluid typography editor, de Adrian Bece. En esta deberemos introducir los valores máximos y mínimos de tamaño de fuente, el fluid size (que es lo que hemos venido llamando tamaño preferido) y un tamaño relativo. No hay que asustarse ante tanto dato, ya que lo bueno de esta web es que podemos ver en tiempo real, ya sea mediante una gráfica como una tabla, como se va a ir comportando el tamaño de la fuente según el ancho de la pantalla. Por lo que será muy sencillo ir jugando con los valores fluid size y relative size hasta encontrar el punto que más se ajuste a lo que queremos. En la parte superior vemos que nos devuelve el código CSS, listo para copiarlo.

La otra web es Min-Max-Value Interpolation, de James Gilyead y Trys Mudford. Tal como pasaba en la anterior, hay que insertar los valores máximo y mínimo del tamaño de fuente. La diferencia es que también hay que introducir un valor máximo y otro mínimo de viewport. Entre estos dos valores es donde se va a mover nuestro tamaño preferido. Por encima del tamaño máximo de viewport, se usará el tamaño máximo de fuente, y por debajo del tamaño mínimo de viewport, el tamaño mínimo de fuente. Justo debajo de esto, nos mostrará un ejemplo en forma de texto como quedaría la fuente que acabamos de crear, y podemos jugar con el tamaño del navegador para ver en funcionamiento de nuestra tipografía fluida.

Compatibilidad de la función CSS clamp

Como siempre que pasa en CSS con propiedades y/o funciones relativamente recientes, hay que tener en cuenta la compatibilidad con diferentes navegadores. Con la función CSS clamp, si entramos a comprobarlo en Can I Use.

Para garantizar esta compatibilidad, vamos a trabajar con las feature queries, de las que ya hablamos en su día en día en Silo. Nos quedaría algo así:

h2 {
  font-size: clamp(1rem, 3vw, 2.25rem);
  }

  @supports not (font-size: clamp(1rem, 3vw, 2.25rem)) {
    font-size: min(max(1rem, 3vw), 2.25rem);
  }
}

La compatibilidad la tenemos simplemente usando la función CSS minmax. Solo con eso, nos aseguramos que todos van a disfrutar de nuestra tipografía fluida.

Conclusiones

Con las tipografías fluidas damos un paso más allá a la hora de hablar de diseño responsive y que nos dan múltiples ventajas. Podemos prescindir de los media queries para los tamaños de fuentes, están se van a comportar de forma dinámica según el tamaño de pantalla, y como diseñadores web vamos a escribir menos código.

Pero no vamos a mentir, al principio puede que la curva de aprendizaje de la función CSS clamp sea algo elevada, tanto para comprenderla como sobre la manera utilizarla. Por eso el uso de ciertas herramientas online nos van a servir tanto para generar nuestro código CSS, como para tener una representación visual de como se va a comportar nuestra tipografía según el ancho de pantalla del dispositivo donde vayan a verse.

Esperamos que os haya resultado interesante este tema, y que a partir de hoy empecéis a usar tipografías fluidas todos aquellos que no las conocíais. Como siempre, tenéis abiertos los comentarios para hacernos llegar vuestras dudas, sugerencias y experiencias que queráis compartir con nosotros.