Esta página foi traduzida pela API Cloud Translation.

Tipografia responsiva e fluida com recursos CSS de referência

Miriam Suzanne

Publicado em: 16 de dezembro de 2025

O design responsivo da Web é uma abordagem para criar sites com boa aparência e funcionamento em vários navegadores, dimensões de janela de visualização, dispositivos e preferências do usuário. Quando aplicado à tipografia, o problema central geralmente é ajustar font-size com base na largura do navegador, o que também pode ter implicações para valores de espaçamento como line-height e margin.

Como designers, faz sentido pensar no espaço disponível no navegador e ajustar a tipografia de acordo com isso. Também é importante lembrar que diferentes usuários têm necessidades de font-size diferentes em vários dispositivos, dependendo de circunstâncias pessoais fora do seu alcance ou conhecimento. Portanto, é perigoso fazer qualquer coisa que tire o controle do usuário sobre o resultado final. Há duas entradas principais que as pessoas podem usar para afetar o dimensionamento da fonte enquanto navegam na Web:

Fornecer uma preferência font-size padrão em todos os sites.
Aumentar ou diminuir o zoom em cada site.

O objetivo desta demonstração é tornar a tipografia responsiva ao tamanho da janela de visualização do navegador e às entradas do usuário. No entanto, é importante entender que quanto mais a tipografia responde à janela de visualização, menos ela responde às preferências do usuário. Se você for implementar tipografia responsiva, faça isso com cuidado e teste se os resultados ainda estão acessíveis.

Negociar uma `font-size` básica com base nas preferências do usuário

A primeira etapa para definir qualquer tipografia on-line é negociar um tamanho de fonte inicial com base na preferência de font-size do usuário. Ela será usada na maior parte do texto da página e como base para outros tamanhos de fonte, como títulos. A opção mais simples aqui é dar ao usuário controle total usando 1em, sem ajustes. Quando você não define nenhum outro valor de font-size, 1em se refere à preferência do usuário. Por outro lado, definir um font-size em pixels ou outras unidades absolutas (e até mesmo unidades relativas à janela de visualização) vai substituir totalmente o usuário, o que deve ser evitado.

No entanto, diferentes casos de uso exigem tipografias diferentes. Um artigo pode ser mais fácil de ler em texto grande, enquanto sites com muitos dados podem exigir um design mais compacto com texto menor. Em qualquer caso, talvez seja interessante sugerir um padrão que se ajuste ao design, mas que ainda permita ao usuário ajustar o resultado com base na situação específica dele.

Opção 1: calcular um multiplicador com base em suposições

Um compromisso comum é definir um font-size ajustado em unidades em ou %, em relação ao font-size padrão do usuário. Em geral, essa abordagem começa com a proposição de que os navegadores oferecem um padrão 16px, e a maioria dos usuários não muda esse padrão. Se você acha que um tamanho de fonte 20px vai funcionar melhor no seu site, um font-size de 1.25em ou 125% geralmente vai dar o resultado esperado:

html {
  /* 20px preferred, 16px expected: 20/16 = 1.25 */
  font-size: 1.25em;
}

Você também pode usar uma função calc() aqui para mostrar a matemática, mas ainda precisa saber qual é a equação: o tamanho desejado, dividido pelo tamanho esperado, multiplicado por 1em:

html {
  font-size: calc(20 / 16 * 1em);
}

Os usuários com uma preferência maior ou menor terão alguma capacidade de afetar o resultado, já que seu padrão agora é relativo ao deles (1,25 vezes a preferência deles neste caso). Mas pode ser estranho se você e o usuário estiverem solicitando padrões de 20px, e o resultado for 25px (os tempos padrão ajustados multiplicados por 1,25 novamente), um tamanho que ninguém pediu.

Opção 2: deixe o `clamp()` fazer o trabalho

Uma abordagem mais sutil envolve funções de comparação de CSS, sem matemática. Em vez de presumir que 1em é igual a 16px e fazer conversões não confiáveis de px para em, pense em 1em como uma variável que se refere à preferência do usuário. Não importa qual valor de pixel 1em representa, um font-size de max(1em, 20px) sempre vai retornar a maior das preferências de design (20px) e do usuário (1em). Isso permite que o usuário escolha tamanhos de fonte maiores, mas não menores.

