Calculadora de tamaños fluidos
Fluid Size Calculator
Calcula la expresión clamp() que hace que un tamaño crezca de forma continua entre dos anchos de pantalla.
Construye un `clamp()` que escala un tamaño suavemente entre dos anchos de ventana: la expresión de tipografía fluida, con la aritmética hecha por ti. Los dos extremos están en `rem`, que es la parte que decide si el resultado es accesible.
Anclas
La expresión
Pendiente
0,833vw
Ordenada en el origen
0,833rem
Rango
1,000–1,500rem
rem, y eso no es una preferencia de estilo. Un clamp en px ignora por completo el tamaño de letra del navegador del lector: un fallo de WCAG 1.4.4 que quien lo escribió no sufrirá nunca, porque no es quien puso su valor por defecto en 24px. El coeficiente vw se queda como proporción de la ventana, y por eso cambiar el tamaño raíz de arriba mueve los dos extremos y deja la pendiente igual.En qué se queda
| Ventana | Tamaño | |
|---|---|---|
| 320px | 16px | |
| 375px | 16.46px | |
| 480px | 17.33px | |
| 640px | 18.67px | |
| 768px | 19.73px | |
| 1024px | 21.87px | |
| 1280px | 24px | |
| 1440px | 24px(fijado) | |
| 1920px | 24px(fijado) |
Conviene saberlo
- · Por encima del ancla superior el tamaño queda fijo, así que ensanchar la ventana deja de cambiarlo. Las dos anclas están en rem, así que sigue haciendo caso al tamaño de letra del lector: la misma expresión escrita en px no lo haría.
¿Estás montando un juego entero de estos? El generador de escala tipográfica produce los tamaños de cada paso para poner entre los límites del clamp.
Cómo se usa
Fija los cuatro anclajes
El tamaño en tu ventana más pequeña, el tamaño en la más grande, y los dos anchos de ventana a los que aplican. Todo lo demás se deriva.
Comprueba la tabla resuelta
Muestra a qué evalúa la expresión en una serie de anchos de ventana reales, marcando aquellos en que manda el clamp y no la pendiente.
Copia la declaración
Un `font-size: clamp(...)`. La pendiente y la ordenada en el origen también se muestran, para cuando quieras entenderla en lugar de pegarla.
Preguntas frecuentes
¿Por qué las unidades son `rem` y no `px`?
Porque un clamp en `px` ignora por completo el tamaño de fuente del navegador del lector. Alguien que puso su valor por defecto en 24px porque lo necesita recibe tus 16px de todos modos: eso es un fallo de WCAG 1.4.4, y uno que el autor nunca experimenta.
¿Los extremos de ventana deberían ser mis puntos de ruptura?
No necesariamente. El clamp se ocupa de todo lo que hay entre ellos, así que los extremos útiles son el teléfono más estrecho que admites y el ancho a partir del cual no quieres que el texto siga creciendo, que suele estar en torno a 1200–1400px y no en tu punto de ruptura más grande.
¿El zoom sigue funcionando?
El zoom de página, sí: cambia el ancho de la ventana y el clamp lo sigue. El zoom solo de texto es lo que protegen los anclajes en `rem`: la parte en `vw` no responde a él, así que sin un componente en `rem` el texto quedaría congelado. Por eso la expresión mezcla los dos.
¿Puedo usarlo también para padding y gaps?
Sí: la expresión es aritmética de unidades y no le importa en qué propiedad acaba. La salida dice `font-size` porque es el caso común; cambia la propiedad y conserva el valor.
Puede recibir de
Generador de esquinas redondeadas
Border Radius Generator
Da forma a cada esquina por separado, incluida la sintaxis de dos valores para formas orgánicas, y emite el CSS.
Generador de CSS Grid
CSS Grid Builder
Dispone una cuadrícula de forma visual con áreas con nombre y emite el CSS de grid-template.
Laboratorio de Flexbox
Flexbox Playground
Activa cada propiedad de flex sobre un ejemplo en vivo y muestra el CSS junto con lo que cambió cada una.
Calculadora de proporción
Aspect Ratio Calculator
Calcula la medida que falta para una proporción dada y enumera los tamaños estándar que coinciden.
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
Formateador y minificador de CSS
CSS Beautifier & Minifier
Formatea o minifica CSS sin reordenar nada, conservando exactamente el flujo de tokens.
Generador de CSS Grid
CSS Grid Builder
Dispone una cuadrícula de forma visual con áreas con nombre y emite el CSS de grid-template.
Generador de escala tipográfica
Type Scale Generator
Construye una escala modular de tamaños de texto y espaciados desde un tamaño base y una razón, exportable como CSS o como tokens.
Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.
Comprobador de contraste
Contrast Checker
Puntúa una pareja de color de texto y fondo contra WCAG 2 y APCA, y propone el color válido más cercano.