Unidades de consulta de contêiner e tipografia de fluido

Tipografia fluida é o termo para font-size regras de design que adaptam responsivamente o tamanho com base na quantidade de espaço inline disponível. Antes da disponibilidade de unidades de consulta de contêiner, as técnicas geralmente dependiam da largura da janela de visualização – vw– unidade. O método viewport é excelente para o tipo de página principal, como manchetes de artigos. No entanto, a tipografia fluida baseada em viewport não funciona bem para espaços mais estreitos que se flexionam independentemente da viewport, como uma grade de cartões.

Exploraremos três maneiras de criar regras dinâmicas de tipografia fluida aproveitando unidades de consulta de contêiner e propriedades personalizadas de CSS. Você aprenderá mais sobre:

• criando mixins usando propriedades personalizadas
• max(), min(), calc() eclamp()
• consultas e unidades de contêiner
• :is()e:where()

Anteriormente aqui no ModernCSS, apresentei um método que dependia do uso do Sass para realizar alguns cálculos e produzir as regras para aplicar tipografia fluida baseada em viewport. Você ainda pode estar interessado em algumas das outras informações, incluindo dicas sobre como evitar o estouro de texto e algumas outras considerações para a tipografia da web.

No entanto, não apenas podemos atualizar a solução apresentada anteriormente descartando o Sass, mas as regras finais serão muito mais resilientes e independentes do contexto.

Noções básicas de tipografia fluida com clamp()

A tipografia fluida baseada em viewport padrão depende da clamp()função e da vwunidade (largura da viewport).

A clamp()função é uma das várias funções matemáticas CSS úteis e aceita três valores: um valor mínimo, um valor ideal e um valor máximo. A ideia central da tipografia fluida é que o valor “ideal” usa uma unidade dinâmica – vw– para interpolar entre o mínimo e o máximo. Isso efetivamente permite que a fonte seja redimensionada ao longo de um intervalo preferido.

Na demonstração, o tamanho mínimo permitido é 1reme o tamanho máximo permitido é 3rem, onde 4vwpermite a interpolação ao longo do intervalo.CSS para “tipografia fluida baseada em viewport”

.fluid-type {
  font-size: clamp(1rem, 4vw + 1rem, 3rem);
}

Tipografia fluida baseada em viewport.

Falaremos mais sobre essa adição em 1rem +breve, mas basta dizer que ela permite redimensionamento aprimorado ao usar exibição ou zoom de texto, uma importante consideração de acessibilidade.

Agora, embora essa demonstração tenha uma alça de redimensionamento, você não verá nenhum redimensionamento da fonte realmente ocorrer. Isso ocorre porque depende da largura da janela de visualização, portanto, você precisará redimensionar toda a largura do navegador para ver uma alteração. Já demonstramos o problema com esta técnica!

Devido a esse problema, uma solução anterior pode ter sido criar estilos específicos de componentes que antecipam diferentes tamanhos de janela de visualização e atribuem vários tamanhos de fonte nas consultas de mídia. Mas agora, com a disponibilidade de consultas de contêiner, podemos fazer melhor!

Visão geral rápida das consultas de contêiner

O que você precisa saber para entender os exemplos deste tutorial é que as consultas de contêiner permitem definir regras para que os elementos respondam ao espaço disponível de seu contêiner ancestral. Isso é diferente das consultas de mídia, que só podem ser baseadas na janela de visualização.

Tecnicamente, esta definição e o uso neste tutorial levam em consideração as consultas de tamanho de contêiner . A especificação também inclui consultas de estilo para atualizar regras com base em recursos de estilo.

O principal benefício das consultas de contêiner é criar regras de layout mais apropriadas ao contexto que se adaptam ao verdadeiro espaço disponível. Com as consultas de mídia da janela de visualização, as regras são efetivamente orquestradas no nível da página de macro. Mas as consultas de contêiner permitem responder a alterações de layout de microelementos e componentes à medida que seu contexto muda por meio de posicionamento variável em layouts de página.