Ao mudar para uma função clamp(), você permite que o usuário dimensione nas duas direções quando o tamanho preferido fica muito distante do padrão escolhido. Por exemplo, um font-size de clamp(1em, 20px, 1.25em) vai usar 20px como padrão, desde que seja maior que o padrão do usuário, mas não mais que 125% do padrão dele.

Isso permite que seu design tenha prioridade quando estiver próximo da preferência do usuário, mas o usuário ainda tem prioridade quando a preferência dele está fora do intervalo especificado. Não há cálculos de conversão, suposições sobre o tamanho da preferência do usuário nem multiplicação de valores do designer e do usuário.

Ao definir isso como o font-size raiz no elemento html, agora é possível referenciar 1rem em qualquer lugar do site como o tamanho base negociado.

Adicionar capacidade de resposta

Para tornar esse font-size responsivo à janela de visualização, uma opção seria adicionar pontos de interrupção de consulta de mídia (ou consulta de contêiner). Por exemplo, é possível mudar o valor fixado dependendo do tamanho da tela:

html {
  font-size: clamp(1em, var(--base-font-size, 16px), 1.25em);
  @media (width > 30em) { --base-font-size: 18px; }
  @media (width > 45em) { --base-font-size: 20px; }
}

A outra opção é adicionar unidades de viewport ou contêiner ao valor base estático:

html {
  font-size: clamp(1em, 16px + 0.25vw, 1.25em);
}

As unidades vw (largura da janela de visualização) ou vi (tamanho inline da janela de visualização) representam 1% do total da janela de visualização, ou seja, a parte do navegador que renderiza seu site. Da mesma forma, as unidades cqw e cqi representam 1% de um contêiner inline-size na página. Confira a demonstração de consultas e unidades de contêiner para mais detalhes.

Essa abordagem é geralmente chamada de tipografia fluida, já que a mudança em font-size é constante em uma variedade de larguras de viewport, em vez de pular de um valor para outro em pontos de interrupção de mídia ou contêiner. No entanto, não se distraia com a suavidade da transição. Essa distinção geralmente só é visível em testes, se você ajustar o tamanho da janela de maneira suave. Esse efeito raramente (ou nunca) é visto pelos usuários. Embora os usuários possam mudar regularmente o tamanho do navegador ou o nível de zoom, eles precisariam fazer esses ajustes de maneira lenta e fluida para notar a diferença entre um ponto de interrupção e uma unidade de janela de visualização. Isso afeta apenas a transição, não o resultado após o redimensionamento.

A principal vantagem do dimensionamento de fonte fluida é que ele elimina a necessidade de calcular ou especificar pontos de interrupção manualmente, fornecendo um resultado interpolado em qualquer tamanho. Você só define o ponto de partida (16px) e a taxa de mudança (0.25vw vai fornecer um aumento de 0.25px em font-size para cada aumento de 100px na janela de visualização), e possivelmente valores mínimos e máximos. Quando a janela de visualização tem 1000px de largura, o font-size tem 16px + 2.5px ou 18.5px, mas esse cálculo é feito totalmente pelo navegador. Essa é a abordagem usada na demonstração, com unidades cqi para mostrar a capacidade de resposta baseada em contêineres. Quando usado no elemento raiz (html), em que não há um contêiner definido, as unidades cqi ainda se referem ao tamanho da janela de visualização.

Se você preferir pensar em termos do font-size especificado em um determinado tamanho de janela de visualização, use a abordagem de consulta de mídia mais direta, que é um pouco mais clara. As coisas ficam complicadas quando você tenta calcular unidades de janela de visualização com base nos pontos de interrupção pretendidos. Muitas pessoas fazem isso copiando e colando valores de ferramentas de terceiros, mas o código resultante é muito mais difícil de entender ou mudar diretamente. Em geral, com CSS, a melhor opção é aquela que expressa mais claramente suas intenções.

Aviso: as mudanças na janela de visualização nem sempre significam a mesma coisa.

