También disponible en: English · Português · Français · العربية
Generador de clamp CSS
Crea un tamaño de letra fluido a partir de un mínimo, un máximo y el rango de viewport entre ellos, y comprueba qué obtiene quien ha subido el tamaño de su texto.
Qué es un clamp en CSS
La función clamp() de CSS toma tres valores —un mínimo, un valor preferido y un máximo— y devuelve el preferido salvo que se salga de los otros dos. Para tipografía eso significa un tamaño de letra que crece con la ventana y luego se detiene: pequeño en un móvil, mayor en un escritorio, nunca absurdo en un monitor ultrapanorámico. Sustituyó a una pila de media queries por una sola declaración, y por eso la tipografía fluida se generalizó en cuanto los navegadores la admitieron.
Lo interesante es el valor del medio. Para ser fluido tiene que depender del viewport, así que se escribe con unidades vw, y lo que usa todo el mundo es una recta por dos anclajes: este tamaño a este ancho, aquel tamaño a aquel ancho, e interpolar entre ambos. Esa recta es aritmética y no una regla aproximada, y este generador la calcula exacta.
Además hace algo que casi ningún generador hace: enseñarte qué le da tu clamp a alguien cuyo tamaño de letra del navegador no es el de fábrica. Eso resulta importar más que la aritmética.
Cómo se usa
- Fija tus dos anclajes. El tamaño de letra que quieres en tu viewport más estrecho y en el más ancho. Por defecto van 16px a 320px y 24px a 1280px, que es un punto de partida habitual.
- Copia la declaración. El término del medio sale como un rem más un vw. Ese rem no es decorativo: el panel siguiente trata de lo que pasa sin él.
- Cambia el tamaño de letra del lector. La tabla compara tu clamp con los mismos anclajes escritos solo en unidades de viewport, en cuatro anchos, para el tamaño por defecto que escribas. Prueba con 24px.
Por qué el término del medio necesita un rem
Un clamp fluido se escribe normalmente con límites en rem y un medio solo de viewport: algo como clamp(1rem, 1.875vw, 1.5rem). Los límites son relativos al tamaño de letra del lector y el medio es relativo a la ventana, y ese desajuste es el problema. Cuando alguien sube el tamaño de texto por defecto de su navegador, el suelo y el techo suben los dos. Lo que hay entre ellos no se mueve nada, porque nada en ello está medido en las unidades del lector.
La consecuencia es peor que un tamaño simplemente equivocado. Toma ese clamp y un lector con 24px por defecto. En un viewport de 320px obtiene 24,00px. En 600px obtiene 24,00px. En 900px, y en 1280px, sigue obteniendo 24,00px. El término del medio nunca sube por encima del suelo, así que el clamp queda fijado a su mínimo en todo el rango de diseño y la tipografía ha dejado de ser fluida. Escrito con un rem en el término del medio, ese mismo lector obtiene 24,00px en el extremo estrecho y sube hasta 30,67px en el ancho.
Ese colapso no es una rareza de esos números. El término del medio hecho solo de viewport alcanza su valor mayor en el anclaje ancho, y por construcción ese valor es el máximo que pediste, así que cualquier lector cuyo 1rem haya llegado a tu máximo queda retenido en el suelo en todas partes. Es exacto, y por eso el umbral que muestra esta página siempre es igual a tu tamaño máximo.
Hay una simetría desagradable en ello: los lectores para los que el clamp deja de funcionar en silencio son justo los que agrandaron su texto porque necesitaban que respondiera. Nada te avisa, porque en tu máquina a 16px todo se comporta.
Cómo se comprobó esto y qué no cubre
La aritmética es una identidad, así que se verifica como tal. Una recta por dos puntos pasa por los dos, y eso se comprobó contra 576 combinaciones generadas de tamaños, viewports y tamaños raíz en vez de contra un solo ejemplo resuelto: una identidad que se cumple en un caso y no en el resto es justo lo que un ejemplo no puede decirte. Todas ellas aciertan los dos anclajes, dentro del redondeo que permiten los cuatro decimales de una hoja de estilos.
La tabla de comparación es una medición y no una ilustración. Las dos formas se evaluaron como evalúa clamp un navegador —tomar el valor preferido y luego acotarlo— a lo largo de un rango de tamaños de letra del lector y anchos de ventana, antes de escribir nada de esto. Las cifras citadas arriba son esa medición.
Una corrección que merece la pena contar. CSS define clamp(MIN, VAL, MAX) como max(MIN, min(VAL, MAX)), lo que significa que si pones un mínimo mayor que tu máximo, gana el mínimo en todos los anchos y el navegador no te los va a intercambiar amablemente. Este generador reproduce eso en lugar de arreglarlo, porque el arreglo es lo que te sorprendería después.
Lo que no cubre: esto modela font-size, y aunque clamp() sirve para cualquier longitud, el argumento de accesibilidad de aquí es específicamente sobre texto. También supone que el tamaño de letra del lector es lo único que ha cambiado: el zoom de página escala también el viewport y se comporta de otra manera que una preferencia de tamaño de letra. Y un término del medio con un rem no basta por sí solo; hace que el clamp responda al lector, lo cual es necesario y no es toda la tipografía accesible.
¿Por qué es gratis?
Es una recta por dos puntos, calculada en tu navegador. No hay nada que ejecutar en un servidor, así que no hay nada que cobrar ni cuenta que crear.
Nada de lo que escribes se sube, se guarda ni se registra. No sería interesante aunque se hiciera, y esa es justo la idea: una herramienta tan pequeña no tiene por qué recoger nada.