Os elementos do contêiner devem ser explicitamente definidos, o que no nível básico é feito por meio da container-typepropriedade. Para consultas no espaço inline disponível, usamos o valor inline-size. Em seguida, os elementos filhos do contêiner podem consultar o contêiner quanto ao seu tamanho com a @containerregra e aplicar estilos quando essa condição de tamanho for atendida.

.container {
  container-type: inline-size;
}

@container (inline-size > 300px) {
  .container .child {
    padding: 2rem;
  }
}

A utilização do termo “inline” em vez de “width” decorre do precedente estabelecido pelas propriedades lógicas, que têm sua orientação ajustada com base no modo de escrita: direita para esquerda (RTL), esquerda para direita (LTR) ou vertical. Usar “em linha” refere-se à dimensão horizontal para o modo de escrita.

À medida que desenvolvemos as soluções, aprenderemos mais sobre como trabalhar com contenção.

Unidades de consulta de contêiner

Oficialmente, eles são chamados de “unidades de comprimento de consulta de contêiner” e são uma medida do tamanho de um elemento recipiente.

Assim como 1vwé igual 1%à largura da janela de visualização, também é 1cqiigual 1%ao tamanho embutido de um contêiner. Usaremos cqipara fins de definição de tipografia fluida, pois queremos que o tamanho seja associado ao eixo horizontal do modo de escrita.

Curiosamente, o grupo de trabalho CSS resolveu que todos os elementos teriam como padrão a contenção de estilo. Isso significa que o uso de uma unidade de contêiner funcionará mesmo sem um ancestral que tenha contenção. Continue lendo para aprender sobre uma peculiaridade desse comportamento.

Configurar propriedades personalizadas

Para iniciar nossas soluções, configuraremos algumas propriedades personalizadas. Isso ocorre porque todas as nossas regras serão projetadas para funcionar com uma espécie de regra “mixin” que receberá os valores em cascata das propriedades personalizadas.

Estou me referindo a ele como um mixin, pois será uma regra geral que pega as propriedades personalizadas, aplica uma função e produz resultados variáveis ​​com base nos valores das propriedades personalizadas. Para obter melhores resultados, trabalharemos com a cascata para herdar valores de maneira mais previsível. Isso significa que atribuiremos nossos valores básicos de propriedade personalizada primeiro e as regras do mixin depois na ordem da folha de estilo.

A estrutura inicial de nossas regras envolve a escolha de tamanhos de fonte explícitos para os níveis de título 1 a 4, que são o foco principal de nossas regras básicas. Vamos criar propriedades personalizadas para eles e atribuí-los explicitamente por nível de título.

:root {
  --headline-1: 2.75rem;
  --headline-2: 2.35rem;
  --headline-3: 1.5rem;
  --headline-4: 1.15rem;
}

h1,
.h1 {
  --font-size: var(--headline-1);

  font-size: var(--headline-1);
}

h2,
.h2 {
  --font-size: var(--headline-2);

  font-size: var(--headline-2);
}

h3,
.h3 {
  --font-size: var(--headline-3);

  font-size: var(--headline-3);
}

h4,
.h4 {
  --font-size: var(--headline-4);

  font-size: var(--headline-4);
}

Observe que cada regra atualiza a --font-size propriedade customizada para associá-la ao tamanho desse nível. Isso é importante porque habilita as regras de mixin que iremos criar, que serão generalizadas para dimensionar cada uma das propriedades de entrada. Sem generalizar para um mixin, teríamos que repetir a função do mixin dentro de cada regra principal separada.

A outra parte importante dessa configuração é definir um fallback font-size, que nesse caso significa um valor estático que funcionará em vários navegadores caso o navegador de um usuário ainda não ofereça suporte a consultas de contêiner. Essa técnica de definir um substituto para um recurso mais moderno é chamada de aprimoramento progressivo .

Seletor de Mixagem

Então, como esse mixin realmente se parece? Bem, o conteúdo será único para cada uma das nossas três soluções. No entanto, o seletor será o mesmo.