Embora as consultas de mídia e as unidades vi sejam aplicadas de maneiras diferentes, as duas abordagens se baseiam na mesma medição da janela de visualização. Se a janela de visualização tiver 600px de largura, 100vw será igual a 600px, e os estilos dentro da consulta de mídia (width > 500px) serão aplicados.

Mas o que significa a janela de visualização ter 600px de largura? Na realidade, um pixel não tem um tamanho fixo com um único significado em todas as situações. Embora pareça natural que uma janela de visualização com menos pixels na horizontal esteja em uma tela menor (como um smartphone) ou em uma janela estreita do navegador, essa não é uma suposição confiável. Na verdade, aumentar o zoom e diminuir a janela do navegador têm o mesmo impacto na largura da janela de visualização medida. Uma ação (zoom) muda o tamanho de um pixel, enquanto a outra (redimensionamento) muda o tamanho do próprio navegador, mas ambas mudam o número de pixels na largura do navegador. O que obtemos da medição da janela de visualização é uma relação entre o tamanho atual do pixel e a janela do navegador atual.

Para o usuário, o zoom e o redimensionamento têm finalidades muito diferentes. Um usuário que muda o nível de zoom está tentando aumentar ou diminuir o conteúdo da página, mas um usuário que redimensiona o navegador está apenas gerenciando o espaço em diferentes telas. Embora a intenção do usuário seja diferente, o resultado nas medições do CSS é o mesmo. À medida que a janela diminui ou o pixel aumenta, há menos pixels na largura do navegador.

Essa desconexão torna a tipografia responsiva não confiável. Se o texto estiver definido para redimensionar com base apenas em uma janela de visualização ou um contêiner, o zoom do usuário não terá efeito.

Mudar o valor da unidade relativa à janela de visualização para 1vw ou 100vw altera a relação exata entre o tamanho da fonte e a janela de visualização. Uma fonte 1vw vai aumentar 1px para cada 100px de tamanho da janela de visualização, enquanto uma fonte 100vw terá exatamente o mesmo tamanho da janela. Você pode mudar esse valor para que a fonte aumente mais devagar ou mais rápido em relação ao navegador. Mas qualquer valor relativo à janela de visualização vai permanecer constante à medida que o usuário aumenta ou diminui o zoom, sem responder aos controles do usuário.

Da mesma forma, nem 1vw nem 100vw consideram o font-size padrão do usuário.

Usar unidades relativas à janela de visualização ou ao contêiner por conta própria para font-size é sempre hostil ao usuário. Quando um font-size é totalmente responsivo ao contêiner, ele não pode ser responsivo aos padrões ou ajustes do usuário. Mesmo com as melhores intenções e proteções, evite tirar esse controle final font-size dos usuários. Além de ser uma experiência ruim para o usuário, isso também pode violar as diretrizes de acessibilidade, que geralmente são exigidas por lei. Especificamente, a seção 1.4.4 das Diretrizes de acessibilidade para conteúdo da Web exige que "o texto possa ser redimensionado sem tecnologia assistiva em até 200%".

Como garantir que os valores de `font-size` sejam responsivos ao zoom

Para garantir que um font-size relativo à janela de visualização seja responsivo ao zoom, o valor relativo à janela de visualização precisa ser aplicado como um ajuste a algum outro valor. Isso é possível em CSS usando a função calc() ou qualquer outra função matemática que aceite cálculos, como min(), max() e clamp(). Um font-size de calc(16px + 1vw) é baseado no tamanho da janela de visualização e no tamanho atual (relativo ao zoom) de um pixel. Embora a unidade vw não seja afetada pelo zoom, o valor base será.

O resultado é um font-size que responde ao tamanho da janela de visualização e às configurações de zoom do usuário. Se o usuário aumentar o zoom para 200%, o valor base será renderizado duas vezes maior (32px), enquanto o valor responsivo vai permanecer inalterado. Uma janela de visualização 1000px inicialmente daria um font-size de 16px + 10px = 26px, mas com um zoom de 200%, o tamanho da fonte só aumentaria para 42px, pouco mais de 160%. Isso pode não parecer um problema grave, mas quanto mais seu font-size se baseia na janela de visualização, menos eficaz se torna o zoom.

