# Calculadora clamp de tipografia fluida CSS Introduce viewport y tamaños mínimos y máximos para obtener clamp(), CSS copiable y datos de vista previa > Página canónica: https://elysiatools.com/es/tools/css-fluid-typography-clamp-calc - **Categoría:** Design - **Palabras clave:** css, clamp, tipografia fluida ## Descripción general Calcula la pendiente vw y la intersección para tipografía fluida y devuelve clamp() y HTML de vista previa. ## Entradas - **Viewport minimo** (number) - **Viewport maximo** (number) - **Tamano minimo de fuente** (number) - **Tamano maximo de fuente** (number) - **Tamano de fuente base** (number) - **Texto de muestra** (text) ## 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. ## 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. ## Herramientas relacionadas - [Constructor de ejes e instancias de fuentes variables y CSS font-variation-settings](https://elysiatools.com/es/tools/variable-font-axis-instance-and-css-font-variation-settings-builder): Sube una fuente variable (TTF/OTF/WOFF/WOFF2) para inspeccionar sus ejes fvar e instancias con nombre, previsualizar la interpolación en vivo en el navegador y generar CSS font-variation-settings listo para pegar, las propiedades de alto nivel equivalentes y un bloque @font-face variable. - [Generador de cues de lectura sincronizada](https://elysiatools.com/es/tools/audio-read-along-cue-generator): Genera cues a nivel de frase o palabra con timestamp desde un audio de narración y su guion, para lectura estilo karaoke. - [Generador de llms.txt / auditoría de rastreadores IA](https://elysiatools.com/es/tools/llms-txt-and-ai-crawler-audit): Genera un llms.txt (formato v2 de llmstxt.org: H1, resumen en cita, listas H2) desde un rastreo en vivo o un inventario pegado, y audita la política de robots.txt para GPTBot, ClaudeBot, PerplexityBot y Bytespider con el algoritmo RFC 9309 — con vista previa allow/block y directivas listas para pegar. - [Generador de JSON-LD desde CSV](https://elysiatools.com/es/tools/json-ld-generator-from-csv): Convierte filas de CSV o Excel en JSON-LD de Schema.org para articulos, productos o eventos con salida lista para validacion SEO - [Generador por lotes de codigos](https://elysiatools.com/es/tools/barcode-batch-generator): Genera por lotes Code 128, EAN-13, UPC-A, ITF-14, QR Code y Data Matrix desde CSV o texto multilinea con salida PNG ZIP o PDF - [Extractor de tokens de tema ECharts](https://elysiatools.com/es/tools/echarts-theme-token-extractor): Extrae design tokens — colores, números, tamaños de fuente y cadenas — de un JSON de tema ECharts y expórtalos directamente a tu design system. Pega un objeto de tema (el que registras y pasas a echarts.init(dom, themeName)) y la herramienta recorre cada hoja, etiquetando cada color (con normalización opcional nombrado/rgb → hex), número de espaciado, tamaño de fuente y cadena, para luego emitir variables CSS limpias, una configuración theme.extend de Tailwind, tokens.json de Style Dictionary o variables SCSS. Tiende el puente entre un tema de visualización ECharts y los tokens de diseño Figma/CSS/Tailwind sin copiar cada valor a mano. - [De paleta de imagen a design tokens](https://elysiatools.com/es/tools/image-to-design-tokens): Extrae los colores dominantes de una imagen con k-means y expórtalos como variables CSS / SCSS / configuración Tailwind / tokens JSON, con nombres y escala de tonos - [Generador de códigos QR artísticos con módulos estilizados e inserción de logotipo](https://elysiatools.com/es/tools/qr-code-art-styled-module-and-logo-embed-generator): Genera códigos QR artísticos con colores de marca, degradados, módulos redondeados o de puntos y un logotipo central, con desglose de penalización de máscara ISO, metadatos por módulo y veredicto de borrado Reed–Solomon. ## Ejemplos - [Ejemplos del Framework CSS Bulma](https://elysiatools.com/es/samples/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 - [Ejemplos del Framework CSS Milligram](https://elysiatools.com/es/samples/milligram): Ejemplos del framework CSS Milligram incluyendo tipografía, formularios, grids y componentes - [Ejemplos de Selectores CSS](https://elysiatools.com/es/samples/css-selectors): Colección de ejemplos de selectores CSS para pruebas de extracción y análisis - [Ejemplos de Tailwind CSS](https://elysiatools.com/es/samples/tailwind-css): Ejemplos de Tailwind CSS - Framework CSS utilitario primero con diseño receptivo, componentes y configuración personalizada ## Contenido relacionado - [Creación de CSS, maquetación y flujo en cascada](https://elysiatools.com/es/hubs/css-authoring-layout-and-cascade-workflows): Crea y revisa CSS con formato, diagnóstico de selectores, fragmentos responsivos, efectos visuales y comprobaciones renderizadas.