Vamos anexá-lo a cada elemento de título, bem como às classes de título adicionadas e a uma classe de utilitário também de .fluid-type. A classe utilitária permitirá o uso do mixin ad-hoc para tipos que não podem ser estilizados como títulos.

:is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, .fluid-type) {
  font-size: /* unique per solution */

  line-height: 1.1;
  margin-block-end: 0.65em;
}

Para outras opções de atribuição line-heightque você pode achar melhor para sua solução final de tipo de fluido, revise meu projeto CSS Typography Line Height.

Por que usar :is()para o seletor? Duas razões:

1. A razão mais importante é que ele aumentará a especificidade de toda a regra para uma classe, o que a tornará mais resiliente a substituições acidentais de herança, mas também pode ser correspondida ou superada facilmente por regras posteriores baseadas em classe ou compostas.
2. O motivo menos importante é simplificar o seletor em uma lista de linha única em vez de um seletor tradicional separado por vírgula dividido em várias linhas.

Se você encontrar problemas com :is(), como substituições de criação de complexidade ou se quiser a capacidade de substituir por herança, poderá alternar para :where(). O uso de :where()reduz a especificidade para zero, o que significa que as regras posteriores que podem ser específicas do componente ou da página irão substituí-la facilmente devido à cascata sem ter que corresponder ou exceder a especificidade.

Observe que :is()calcula a maior especificidade na lista de seletores fornecida, e é por isso que mencionei que essa regra teria a especificidade de uma classe. Com base em sua preferência e se o comportamento de :is()ou :where()é útil para o seu contexto, você pode, alternativamente, remover o wrapper e usar uma lista de seletores padrão sem :is()ou :where().

Atualizar de vw para cqi

A base de todos os nossos métodos será a atualização de vwpara cqicomo nossa unidade dinâmica de escolha para permitir tipografia fluida.

Uma regra inicial para fazer isso é apenas uma troca desses valores.CSS para “Tipografia fluida usando cqi”

.fluid-type {
  font-size: clamp(1rem, 4cqi, 3rem);
}

Tipografia fluida baseada em viewport.

Mas – espere um minuto – ainda não está funcionando no redimensionamento do contêiner. No entanto, ele está respondendo com base na viewport. O que está acontecendo?!

A especificação de consultas de contêiner inclui uma provisão de que cada elemento assume como padrão um contêiner de estilo, e é por isso que o uso de cqijá permite o redimensionamento fluido. Mas, como não definimos um contêiner para nossa demonstração, a medição ainda é contra o ancestral mais próximo com contenção aplicada.

Este site não tem contenção aplicada em nenhum ancestral da demonstração, portanto, o comportamento alternativo das unidades de consulta de contêiner é usar o “tamanho pequeno da janela de visualização para esse eixo”. Isso significa que, para nossa regra em que estamos consultando o eixo “inline”, a largura da janela de visualização é usada como medida.

Para produzir o efeito que realmente queremos, que é fazer com que o tamanho da fonte corresponda ao contêiner pai, precisamos atribuir contenção.CSS para “Tipografia fluida baseada em contêiner”

.container {
  container-type: inline-size;
}

.fluid-type {
  font-size: clamp(1rem, 4cqi, 3rem);
}

Tipografia fluida baseada em viewport.

Nesta atualização, colocamos um div pai com a containerclasse ao redor do parágrafo. Agora, o parágrafo com a fluid-typeclasse é dimensionado de forma responsiva de acordo com o tamanho embutido da demonstração.

Um conceito-chave das consultas de contêiner é que elas respondem ao ancestral mais próximo com contenção. Se você aplicar regras que usam unidades de consulta de contêiner e não as vir responder conforme o esperado, talvez seja necessário ajustar a marcação e adicionar uma regra para permitir que os elementos carreguem um contêiner com eles.

Unidades de contêiner e redimensionamento de zoom de texto

#

