# Calculadora clamp de tipografia fluida CSS Informe limites de viewport e fonte para gerar clamp(), CSS copiavel e dados de preview > Página canônica: https://elysiatools.com/pt/tools/css-fluid-typography-clamp-calc - **Categoria:** Design - **Palavras-chave:** css, clamp, tipografia fluida ## Visão geral Calcula a inclinacao em vw e a intersecao para tipografia fluida e retorna clamp() com HTML de preview. ## Entradas - **Viewport minimo** (number) - **Viewport maximo** (number) - **Tamanho minimo da fonte** (number) - **Tamanho maximo da fonte** (number) - **Tamanho base da fonte** (number) - **Texto de exemplo** (text) ## Quando usar - Ao criar layouts responsivos onde os títulos e textos precisam encolher ou crescer suavemente sem a necessidade de múltiplas media queries. - Durante a definição de sistemas de design que utilizam unidades relativas como rem e vw para estabelecer uma escala tipográfica consistente. - Ao otimizar a legibilidade e a estética visual de interfaces web em dispositivos móveis, tablets e desktops de forma automatizada. ## Como funciona - Insira os limites de viewport mínimo e máximo em pixels para definir a faixa de transição da tela. - Defina os tamanhos mínimo e máximo desejados para a fonte, além do tamanho base da fonte (root font-size) em pixels. - A ferramenta calcula a inclinação matemática (slope) e a interseção em unidades rem e vw. - Copie a expressão clamp() gerada e visualize o comportamento do texto de exemplo em tempo real. ## Casos de uso - Ajuste dinâmico de títulos principais (H1) para que fiquem legíveis tanto em smartphones compactos quanto em monitores de alta resolução. - Padronização de tamanhos de parágrafos em blogs e portais de conteúdo para manter a consistência visual em qualquer dispositivo. - Implementação de escalas tipográficas flexíveis em frameworks CSS e bibliotecas de componentes de design. ## Perguntas frequentes ### O que é tipografia fluida? É uma técnica de design web onde o tamanho da fonte se ajusta continuamente de acordo com a largura da tela, em vez de saltar em pontos de quebra fixos. ### Como funciona a função CSS clamp()? Ela define um valor dinâmico entre um limite mínimo e um limite máximo, usando uma expressão matemática baseada na largura da viewport (vw). ### Por que usar a unidade rem em vez de px no clamp()? O uso de rem garante que o texto respeite as configurações de acessibilidade e preferências de zoom do navegador do usuário. ### O que é o tamanho base da fonte (root font-size)? É o tamanho de fonte padrão definido no elemento HTML (geralmente 16px), usado como referência para converter pixels em rem. ### Preciso adicionar media queries adicionais para a tipografia fluida? Não, a função clamp() gerencia a transição inteira de forma nativa no CSS, eliminando a necessidade de media queries para redimensionar o texto. ## Ferramentas relacionadas - [Construtor de eixos e instâncias de fontes variáveis e CSS font-variation-settings](https://elysiatools.com/pt/tools/variable-font-axis-instance-and-css-font-variation-settings-builder): Envie uma fonte variável (TTF/OTF/WOFF/WOFF2) para inspecionar seus eixos fvar e instâncias nomeadas, pré-visualizar a interpolação ao vivo no navegador e gerar CSS font-variation-settings pronto para colar, as propriedades de alto nível equivalentes e um bloco @font-face variável. - [Gerador de cues de leitura sincronizada](https://elysiatools.com/pt/tools/audio-read-along-cue-generator): Gera cues a nível de frase ou palavra com timestamps a partir de áudio de narração e seu roteiro. - [Gerador de llms.txt / auditoria de crawlers de IA](https://elysiatools.com/pt/tools/llms-txt-and-ai-crawler-audit): Gera um llms.txt (formato v2 do llmstxt.org: H1, resumo em citação, listas H2) a partir de um rastreamento ao vivo ou inventário colado, e audita a política de robots.txt para GPTBot, ClaudeBot, PerplexityBot e Bytespider pelo algoritmo RFC 9309 — com prévia allow/block e diretivas prontas para colar. - [Gerador de JSON-LD a partir de CSV](https://elysiatools.com/pt/tools/json-ld-generator-from-csv): Transforma linhas de CSV ou Excel em JSON-LD Schema.org para artigos, produtos ou eventos com saida pronta para validacao de SEO - [Gerador em lote de codigos](https://elysiatools.com/pt/tools/barcode-batch-generator): Gera em lote Code 128, EAN-13, UPC-A, ITF-14, QR Code e Data Matrix a partir de CSV ou texto multilinha com saida PNG ZIP ou PDF - [Extrator de tokens de tema ECharts](https://elysiatools.com/pt/tools/echarts-theme-token-extractor): Extrai design tokens — cores, números, tamanhos de fonte e strings — de um JSON de tema ECharts e os exporta direto no seu design system. Cole um objeto de tema (o registrado e passado a echarts.init(dom, themeName)) e a ferramenta percorre cada folha, marcando cada cor (com normalização opcional nomeada/rgb → hex), número de espaçamento, tamanho de fonte e string, depois emite variáveis CSS limpas, um config theme.extend do Tailwind, tokens.json do Style Dictionary ou variáveis SCSS. Faz a ponte entre um tema de visualização ECharts e os tokens de design Figma/CSS/Tailwind sem copiar cada valor à mão. - [De paleta de imagem para design tokens](https://elysiatools.com/pt/tools/image-to-design-tokens): Extrai cores dominantes da imagem por k-means e exporta como variáveis CSS / SCSS / config Tailwind / tokens JSON, com nomes e escala de tons - [Gerador de QR artístico com módulos estilizados e incorporação de logotipo](https://elysiatools.com/pt/tools/qr-code-art-styled-module-and-logo-embed-generator): Gera QR artísticos com cores de marca, degradês, módulos arredondados ou em pontos e logotipo central — com a decomposição das penalidades de máscara ISO, metadados por módulo e veredito de apagamento Reed–Solomon. ## Exemplos - [Exemplos do Framework CSS Bulma](https://elysiatools.com/pt/samples/bulma): Exemplos do framework CSS Bulma incluindo colunas, componentes, controles de formulário, sistema de layout e padrões de design modernos baseados em CSS - [Exemplos do Framework CSS Milligram](https://elysiatools.com/pt/samples/milligram): Exemplos do framework CSS Milligram incluindo tipografia, formulários, grids e componentes - [Exemplos de Seletores CSS](https://elysiatools.com/pt/samples/css-selectors): Coleção de exemplos de seletores CSS para testes de extração e análise - [Exemplos Tailwind CSS](https://elysiatools.com/pt/samples/tailwind-css): Exemplos Tailwind CSS - Framework CSS utility-first com design responsivo, componentes e configurações personalizadas ## Conteúdo relacionado - [Criação de CSS, layout e cascata](https://elysiatools.com/pt/hubs/css-authoring-layout-and-cascade-workflows): Crie e revise CSS com formatação, diagnóstico de seletores, trechos responsivos, efeitos visuais e verificações renderizadas.