Font size responsive con i CSS

Ci sono molte tecniche che possono essere utilizzate per rendere il testo responsive rispetto alla larghezza dello schermo. Il metodo più comune consiste nell’utilizzo delle media queries, impostando la dimensione del testo nei diversi breakpoint.

Utilizzo dei viewport units

Con l’aiuto delle viewport units è possibile creare un testo fluido, in pratica la dimensione del testo scalerà al ridimensionarsi dello schermo, in pratica una viewport unit è l’1% della dimensione dello schermo (larghezza/altezza).

Ci sono quattro units: vw (viewport width – larghezza del viewport), vh (viewport height – altezza del viewport), vmin (altezza o larghezza qualunque dei due sia minore), vmax (altezza o larghezza qualunque dei due sia maggiore).

In questo articolo ci concentreremo principalmente su vw. Inseriamo nel nostro file CSS la dimensione del font usando vw e la dimensione scalerà gradatamente in base alla dimensione dello schermo.

p{
  font-size: 2vw;
}

C’è un problema però. Usando solo i viewport units non abbiamo il controllo sul ridimensionamento, ad esempio il testo potrebbe essere davvero minuscolo oppure troppo grande nel caso di schermi molto larghi.

Limitare il ridimensionamento usando calc()

Quindi possiamo usare la funzione CSS calc() per limitare a un valore minimo il ridimensionamento del testo.

p{
  font-size: calc(16px + 2vw);
}

In questo esempio abbiamo settato la dimensione minima del testo a 16 pixel ma ancora non abbiamo l’esatto controllo sul ridimensionamento.

Controllo esatto del ridimensionamento

Usando la seguente formula avremo il controllo esatto:

Credit by madebymike

In termini CSS potremo scrivere:

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

Ad esempio se vogliamo che la dimensione del font scali tra i 16 pixel e i 26 pixel a partire da una dimensione dello schermo di 768 pixel fino a 1600 pixel scriveremo:

body{
font-size: calc(16px + (26 - 16) * ((100vw - 768px) / (1600 - 768))); 
}

In questo caso ho usato i pixel ma potrei utilizzare anche em come unità di misura, ovviamente tutti i valori dovranno essere in em, compresa la larghezza del viewport, quindi 48em (equivalente a 768px) fino a 100em (equivalente a 1600px).

body{
font-size: calc(1em + (1.625 - 1) * ((100vw - 48em) / (100 - 48)));
}

Questa formula, però, non imposta una dimensione del testo minima e massima ma definisce solamente la dimensione all’interno del range minimo e massimo del viewport. Per ovviare a questo problema useremo le media queries:

body{
font-size: calc(16px + (26 - 16) * ((100vw - 768px) / (1600 - 768))); 
}
@media screen and (max-width: 768px) { body { font-size: 16px; } }
@media screen and (min-width: 1600px) { body { font-size: 26px; } }

SASS Mixin

Se utilizzate SASS per i vostri progetti è possibile utilizzare questo mixin per implementare la tipografia fluida:

/* SASS mixin start */
/// $min - Minimum font size (px, rem)
/// $max - Maximum font size (px, rem)
/// $min-vw - Minimum viewport value lock range (px) --(optional)
/// $max-vw - Maximum viewport value lock range (px) --(optional)
/// $fallback - fallback font size (px, rem) --(optional)
@mixin fluid-font($min, $max, $min-vw: 768px, $max-vw: 1600px, $fallback: false) {
  $min-no-unit : strip-units($min);
  $max-no-unit : strip-units($max);
  
  $min-vw-no-unit : strip-units($min-vw);
  $max-vw-no-unit : strip-units($max-vw);
  
  @if getUnit($min) == "rem" or getUnit($min) == "em" {
    $min-no-unit : strip-units($min) * 16;
    $max-no-unit : strip-units($max) * 16;
  }
  
   $responsive : calc(#{$min-no-unit}px + (#{$max-no-unit} - #{$min-no-unit}) * ((100vw - #{$min-vw}) / (#{$max-vw-no-unit} - #{$min-vw-no-unit})));
  
  @if $fallback { font-size: $fallback; }
  @else { font-size: $max; }
font-size:  $responsive;
@media screen and (max-width: #{$min-vw}) { font-size: $min; }
   @media screen and (min-width: #{$max-vw}) { font-size: $max; }
}
@function strip-units($number) {
  @return $number / ($number * 0 + 1);
}
@function getUnit($value) {
  @return str-slice($value * 0 + "", 2, -1);
}
/* SASS mixin end */
/* Using SASS mixin */
body{
@include fluid-font(30px, 90px); //give min max size range 
//@include fluid-font(1.875em, 5.625em); //also can use em values
}

Come utilizzare il mixin

Il modo migliore per utilizzare la formula è quello di applicarlo al base font ad esempio nel tag body e usare gli em o i rem per assegnare il font-size a tutti gli elementi.

body{
  font-size: calc(21px + (30 - 21) * ((100vw - 768px) / (1600 - 768))); //setting base font size fluidly
}
@media screen and (max-width: 768px) { body { font-size: 21px; } } 
@media screen and (min-width: 1600px) { body { font-size: 30px; } } 

 h1{
    font-size: 3em; //em value will change fluidly as base font size changes
  }
 h2{
    font-size: 2.3em;
 }
 p{
    font-size: 0.7em;
 }

Hai già implementato la tipografia fluida nel tuo sito? Scrivilo nei commenti 🙂

Crediti

Articolo originale:
https://levelup.gitconnected.com/css-responsive-fluid-typography-a23a9aab19a

Immagine:
Tecnologia vettore creata da pikisuperstar – it.freepik.com

Codepen

See the Pen Fluid font SASS mixin by sumit mangela (@sumitmangela) on CodePen.