Datos clave
- Categoría
- Diseño y color
- Tipos de entrada
- number, text
- Tipo de salida
- json
- Cobertura de muestras
- 4
- API disponible
- Yes
Resumen
Esta calculadora de tipografía fluida CSS te permite generar expresiones clamp() precisas a partir de los límites de tamaño de fuente y del viewport. Al calcular automáticamente la pendiente en unidades de viewport (vw) y la intersección en rem, obtienes un código CSS listo para copiar que adapta tus textos de forma fluida y proporcional en cualquier pantalla sin necesidad de media queries.
Cuándo usarlo
- •Cuando necesitas implementar textos que se escalen de forma fluida entre pantallas móviles y de escritorio sin usar múltiples media queries.
- •Al definir la escala tipográfica de un sistema de diseño responsivo basado en unidades rem y vw.
- •Cuando quieres evitar saltos bruscos de tamaño de fuente y asegurar una legibilidad óptima en cualquier resolución intermedia.
Cómo funciona
- •Introduce los anchos de viewport mínimo y máximo en píxeles para definir el rango de escalado.
- •Especifica los tamaños de fuente mínimo y máximo deseados, junto con el tamaño de fuente base del documento (normalmente 16px).
- •La herramienta calcula la pendiente matemática y el valor de intersección para generar la función clamp() de CSS.
- •Copia la expresión clamp() resultante y previsualiza el comportamiento del texto con el texto de muestra proporcionado.
Casos de uso
Creación de encabezados principales (h1, h2) que se adaptan dinámicamente desde pantallas de teléfonos hasta monitores de escritorio.
Ajuste proporcional de textos de cuerpo de lectura para mantener una longitud de línea cómoda en cualquier dispositivo.
Estandarización de la escala tipográfica en hojas de estilo globales o variables CSS de sistemas de diseño.
Ejemplos
1. Escalado fluido para títulos principales
Diseñador Frontend- Contexto
- Se requiere que los títulos H1 de un blog se adapten de forma fluida entre dispositivos móviles y pantallas de escritorio grandes sin saltos bruscos.
- Problema
- Calcular manualmente la pendiente y la intersección en rem para un rango de 24px a 48px en viewports de 320px a 1200px.
- Cómo usarlo
- Configura el viewport mínimo en 320, el máximo en 1200, el tamaño mínimo de fuente en 24 y el máximo en 48. Deja la fuente base en 16.
- Configuración de ejemplo
-
minViewportPx: 320, maxViewportPx: 1200, minFontPx: 24, maxFontPx: 48, rootFontPx: 16 - Resultado
- Obtienes la expresión CSS clamp(1.5rem, 0.9545rem + 2.7273vw, 3rem) lista para aplicar en la regla del H1.
2. Texto de cuerpo responsivo para accesibilidad
Desarrollador Web- Contexto
- Un sitio web corporativo necesita que el texto del cuerpo de página varíe sutilmente entre 16px y 18px para mejorar la legibilidad en pantallas de escritorio.
- Problema
- Generar una transición suave entre 375px y 1440px de ancho de pantalla respetando la accesibilidad.
- Cómo usarlo
- Introduce 375 y 1440 como límites de viewport, y 16 y 18 como límites de tamaño de fuente, con una base de 16px.
- Configuración de ejemplo
-
minViewportPx: 375, maxViewportPx: 1440, minFontPx: 16, maxFontPx: 18, rootFontPx: 16 - Resultado
- Genera la expresión clamp(1rem, 0.9296rem + 0.3756vw, 1.125rem) que escala el texto de forma casi imperceptible pero efectiva.
Probar con muestras
textEjemplos del Framework CSS Bulma
Ejemplos del framework CSS Bulma incluyendo columnas, componentes, controles de formulario, sistema de diseño y patrones de diseño modernos basados en CSS
title token css
Ejemplos del Framework CSS Milligram
Ejemplos del framework CSS Milligram incluyendo tipografía, formularios, grids y componentes
title token css
Ejemplos de Selectores CSS
Colección de ejemplos de selectores CSS para pruebas de extracción y análisis
title token css
Ejemplos de Tailwind CSS
Ejemplos de Tailwind CSS - Framework CSS utilitario primero con diseño receptivo, componentes y configuración personalizada
title token css
Hubs relacionados
Herramientas de conversión de texto, codificación y normalización
Compara conversión de mayúsculas y minúsculas, conversión de ancho de caracteres, conversión de codificación, manejo de quoted-printable y normalización de texto en un solo hub.
Herramientas de Text
Explora 33 herramientas de text para flujos de utility y encuentra utilidades cercanas con rapidez.
Herramientas de análisis de texto, legibilidad e inspección de contenido
Compara estadísticas de texto, detección de idioma, legibilidad, análisis de sentimiento, revisión de moderación y análisis de patrones en un solo hub.
Herramientas de redacción, resaltado y formato de presentación de texto
Compara herramientas para enmascarar texto sensible, detectar PII, normalizar teléfonos, resaltar frases, centrar texto y formatear diffs en un solo hub.
Preguntas frecuentes
¿Qué es la tipografía fluida en CSS?
Es una técnica de diseño web que ajusta el tamaño del texto de forma continua según el ancho de la pantalla, utilizando la función clamp() de CSS.
¿Cómo calcula la herramienta la expresión clamp()?
Calcula la relación matemática entre el cambio de tamaño de fuente y el cambio de ancho del viewport para obtener la pendiente en vw y el desplazamiento en rem.
¿Por qué se utiliza la unidad rem en lugar de px dentro de clamp()?
El uso de rem respeta las preferencias de accesibilidad del usuario y la configuración de zoom del navegador, a diferencia de los valores fijos en píxeles.
¿Qué sucede fuera de los límites de viewport definidos?
La función clamp() limita el tamaño de la fuente para que no sea menor que el mínimo establecido (en pantallas pequeñas) ni mayor que el máximo (en pantallas grandes).
¿Es necesario configurar el tamaño de fuente base (root font size)?
Sí, permite convertir correctamente los valores de píxeles a rem. Por defecto se asume un valor estándar de 16px.