Ci sono due princìpi fondamentali per creare una effettiva tipografia responsive.

• Il primo è l'implementazione di un font ridimensionabile. Ciò significa che non deve solo adattarsi in base alle dimensioni dello schermo, ma che sia ridimensionabile da parte dell'utente.
• Il secondo è l'ottimizzazione della lunghezza delle righe di testo, per garantire un'ottima leggibilità.

Per quanto riguarda il primo punto, la maggior parte dei webmaster utilizza i pixel o gli em per le dimensioni del testo. Usare gli em o i rem è la scelta migliore, in quanto questi permettono agli utenti di ridimensionare il font nel browser. Gli em sono però "relativi", dipendono cioè, dall'elemento padre e questo vuol dire che è un po' più complicato rispetto all'uso dei pixel, perché si dovrebbero fare dei calcoli per avere una dimensione di font omogenea, quando nello stesso sito sono presenti diversi elementi che necessitano diverse dimensioni del font.

I rem offrono una valida alternativa agli em. Si comportano alla stessa maniera ad eccezione di una differenza fondamentale: i rem sono relativi all'elemento html piuttosto che ad ogni loro elemento padre. Questa differenza sostanziale agevola non di poco il corretto ridimensionamento del font.

Nel momento in cui dovessero essere utilizzati i rem quale unità di misura per i font, è importante applicare una dichiarazione CSS all'elemento html, e non al body del documento.

La regola dovrebbe essere la seguente:

html { font-size:100%; }

In questo modo le unità di misura rem verranno applicate alla dimensione di default del dispositivo.

Oltre a ciò è necessario anche specificare la dimensione del font per ciascuna dimensione del device e, in questo senso, ci vengono in aiuto ancora una volta, le media query. Sarebbe opportuno provare diverse dimensioni di font su dispositivi reali, al fine di ottenere una perfetta leggibilità (considerando, tra le altre cose, che il tutto dipende anche dal tipo di font scelto).

Potremmo utilizzare ad esempio delle media queries come quelle qui di seguito riportate:

@media (max-width: 640px)

{

body {font-size:1.3rem;}

}

@media (min-width: 641px)

{

body {font-size:1.2rem;}

}

@media (min-width:960px)

{

body {font-size:1.4rem;}

}

@media (min-width:1100px)

{

body {font-size:1.6rem;}

}

Per quel che riguarda invece il secondo punto è bene sottolineare come le linee guida, dettate in questo senso da quelle che sono le principali tendenze sul web, prevedono di utilizzare tra i 50 ed i 75 caratteri per riga.

In ogni caso tutto quando detto fin’ ora relativamente alla tipografia, non rappresenta una regola da dover seguire ad ogni costo. Bisogna infatti considerare sempre le specifiche esigenze del caso. Tanto per intenderci non è assolutamente detto che scalare proporzionalmente le dimensioni di tutti i testi del sito sia sempre la soluzione migliore.

Possono tranquillamente esserci casi in cui il font-size di determinati elementi (es. i titoli di pagina) non debba essere scalato come avviene invece per il testo del body; nulla vieta dunque, di trattare i singoli elementi in maniera diversa utilizzando, laddove necessario delle dimensioni del testo in pixel