Tipografía fluida
Tamaños que siguen la pantalla
Ajustes
El tamaño se queda en el mínimo por debajo del ancho mínimo, en el máximo por encima del ancho máximo, y varía suavemente entre ambos.
CSS generado
font-size: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
Vista previa
Tamaño resultante: 18,09 px
El veloz murciélago hindú comía feliz cardillo y kiwi
Escala tipográfica
| Paso | Pantalla pequeña | Pantalla grande | A 800 px |
|---|---|---|---|
| --step-5 | 39,81 px | 61,04 px | Aa 50,89 |
| --step-4 | 33,18 px | 48,83 px | Aa 41,34 |
| --step-3 | 27,65 px | 39,06 px | Aa 33,6 |
| --step-2 | 23,04 px | 31,25 px | Aa 27,32 |
| --step-1 | 19,2 px | 25 px | Aa 22,23 |
| --step-0 | 16 px | 20 px | Aa 18,09 |
| --step--1 | 13,33 px | 16 px | Aa 14,72 |
| --step--2 | 11,11 px | 12,8 px | Aa 11,99 |
:root {
--step--2: clamp(0.6944rem, 0.6577rem + 0.1836vw, 0.8rem);
--step--1: clamp(0.8333rem, 0.7754rem + 0.2899vw, 1rem);
--step-0: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
--step-1: clamp(1.2rem, 1.0739rem + 0.6304vw, 1.5625rem);
--step-2: clamp(1.44rem, 1.2615rem + 0.8924vw, 1.9531rem);
--step-3: clamp(1.728rem, 1.4799rem + 1.2407vw, 2.4414rem);
--step-4: clamp(2.0736rem, 1.7334rem + 1.7011vw, 3.0518rem);
--step-5: clamp(2.4883rem, 2.027rem + 2.3067vw, 3.8147rem);
}Conversor px / rem / em
Acerca de la herramienta
Esta herramienta calcula un tamaño de fuente fluido con la función CSS clamp(): el texto se queda en un tamaño mínimo en pantallas pequeñas, en un tamaño máximo en las grandes y varía de forma lineal entre ambos. Indicas los dos tamaños y los dos anchos de pantalla en píxeles, además del tamaño de fuente raíz, y obtienes una declaración font-size en rem y vw.
Un control deslizante simula el ancho de pantalla para ver el tamaño resultante. La herramienta también crea una escala tipográfica: con proporciones clásicas, de la segunda menor al número áureo, distintas para pantalla pequeña y grande, genera variables --step-N para tus títulos y textos. Un conversor de px, rem y em completa el conjunto.
Cómo usarla
- Rellena el Tamaño mínimo (px), el Tamaño máximo (px), los anchos de pantalla mínimo y máximo y el Tamaño de fuente raíz (px).
- Mueve el control de Ancho de pantalla simulado para comprobar el Tamaño resultante y copia el CSS generado.
- En Escala tipográfica, elige la Proporción en pantalla pequeña, la Proporción en pantalla grande y el número de pasos por debajo y por encima de la base.
- Pulsa Copiar las variables para obtener las variables --step-N.
- Usa el Conversor px / rem / em para pasar de una unidad a otra.
Preguntas frecuentes
¿Cómo se calcula el valor de clamp()?
La herramienta traza una recta entre el tamaño mínimo en el ancho mínimo y el tamaño máximo en el ancho máximo. De ahí obtiene un valor en rem más un porcentaje de vw, limitado por los dos tamaños convertidos a rem según tu tamaño raíz.
¿Por qué el resultado está en rem y no en px?
Los límites en rem siguen el tamaño de fuente que el usuario ha elegido en su navegador, lo que respeta sus ajustes de accesibilidad. La parte en vw es la que hace variar el tamaño con el ancho de la pantalla.
¿Un tamaño puede reducirse en pantallas grandes?
Sí. Si el tamaño máximo es menor que el mínimo, la pendiente pasa a ser negativa y la herramienta ordena de nuevo los límites, porque clamp() exige que el mínimo sea inferior al máximo.
¿Qué es una escala tipográfica fluida?
Cada paso multiplica el tamaño base por una proporción, por ejemplo 1,25. Con una proporción menor en pantallas pequeñas, los títulos se mantienen proporcionados en el móvil y ganan contraste en pantallas grandes, y cada paso tiene su propio valor clamp().