Aprenda a criar um sistema de tipo de fluido simples, acessível e configurável que usa funções modernas de dimensionamento CSS.
Sou um grande fã de clamp()– é decente fazer o que mais gosto de fazer com CSS: deixe o navegador fazer seu trabalho com algumas dicas de como fazê-lo . Ele também fornece a quantidade certa de controle, o que é útil para elementos de layout também.
Neste tutorial, vamos usar a braçadeira para gerar um pequeno sistema de tipo de fluido que pode ser configurado usando as propriedades personalizadas CSS .
Começando
Tudo o que precisamos para este tutorial é uma pequena página HTML e um arquivo CSS. Vá em frente e crie os seguintes arquivos:
index.htmlglobal.css
Agora, dentro index.html, adicione o seguinte:Linguagem de códigoHTMLCOPIAR PARA ÁREA DE TRANSFERÊNCIA
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Fluid type demo</title>
<link rel="stylesheet" href="global.css" />
</head>
<body>
<article class="[ post ] [ flow ]">
<h1>Fusce dapibus, tellus ac cursus commodo</h1>
<h2>Donec ullamcorper nulla non</h2>
<h3>Morbi leo risus, porta ac consectetur</h3>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper.</p>
</article>
</body>
</html>
É isso para HTML. É um texto de marcador de posição labial para demonstrar nosso sistema de tipo de fluido. Tarefa concluída!
Aprofundando-se no CSS
Agora a parte divertida. Vamos adicionar nossos estilos globais básicos primeiro. Abra global.csse adicione o seguinte a ele:Linguagem de códigoCSSCOPIAR PARA ÁREA DE TRANSFERÊNCIA
body {
background: #f3f3f3;
color: #252525;
line-height: 1.5;
font-family: Georgia, serif;
padding: 2rem;
}
h1,
h2,
h3 {
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue,
helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;
line-height: 1.1;
font-weight: 900;
}
Isso fará com que as coisas pareçam um pouco mais agradáveis. Estamos usando minha fonte favorita, Georgia, como nossa base e a pilha de fontes do sistema para cabeçalhos. Esse contraste realmente o ajudará a ver o tipo de fluido em ação.
Agora podemos adicionar as coisas inteligentes – a configuração do tipo de fluido. Abra global.csse adicione o seguinte a ele:Linguagem de códigoCSSCOPIAR PARA ÁREA DE TRANSFERÊNCIA
h1,
h2,
h3,
p {
font-size: clamp(
var(--fluid-type-min, 1rem),
calc(1rem + var(--fluid-type-target, 3vw)),
var(--fluid-type-max, 1.3rem)
);
}
Há muita coisa acontecendo aqui, então vamos decompô-lo.
A clamp()função assume um valor mínimo, um valor ideal e um valor máximo. Isso nos permite criar alguns bloqueios .
Para impulsionar tudo isso, estamos usando três propriedades personalizadas:
--fluid-type-miné o menor que permitiremos que nosso texto vá--fluid-type-targeté nosso ambiente ideal e fluido. Usamoscalc()porque se você usar apenas uma unidade de janela de visualização para dimensionar seu tipo, isso pode causar problemas de zoom, que por sua vez, cria uma falha de acessibilidade WCAG .--fluid-type-maxé o maior que permitiremos que nosso texto vá
Para todas as três propriedades personalizadas, estamos definindo o valor padrão como o segundo parâmetro. Isso significa que você pode colocar este sistema de tipo de fluido em qualquer projeto, e mesmo se nenhuma dessas propriedades for definida: o sistema ainda funcionará com esses valores sensíveis padrão.
É realmente importante testar se seu texto fica grande o suficiente quando você aumenta o zoom e pequeno o suficiente quando você diminui o zoom – ele deve ser obviamente maior ou menor. Como estamos usando um remcomo parte de nosso cálculo de fluido neste tutorial, estamos ajudando muito nisso.
Implementando nosso sistema
Nós aplicamos o nosso sistema de tipo de fluido para os seguintes elementos: h1, h2, h3, p. Poderíamos – se quiséssemos – transformar isso em uma classe de utilitário para portabilidade máxima. Para este tutorial, vamos mantê-lo simples com seletores de tipo.
Queremos adicionar algumas configurações específicas para cada um deles, usando propriedades personalizadas, ou todo o texto terá o mesmo tamanho.
Abra global.csse adicione o seguinte a ele:Linguagem de códigoCSSCOPIAR PARA ÁREA DE TRANSFERÊNCIA
h1 {
--fluid-type-min: 2.5rem;
--fluid-type-max: 5rem;
--fluid-type-target: 5vw;
max-width: 15ch;
}
h2 {
--fluid-type-min: 1.8rem;
--fluid-type-max: 3rem;
}
h3 {
--fluid-type-min: 1.5rem;
--fluid-type-max: 2.5rem;
}
h2,
h3 {
max-width: 30ch;
}
p {
max-width: 60ch;
}
Para o <h1>, aumentamos o --fluid-type-targetpara um maior 5vw,. Ao aumentar a unidade da janela de visualização, aceleramos a taxa de crescimento, o que ajudará a manter seu tamanho extra grande. Para reduzir a taxa de crescimento e ter menos diferença entre os tamanhos mínimo e máximo: reduza o tamanho de --fluid-type-target.
Para todos os outros elementos, a taxa de crescimento padrão é boa, então tudo o que estamos fazendo é definir tamanhos mínimos e máximos sensatos, usando remunidades padrão .
Foram realizadas! Você pode ver uma demonstração ao vivo do que construímos aqui . Você também pode baixar os arquivos fonte completos, aqui .
Empacotando
Este é um sistema muito simples e básico e suportará confortavelmente muitos casos de uso. Para designs mais avançados e complexos, eu recomendaria usar algo como Typetura, que oferece um controle muito preciso, ou Utopia , que está um nível acima dessa abordagem que aprendemos hoje.
Para uma divulgação completa, não sou um grande fã do tipo de fluido, pessoalmente. Eu tive uma história tão mista e variada com isso ao longo dos anos e, pessoalmente, prefiro criar uma escala de tamanho, implementada por meio de consultas de mídia. É isso que este site faz, no momento em que escrevo.
O tipo fluido também está em demanda, então o que você aprendeu hoje sem dúvida será útil em algum ponto – senão mais, para lhe dar um contexto útil de como clamp()funciona.
Até a próxima vez, vá com calma 👋