Em telas pequenas, o font-size vem principalmente do valor do pixel base e responde bem ao zoom. Mas em telas maiores, o dimensionamento da janela de visualização se torna uma fração maior do tamanho da fonte renderizada, o que torna o zoom menos eficaz. Isso se torna particularmente perigoso quando o zoom de 500% (o máximo na maioria dos navegadores) não consegue mais fornecer o aumento de 200% no tamanho da fonte exigido pela WCAG 1.4.4. Mesmo antes desse ponto, pode ser frustrante ter o zoom ineficaz.

Um gráfico mostrando o tamanho da fonte e a eficácia do zoom em relação à largura da janela de visualização. O tamanho da fonte, calculado como "calc(17px + 2.5vw)", aumenta linearmente com a largura da janela de visualização. A linha de zoom de 500%, que representa o máximo possível, mostra que o zoom se torna menos eficaz à medida que a largura da janela de visualização aumenta, não oferecendo um aumento de 200% no tamanho da fonte além de uma largura de janela de visualização de 2.040 px. — O eixo horizontal representa o tamanho da janela de visualização, de `0` a `2600px` de largura. O eixo vertical de `font-size` também está em pixels, mostrando o resultado de `calc(17px + 2.5vw)`. A linha de zoom `500%` usa o mesmo eixo horizontal de largura da janela de visualização, mas trata o eixo vertical como uma porcentagem.

Na borda esquerda do gráfico (largura da janela de visualização 0), o zoom 500% é totalmente eficaz. No entanto, essa eficácia diminui rapidamente à medida que o tamanho do navegador aumenta, e as unidades de viewport (sem zoom) se tornam um fator maior no font-size. Quando o navegador tem 2040px de largura, o zoom máximo de 500% só consegue aumentar o tamanho da fonte em 200%. Além desse ponto, não é mais possível usar o zoom de fonte efetivo de 200%.

Ao mover esse cálculo para uma função clamp(), com valores mínimos e máximos, é possível aplicar limites que garantem o texto com zoom. De acordo com Maxwell Barvian:

Se o tamanho máximo da fonte for menor ou igual a 2,5 vezes o tamanho mínimo, o texto sempre vai passar no SC 1.4.4 das WCAG, pelo menos em todos os navegadores modernos.

Como as consultas @media e @container se baseiam nas mesmas medições das unidades vw e cqw, a mesma lógica se aplica ao usar um ponto de interrupção para mudar o tamanho da fonte. Quando o aumento de tamanho é muito grande, o zoom se torna ineficaz. Você pode testar como esses valores interagem na seguinte visualização:

Como garantir que os valores de `font-size` sejam responsivos aos padrões do usuário

Mas calc(16px + 1vw) ainda não responde às configurações de fonte padrão do usuário. Para isso, defina uma base ou valores mínimo e máximo usando unidades em ou rem em vez de px. Ao juntar tudo, você tem um resultado familiar que corresponde à demonstração vinculada:

html {
  font-size: clamp(1em, 17px + 0.24vw, 1.125em);
}

Observações:

Os valores mínimo e máximo usam unidades em, que são baseadas na preferência do usuário e responsivas ao zoom.
O valor vw adicional é mantido mínimo para que o zoom não seja muito afetado.
O tamanho máximo (1.125em) é bem menor que 2,5 vezes o mínimo (1em), garantindo que um valor font-size efetivo de 200% seja sempre possível.

Escalas tipográficas com `pow()`

A maioria dos designs usa mais de um tamanho de fonte. Uma escala tipográfica descreve a relação entre vários tamanhos de fonte. Isso pode ser expresso como um tamanho de base e uma série de multiplicadores para calcular os outros tamanhos. O CSS oferece uma escala tipográfica integrada relativa à palavra-chave medium, que se refere à preferência de tamanho da fonte do usuário ou a um padrão de 16px. A escala de palavras-chave completa é:

