Con il rilascio della versione 3.4.0 del tema GeneratePress è stata aggiunta la possibilità di utilizzare le variabili CSS come unità di misura per definire le dimensioni dei caratteri nel tema. Questo facilita l’adozione di una tipografia fluida sul proprio sito, come ti mostro in questo video.
Utilizzare una tipografia fluida offre una serie di vantaggi.
In primo luogo i font si adattano in maniera, appunto più fluida, al variare delle dimensioni del viewport. Non ci sono quindi quei salti netti da una dimensione a un’altra quando si passa dalla visualizzazione su smartphone a quella su tablet e a quella su desktop.
Inoltre, grazie all’impiego della tipografia fluida, si evita di dover impostare la dimensione dei font dei vari elementi del sito sia per desktop, sia per tablet e sia per smartphone.
Nel video ti mostro come utilizzare il Fluid Type Scale Calculator, uno strumento online gratuito che consente di generare velocemente le regole CSS necessarie per implementare un sistema di tipografia fluida sul sito. Uno strumento di questo tipo ci evita di dover effettuare tutti i calcoli necessari per poter utilizzare la funzione CSS Clamp.
Il codice generato dal Fluid Type Scale Calculator è opportuno aggiungerlo al file style.css del tema child di GeneratePress. Se ti serve, ho anche realizzato un video che spiega come installare un tema child per GeneratePress.
Per concludere, è utile effettuare una modifica anche al file functions.php del tema child di GeneratePress. In questo modo puoi utilizzare le regole CSS inserire nel file style.css del tema child, anche quando si utilizza l’editor a blocchi di WordPress.
Il codice che uso nel video è il seguente:
add_filter( 'generate_editor_styles', function( $editor_styles ) {
$editor_styles[] = 'style.css';
return $editor_styles;
} );