Para a regra de exemplo que explica o tipo de fluido baseado em viewport, mencionei que a inclusão de 1remadicionado ao vwvalor era importante para o redimensionamento do texto. É porque os métodos baseados em viewport são propensos a restringir o tamanho da fonte de crescer até pelo menos 200% exigido pelas Diretrizes de Acessibilidade de Conteúdo da Web (WCAG) Critério de Sucesso 1.4.4: Redimensionar Texto.

Conforme esclarecido por Eric Eggert , essa regra significa que a altura do pixel renderizado na tela do texto deve eventualmente ser capaz de redimensionar até 200% de sua altura original no zoom normal (100%). Isso tecnicamente não precisa ser alcançado no momento em que o navegador ou a configuração de zoom de texto é definida como 200%, portanto, é aceitável se for alcançado, digamos, 300% de zoom.

Para métodos fluidos baseados em viewport, a inclusão de um remvalor ajuda a evitar problemas com o redimensionamento do texto. Sem ele, é mais provável que o redimensionamento baseado em zoom com apenas vwnão aumente ou pare de aumentar até um valor de zoom muito alto.

PS – se você não tiver certeza de por que estamos lidando com rems, verifique a explicação de rem versus outras unidades no artigo anterior aqui sobre o tipo de fluido.

Um recurso interessante de trocar para usar cqiem vez de vwé que, por sua própria natureza, ele continuará a aumentar enquanto o tamanho inline do contêiner aumentar durante o zoom. Isso vale tanto para o zoom do navegador/exibição quanto para o zoom de texto aplicado no nível do sistema operacional. Em meus testes, desde que remainda seja usado como unidade de ancoragem para a font-sizedefinição, aumentos de 200% ou mais são alcançáveis ​​de forma mais consistente do que vwos métodos.

Você sempre deve testar suas regras de tipo de fluido de todas as maneiras possíveis para garantir que o comportamento do zoom funcione conforme o esperado. Isso significa variar os níveis de zoom com o tipo em vários contextos, como uma grade responsiva de cartões, em um artigo de largura média, um contêiner de largura total e uma barra lateral estreita.

Mixin 1: Intervalos dinâmicos de tamanho de fonte comclamp()

Nosso objetivo é fazer uma função mixin, então precisamos gerenciar algumas considerações a mais do que a regra mais estática criada na última seção.

Vamos começar a regra conectando nossa --font-sizepropriedade personalizada que foi configurada anteriormente. Também habilitaremos uma --font-size-fluidpropriedade com um padrão de 5cqi. Assim como a propriedade size, isso permitiria atualizar o tamanho de destino por nível de título, se desejado.

:is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, .fluid-type) {
  font-size: clamp(
    /* TODO: define a minimum size */,
    var(--font-size-fluid, 5cqi),
    var(--font-size)
  );
}

A peça que falta em nossa função mixin é uma definição para o tamanho mínimo permitido dentro do intervalo.

Uma opção é atribuir uma propriedade personalizada para atualizar por regra herdada como as outras partes. Mas, em vez disso, vamos ver como podemos tornar o valor mais dinâmico.

Dentro do clamp(), podemos realizar cálculos matemáticos adicionais, sem calc()a necessidade de empacotamento!

Esta atualização diz que o tamanho mínimo permitido deve ser 30% menor que o tamanho --font-size. Devido à ordem matemática das operações, a parte da multiplicação da equação é calculada antes da subtração.

:is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, .fluid-type) {
  font-size: clamp(
    var(--font-size) - var(--font-size) * var(--font-size-diff, 0.3),
    var(--font-size-fluid, 5cqi),
    var(--font-size)
  );
}

Também inserimos mais uma propriedade personalizada para --font-size-diffpermitir a personalização da diferença de porcentagem, se necessário. Por exemplo, tamanhos de fonte muito grandes podem permitir uma redução maior, como 0.5.

Isso produz um efeito muito bom que é escalável em nossas regras de nível de título com apenas alguns ajustes que aproveitam nossas propriedades personalizadas adicionais. No entanto, atualmente é possível que o tamanho mínimo diminua para um tamanho menor do que gostaríamos e potencialmente menor do que a cópia do corpo normal.

