Tipografia fluida - Trucchi CSS | Frammenti di codice 2025

Arrivando direttamente al codice, ecco un'implementazione funzionante:

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 la pena dare un'occhiata al nostro post più recente Tipografia fluida semplificata per un dimensionamento pratico, bloccato e basato sulla visualizzazione.

Ciò font-sizescalerebbe da un minimo di 16 px (con un viewport di 320 px) a un massimo di 22 px (con un viewport di 1000 px). Ecco una demo di questo, ma come Sass @mixin (di cui parleremo più avanti).

Vedere l'esempio di base della penna del tipo fluido w Sass di Chris Coyier (@chriscoyier) su CodePen.

Sass è stato utilizzato solo per rendere quell'output un po 'più facile da generare e il fatto che ci sia un pizzico di matematica coinvolta. Diamo un'occhiata.

Usando le unità di visualizzazione e calc(), possiamo fare in modo che la dimensione del carattere (e altre proprietà) regoli la loro dimensione in base alla dimensione dello schermo. Quindi, invece di avere sempre la stessa dimensione o passare da una dimensione all'altra durante le media query, la dimensione può essere fluida.

Ecco la matematica, credito Mike Riethmuller:

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

Il motivo per cui la matematica è un po 'complicata è che stiamo cercando di evitare che il testo diventi sempre più piccolo del nostro minimo o più grande del nostro massimo, il che è molto facile da fare con le unità di visualizzazione.

Ad esempio, se vogliamo la nostra dimensione del carattere in un intervallo in cui 14pxè la dimensione minima alla larghezza più piccola del viewport di 300pxe dove 26pxè la dimensione massima alla larghezza più grande del viewport di 1600px, allora la nostra equazione avrà questo aspetto:

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

Il testo cambia in modo fluido in base alla larghezza della finestra

Vedi Pen JEVevK di CSS-Tricks (@ css-tricks) su CodePen.

Per bloccare queste dimensioni minime e massime, è utile utilizzare questa matematica all'interno delle media query. Ecco un po 'di Sass per aiutare ...

In Sass

Potresti creare un mixin (piuttosto robusto), come questo:

@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; ) ) ) )

Che usi in questo modo:

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

Ecco un altro degli esempi di Mike, che ottiene il ritmo fluido giusto:

Estendere l'idea alle intestazioni con scala modulare

Scala modulare, il che significa che maggiore è lo spazio disponibile, più drammatica è la diversa dimensione. Forse nella visualizzazione più grande con, ogni intestazione in alto nella gerarchia è 1,4 volte più grande della successiva, ma nella più piccola, solo 1,05 volte.

Vedi vista:

"Tipo fluido" i̶n̶s̶p̶i̶r̶e̶d̶ rubato a @MikeRiethmuller ora è disponibile sui blog di @CodePen. Compreso "Fluid Modular Scale!" pic.twitter.com/0yJk8Iq8fR

- Chris Coyier (@chriscoyier) 27 ottobre 2016

Con il nostro Sass mixin, questo assomiglia a:

$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); )