Tamaños de letra fluidos con clamp()

En esta lección conseguirás que el texto se adapte al ancho de la pantalla sin necesidad de escribir varias media queries.

clamp(mínimo, preferido, máximo) toma tres valores y devuelve el preferido, salvo que se salga de los límites. Combinado con unidades de ventana como vw (1vw = el 1% del ancho de la pantalla), da un tamaño que crece con la pantalla pero nunca se queda ilegible ni se dispara.

En el código de ejemplo, el título mide como mínimo 1,2rem, como máximo 3rem, y entremedias el 5% del ancho de la ventana. Redimensiona la vista previa y verás cómo el texto acompaña al movimiento y se detiene al llegar a los topes.

El descuido típico es usar solo vw sin límites: en un móvil estrecho el texto queda diminuto y en un monitor grande, gigantesco. Los dos extremos de clamp() son precisamente lo que evita ambos extremos.

La misma idea sirve para espaciados y anchos, no solo para tipografía. En diseño web moderno, clamp() sustituye a un montón de puntos de ruptura que antes había que declarar a mano.