Participe do meu boletim informativo para atualizações de artigos, dicas de CSS e recursos de front-end!E-mailInscrever-se

O texto normal e sem estilo usa 1rem, que é aproximadamente 16px, como padrão do navegador quando nenhum recurso de zoom é aplicado. Podemos garantir que o mínimo não é menor do que 1remcomparando-o com o resultado da equação.

A função CSS max()aceita vários valores, e o maior tamanho computado – o valor “máximo” – será usado. Portanto, passando ele 1reme a equação, se a redução calculada do --font-sizefor menor que 1rem, o navegador usará 1remem seu lugar.

Mixin 2: Crescer a partir de um tamanho de fonte base com calc()

No primeiro mixin, nosso uso de clamp()nos permitiu definir um intervalo para os tamanhos de fonte. Isso é benéfico, especialmente se você achar que precisa haver um limite máximo para o tamanho do texto.

Como alternativa, se não for estritamente necessário haver um limite superior para os tamanhos de fonte, podemos simplesmente permitir que o tamanho cresça a partir de um tamanho base mínimo.

Em vez de usar nosso definido anteriormente --font-size, vamos trocar para definir valores base. Eles devem ter o menor tamanho permitido, porque nosso mixin será adicionado à base.

Aqui, listamos e associamos um tamanho base por nível de cabeçalho, mas você pode preferir usar nomes semânticos como ‘título’, ‘subtítulo’, ‘legenda’ --font-base-sizeetc. será passado para o mixin.

:root {
  --h1-base: 1.75rem;
  --h2-base: 1.5rem;
  --h3-base: 1.35rem;
  --h4-base: 1.15rem;
}

h1,
.h1 {
  --font-size-base: var(--h1-base);
}

h2,
.h2 {
  --font-size-base: var(--h2-base);
}

h3,
.h3 {
  --font-size-base: var(--h3-base);
}

h4,
.h4 {
  --font-size-base: var(--h4-base);
}

Você pode querer reter os --font-sizevalores anteriores para continuar usando como alternativa caso o mixin fluido não seja compatível com o navegador do usuário.

Este mixin é um pouco simplificado da versão um. Usando calc(), temos uma única equação onde, a partir do ponto de partida, --font-size-baseestamos adicionando --font-size-fluid, cujo padrão é 3cqi.

:is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, .fluid-type) {
  font-size: calc(var(--font-size-base) + var(--font-size-fluid, 3cqi));
}

CSS para “Mixin para crescimento a partir de um tamanho base”

Usando este mixin, você provavelmente desejará usar valores de fluido reduzidos em comparação com o primeiro mixin. Isso ocorre porque o risco da solução até agora é que os tamanhos das fontes podem, em teoria, crescer infinitamente com base na quantidade de espaço inline disponível. Na prática, isso pode não causar um problema significativo, a menos que você já tenha uma base de fontes muito grande com potencial para se espalhar por uma grande área inline.

Se você sentir que um máximo é eventualmente necessário, podemos adicionar um envolvendo a equação com a min()função e introduzindo uma --font-size-maxpropriedade.

Como min()resulta em um limite máximo? Porque à medida que o tamanho da fonte aumenta, se o valor calculado vinculado ao cqivalor exceder o --font-size-max, isso resultaria --font-size-maxno valor “mínimo” entre as opções. Dessa forma, ele limita efetivamente o crescimento.CSS para “Mixin para crescimento até um tamanho máximo”

.fluid-type {
  font-size: min(var(--font-size-max), calc(var(--font-size-base) + var(--font-size-fluid, 3cqi)));
}

Agora, você pode estender essa solução e calcular dinamicamente o limite máximo do intervalo, como fizemos para o final mínimo do intervalo no primeiro mixin. Essa é a beleza das propriedades personalizadas usadas com os padrões – você pode escolher um método inicial para o mixin e aceitar uma substituição também!

