Tipografia fluida - CSS-Tricks | Partes de codigo 2025

Indo direto ao código, aqui está uma implementação funcional:

html ( font-size: 16px; ) @media screen and (min-width: 320px) ( html ( font-size: calc(16px + 6 * ((100vw - 320px) / 680)); ) ) @media screen and (min-width: 1000px) ( html ( font-size: 22px; ) )

Vale a pena dar uma olhada em nosso post mais recente Simplified Fluid Typography para dimensionamento de tipo prático, fixo e baseado em janela de visualização.

Isso seria dimensionado font-sizede um mínimo de 16 pixels (em uma janela de visualização de 320 pixels) a um máximo de 22 pixels (em uma janela de visualização de 1000 pixels). Aqui está uma demonstração disso, mas como um Sass @mixin (que abordaremos mais tarde).

Veja o exemplo da base da caneta do tipo de fluido w Sass de Chris Coyier (@chriscoyier) no CodePen.

O Sass foi usado apenas para tornar esse resultado um pouco mais fácil de gerar e para o fato de que há um pouco de matemática envolvida. Vamos dar uma olhada.

Usando unidades de janela de visualização e calc(), podemos fazer com que o tamanho da fonte (e outras propriedades) ajuste seu tamanho com base no tamanho da tela. Portanto, em vez de ser sempre do mesmo tamanho ou pular de um tamanho para o outro nas consultas de mídia, o tamanho pode ser fluido.

Aqui está a matemática, crédito Mike Riethmuller:

body ( font-size: calc((minimum size) + ((maximum size) - (minimum size)) * ((100vw - (minimum viewport width)) / ((maximum viewport width) - (minimum viewport width)))); )

A razão pela qual a matemática é um pouco complicada é que estamos tentando evitar que o tipo sempre fique menor que nosso mínimo ou maior que nosso máximo, o que é muito fácil de fazer com unidades de janela de visualização.

Por exemplo, se quisermos o tamanho da fonte em um intervalo onde 14pxé o tamanho mínimo na menor largura da janela de visualização 300pxe onde 26pxé o tamanho máximo na maior largura da janela de visualização 1600px, então nossa equação se parece com isto:

body ( font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300))); )

O texto muda fluidamente para a largura da janela de visualização

Veja a Pen JEVevK por CSS-Tricks (@ css-tricks) no CodePen.

Para bloquear os tamanhos mínimo e máximo, usar essa matemática nas consultas de mídia ajuda. Aqui está um pouco de Sass para ajudar ...

Em Sass

Você poderia fazer um mixin (bastante robusto), como este:

@function strip-unit($value) ( @return $value / ($value * 0 + 1); ) @mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) ( $u1: unit($min-vw); $u2: unit($max-vw); $u3: unit($min-font-size); $u4: unit($max-font-size); @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 ( & ( font-size: $min-font-size; @media screen and (min-width: $min-vw) ( font-size: calc(#($min-font-size) + #(strip-unit($max-font-size - $min-font-size)) * ((100vw - #($min-vw)) / #(strip-unit($max-vw - $min-vw)))); ) @media screen and (min-width: $max-vw) ( font-size: $max-font-size; ) ) ) )

Que você usa assim:

$min_width: 320px; $max_width: 1200px; $min_font: 16px; $max_font: 24px; html ( @include fluid-type($min_width, $max_width, $min_font, $max_font); )

Aqui está outro exemplo de Mike, obtendo o ritmo fluido corretamente:

Estendendo a ideia para cabeçalhos com escala modular

Escala modular, o que significa que quanto mais espaço disponível, mais dramático será o tamanho diferente. Talvez na maior janela de visualização com, cada cabeçalho na hierarquia seja 1,4x maior do que o próximo, mas no menor, apenas 1,05x.

Ponto de vista:

“Tipo de fluido” i̶n̶s̶p̶i̶r̶e̶d̶ roubado de @MikeRiethmuller agora ao vivo em blogs @CodePen. Incluindo “Escala Modular de Fluido!” pic.twitter.com/0yJk8Iq8fR

- Chris Coyier (@chriscoyier) 27 de outubro de 2016

Com nosso mixin Sass, isso se parece com:

$mod_1: 1.2; // mobile $mod_2: 1.5; // desktop h1 ( font-size: $mod_1*$mod_1*$mod_1*$mod_1 *1rem; @include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font); ) h2 ( font-size: $mod_1*$mod_1*$mod_1 *1rem; @include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font); ) h3 ( font-size: $mod_1*$mod_1 *1rem; @include fluid-type($min_width, $max_width, $mod_1*$mod_1 *$min_font, $mod_2*$mod_2 *$min_font); )