xx-small: 3/5 (0,6)
x-small: 3/4 (0,75)
small: 8/9 (0,89)
medium: 1 (o tamanho base que outros são multiplicados)
large: 6/5 (1.2)
x-large: 3/2 (1,5)
xx-large: 2/1 (2)
xxx-large: 3/1 (3)

Essa escala é relativa ao padrão do usuário, e não ao font-size raiz. Portanto, ela não funciona tão bem depois que você muda o font-size raiz do seu site. A maioria dos autores acaba recriando uma escala tipográfica semelhante com propriedades personalizadas, às vezes usando os mesmos nomes de tamanhos de camisetas e outras vezes preferindo uma série de etapas para cima e para baixo em uma escala matemática. Há muitas ferramentas de terceiros para gerar essas escalas com base em proporções comuns, principalmente emprestadas de uma escala musical ocidental:

html {
  /* musical ratios */
  --minor-second: calc(16/15);
  --major-second: calc(9/8);
  --minor-third: calc(6/5);
  --major-third: calc(5/4);
  --perfect-fourth: calc(4/3);
  --augmented-fourth: sqrt(2);
  --perfect-fifth: calc(3/2);
  --major-sixth: calc(5/3);

  /* the golden ratio*/
  --golden-ratio: calc((1 + sqrt(5)) / 2);
}

Mas você não precisa de ferramentas externas para criar sua própria escala em CSS. A nova função pow() pode gerar sua escala para você, com 1rem como seu próprio tamanho base.

html {
  /* choose a ratio */
  --scale: 1.2;

  /* generate the scale using pow() */
  --xx-small: calc(1rem * pow(var(--scale), -0.5));
  --x-small: calc(1rem * pow(var(--scale), -0.25));
  --small: calc(1rem * pow(var(--scale), -0.125));
  --medium: 1rem;
  --large: calc(1rem * pow(var(--scale), 1));
  --x-large: calc(1rem * pow(var(--scale), 2));
  --xx-large: calc(1rem * pow(var(--scale), 3));
  --xxx-large: calc(1rem * pow(var(--scale), 4));

  /* change the ratio for different viewport sizes */
  @media (width > 50em) {
    --scale: var(--perfect-fourth);
  }
}

Não é necessário usar etapas inteiras para manter a escala consistente. Na verdade, a escala tipográfica 12pt comum usa aproximadamente cinco frações por etapa. Enquanto os tamanhos grandes usam etapas inteiras na escala, os pequenos usam frações para dimensionar a uma taxa mais lenta.

Os mixins e funções do CSS permitem condensar ainda mais essa lógica, enquanto outras ferramentas integradas, como progress(), facilitam a criação de escalas que se ajustam de um valor para outro. mas esses recursos estão fora do escopo desta demonstração.

Responder ao tamanho dos contêineres na página

É possível fazer todos esses cálculos funcionarem em consultas de contêiner usando a unidade cqi em vez de vw ou vi. No entanto, também é útil deixar o font-size do usuário no elemento html para que todo contêiner de composição possa se referir a essa preferência do usuário como 1rem. Na demonstração, você vai descobrir que toda a escala tipográfica é aplicada ao body em vez do elemento raiz html para o tipo global. Em seguida, ela é redefinida com base no tamanho do contêiner para cada elemento com o atributo type-set.

Isso é sempre uma troca com tamanhos de fonte relativos ao contêiner. Você consegue um dimensionamento de fonte mais fluido para cada elemento no contexto, mas às custas de uma consistência em toda a página. Qual deles é mais importante para você depende das especificidades do seu caso de uso. E lembre-se de que a tipografia fluida é uma troca, tornando os controles do usuário, como o zoom, menos eficazes.

Embora a tipografia responsiva e as escalas tipográficas sejam ótimas ferramentas para designers, não é necessário complicar as coisas se não for preciso. A escala tipográfica padrão do usuário e integrada também é uma ótima opção. Mas, se você escolher uma tipografia responsiva (ou fluida), teste como os resultados se comportam em relação a diferentes padrões do usuário e configurações de zoom. Aproveite!

Tipografia responsiva e fluida com recursos CSS de referência Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Negociar uma font-size básica com base nas preferências do usuário