Mixin 3: Gerar estilos usando uma proporção de escala de tipo

Conforme observado na introdução, o tipo de fluido já foi discutido aqui no ModernCSS. Nesse tutorial, a ideia-chave era criar tamanhos de fonte de acordo com uma proporção de escala de tipo e foi calculada com Sass.

Agora podemos pegar o que aprendemos nos outros mixins e produzir uma solução comparável, mas desta vez apenas com propriedades personalizadas e funções matemáticas CSS, em vez de depender do Sass!

A ideia da proporção é produzir uma coleção de tamanhos de fonte que pareçam harmoniosos como um grupo. Uma proporção também abstrai a necessidade de definir tamanhos de fonte estáticos individuais, pois é usada para gerar os tamanhos dinamicamente.

Este mixin será muito semelhante ao primeiro mixin, com a diferença em como calculamos o tamanho real da fonte.

Mais uma vez, precisamos configurar as propriedades personalizadas para nossas regras básicas. Definiremos uma --type-ratiopropriedade e usaremos uma proporção de “quarto perfeito” como ponto de partida.

:root {
  /* Perfect Fourth */
  --type-ratio: 1.33;
}

Para que a proporção seja aplicada corretamente, precisamos compor os tamanhos das fontes. Isso significa que, dado um tamanho base, vamos multiplicá-lo pela proporção. Em seguida, pegaremos o resultado e o multiplicaremos pela proporção novamente para o próximo nível de tamanho e assim por diante.

Na antiga solução Sass, aproveitamos um loop para gerenciar a composição. Mas a tradução para propriedades personalizadas significa que precisaremos fazer isso com antecedência, então adicionaremos os tamanhos pré-calculados como propriedades globais adicionais.

Nossa “base” será do tamanho que planejamos aplicar ao corpo do texto para que nosso menor título seja pelo menos o primeiro múltiplo do nosso --type-ratiomaior. Neste caso, com a quarta proporção perfeita, isso faz --font-size-4igual a 1.33rem. Cada nível sucessivo pega o --font-size-[LEVEL]resultado anterior e o compõe aplicando o --type-ratio.

:root {
  /*  Body font size  */
  --body-font-size: 1rem;

  /* Compounded headlines sizes */
  --font-size-4: calc(var(--body-font-size) * var(--type-ratio));
  --font-size-3: calc(var(--font-size-4) * var(--type-ratio));
  --font-size-2: calc(var(--font-size-3) * var(--type-ratio));
  --font-size-1: calc(var(--font-size-2) * var(--type-ratio));
}

Em seguida, atribuiremos os tamanhos a cada regra de título. Lembre-se de que os font-sizelistados nessas regras serão usados ​​como fallback para navegadores que ainda não oferecem suporte a consultas e unidades de contêiner.

h1,
.h1 {
  --font-size: var(--font-size-1);
  font-size: var(--font-size);
}

h2,
.h2 {
  --font-size: var(--font-size-2);
  font-size: var(--font-size);
}

h3,
.h3 {
  --font-size: var(--font-size-3);
  font-size: var(--font-size);
}

h4,
.h4 {
  --font-size: var(--font-size-4);
  font-size: var(--font-size);
}

O mixin é um cálculo muito semelhante ao método discutido na primeira solução. No entanto, calcularemos o tamanho mínimo com antecedência. Isso é para que possamos criar uma transição mais suave para o grupo adicionando o valor mínimo + 1cqipara o meio, o valor ideal clamp(). Como estamos adicionando a unidade de consulta do contêiner ao mínimo, estamos usando um valor menor do que o primeiro mixin. Experimente e veja como mudar para um valor decimal como 0.5cqiafeta a taxa de mudança!

:is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, .fluid-type) {
  --_font-min: var(--font-size) - var(--font-size) * var(--font-size-diff, 0.3);

  font-size: clamp(
    max(var(--body-font-size), var(--_font-min)),
    var(--_font-min) + 1cqi,
    var(--font-size)
  );
}

