Rimanendo sempre in ambito di tipografia, un altro elemento importante da prendere in considerazione oltre alle dimensioni del testo è quello relativo alla scelta del tipo di font da utilizzare.

I font disponibili su pc infatti sono generalmente diversi rispetto a quelli disponibili sugli smartphone e/o sui tablet, alcuni dei quali hanno giusto un font per famiglia generica (sans-serif, serif, monospace …).

Utilizzando, ad esempio, una regola come quella di seguito riportata

h1 {

font-family:Arial, Helvetica, sans-serif;

}

molto probabilmente su alcuni dispositivi Android i titoli h1 non verranno visualizzati ne in Arial, ne in Helvetica ma in Droid Sans.

I CSS3 e i vari servizi come Google Web Font (implementato nativamente in Passweb) possono permetterci di superare questi limiti, integrando nel sito font non comunemente presenti sul dispositivo.

Questa soluzione necessita però di scaricare dei contenuti aggiuntivi (i file dei font) dai vari fornitori di servizio, per cui mentre potrebbe rivelarsi effettivamente molto comoda nel caso in cui il sito venga visualizzato su schermi di pc (dove generalmente non si hanno grossi problemi a livello di connessione e una decina di kb in più o in meno non fa alcuna differenza), in mobilità, dove invece i limiti a livello di connessione potrebbero essere determinanti, potrebbe non essere la soluzione ottimale nel senso che potremmo ridurre le prestazioni del sito e aumentare i tempi di caricamento della pagina.

Anche in questo caso ci vengono in aiuto le media query che, nel momento in cui dovessimo porre l’attenzione sull’ottimizzazione delle prestazioni, potranno consentirci di utilizzare font differenti per differenti dispositivi.

Potremmo utilizzare, ad esempio, due media query di questo tipo:

@media only screen (max-width: 1024px) {

body {

font-family:Arial, Helvetica, sans-serif;

}

}

@media only screen (min-width: 1025px) {

@import url(http://fonts.googleapis.com/css?family=Nothing+You+Could+Do);

body {

font-family: 'Nothing You Could Do';

}

}

Nell’esempio indicato:

• nel caso in cui l’area di visualizzazione del documento (viewport) sia inferiore ai 1024px (assumiamo che in tal modo si possano identificare i dispositivi mobile) verrà utilizzato uno dei font standard presenti sul dispositivo (Arial, Helvetica o il font della famiglia generica sans-serif). In queste condizioni non verrà quindi scaricata nessuna risorsa esterna.
• nel caso in cui l’area di visualizzazione del documento (viewport) sia superiore ai 1024 px (assumiamo che in tal modo si possano indentificare la visualizzazione del sito su schermi per pc) verrà scaricato da Google, ed utilizzato all’interno del sito, il web font ‘Nothing You Could Do’