Além disso, mantivemos nosso amigo max()para garantir que o mínimo não fosse capaz de reduzir abaixo de --body-font-size.

Curiosidade: a --_font-minpropriedade não precisa de um calc()wrapper porque, no momento em que a criamos como uma propriedade personalizada, ela é uma lista simples de valores. Quando é usado em clamp(), o navegador usa esse contexto para realmente fazer o cálculo com os operadores fornecidos para a equação.

Certifique-se de redimensionar isso como em um navegador de suporte e também compare a transição com o mixin #1.CSS para “Mixin para gerar tamanhos de fonte a partir de uma proporção de tipo”

Tamanho normal da cópia do corpo para um parágrafo e texto sem título.

Para obter melhores resultados, se você quiser alterar o --font-size-diffvalor, provavelmente desejará alterá-lo como uma propriedade global. Isso ocorre porque alterá-lo para níveis individuais interferirá no dimensionamento baseado em proporção.

Além disso, você pode tentar aumentar a base para o cálculo original se achar que está muito próximo do tamanho da cópia do corpo. Uma maneira rápida de fazer isso é adicioná-lo ao cálculo para --font-size-4, como:

--font-size-4: calc((var(--body-font-size) + 0.25rem) * var(--type-ratio));

Como um desafio para aplicar o que você aprendeu, você pode adaptar o segundo mixin que cresce a partir de um valor base para usar os valores base gerados pela taxa de tipo.

Dicas sobre como usar os Mixins

Na prática, ao usar qualquer um dos mixins apresentados neste tutorial, você possivelmente desejará criar contêineres a partir de elementos como <article>ou criar uma classe utilitária para aplicar a contenção. E, onde a contenção é aplicada, será algo a ser considerado ao definir a marcação para componentes como cartões. Caso contrário, como aprendemos, pode parecer que a viewport está sendo usada para calcular o tamanho da fonte em vez do contexto pretendido.

Enquanto nossas regras de mixin estão sendo aplicadas amplamente a manchetes, você pode preferir aplicar apenas o tipo fluido quando uma classe utilitária é usada. Ou você pode determinar algumas variações que melhor se ajustam aos seus contextos e componentes específicos, como escalas para artigos, cartões, formulários e tabelas.

Qual devo usar?

Como todos os mixins usam a unidade de consulta do contêiner cqipara acionar a expansão e redução do tamanho da fonte, seu contexto e preferências serão os fatores decisivos.

Talvez você sinta que expandir a partir de uma base é mais fácil de raciocinar, ou produz os resultados que você procura de forma mais consistente para um componente específico, então você usa a mixagem número dois. Ou talvez você goste de definir os intervalos com mais precisão ou tenha recebido esses intervalos nas especificações de design, portanto, a combinação número um que clamp()melhor se adapta ao seu estilo. E talvez você apenas prefira deixar os tamanhos para a matemática, então fornecer uma escala de tipo como mixin número três funciona melhor para você.

Recursos adicionais sobre tipografia fluida

O tipo de fluido está longe de ser um tópico novo, e os métodos apresentados aqui não são as únicas maneiras de realizá-lo! Aprendi muito com os recursos a seguir e incentivo você a continuar pesquisando para encontrar a técnica que melhor se adapta às suas preferências ou projeto.

A maioria dos recursos usa cálculos baseados em viewport, pois as unidades de consulta de contêiner são uma adição mais recente à plataforma da web. Como tal, eles podem precisar ser adaptados se você preferir basear o dimensionamento em contêineres.

• Ignore qualquer um dos cálculos manuais e use os valores fornecidos pelo Utopia.fyi (atualmente baseado apenas em viewport)
• Uma revisão completa da tipografia fluida com clamp() por Adrian Bece
• Uma alternativa para os mixins aqui é esta solução de Andy Bell para dimensionamento de tipo de fluido controlado por propriedade personalizada
• Scott Kellum da Typetura apresenta este método inovador de derivar tamanhos de fonte usando animação de quadro-chave para fazer a interpolação