La tipografia è senza dubbio la parte più importante del design di qualsiasi sito web. Un'intestazione enorme su una pagina bianca vuota potrebbe sembrare il sogno di un minimalista che si avvera, ma cosa succede quando iniziamo a iniziare a ridurre la nostra pagina per dispositivi sempre più piccoli?

Hnnggghh !!! Tutto si spezza e sembra terribile.

Questo è il motivo per cui abbiamo bisogno di una tipografia reattiva. Abbiamo bisogno di una tipografia che si adegui per restringersi ai breakpoint. Ma nessuno sano di mente vuole passare attraverso tutti i problemi di reimpostare tutti i loro stili di base per ogni singolo elemento tipografico sulla loro pagina.

Fortunatamente possiamo cambiare la dimensione del html selettore in modo che tutti i suoi discendenti ereditino una dimensione relativamente più piccola.

Per esempio

Iniziamo con il markup del campione di cucina:

Intestazione 1
 
Intestazione 2
 
Intestazione 3
 
Intestazione 4
 
Intestazione 5
 
Intestazione 6
 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit iusto adipisci, cupiditate animi, itaque qui aspernatur vel corrompe labore minima, ecceturi ab, fuga rem dolores. Ratione sunt autem iusto aliquid. 
 
 
Voce di elenco 1
 
Voce di elenco 2
 
Elenco elemento 3
 
 
 
Voce di elenco 1
 
Voce di elenco 2
 
Elenco elemento 3
 

Spingilo un po 'dalle pareti imbottendo il nostro html selettore e ripristineremo il margin-topsu tutti i nostri elementi tipografici perché è davvero fastidioso quando si è in cima alla tua h1 il tag è di circa un pollice sotto un'immagine che dovrebbe sedersi accanto a. Per il momento, tutto il resto rimarrà al browser predefinito.

Stiamo usando Stylus qui perché, come probabilmente sapete, sono un grande fan della sintassi concisa di Stylus:

riempimento html: 2rem h1, h2, h3, h4, h5, h6, p, ul, ol margin-top: 0

Buon inizio, ma un testo enorme per il testo enorme e i caratteri chiari sono una tendenza molto bella in corso proprio ora, quindi aggiungiamola. Ne inseriremo anche alcuni altezza della linea per assicurarci che i nostri paragrafi siano belli.

html padding: 2rem font-size: 24px font-weight: 100 line-height: 1.5 h1, h2, h3, h4, h5, h6, p, ul, ol margin-top: 0

Correzione dell'altezza della linea

Ma ora i nostri elementi hanno un enorme margin-bottom su di loro e le nostre intestazioni hanno un enormealtezza della linea anche. Fortunatamente questa è una soluzione rapida:

html padding: 2rem font-size: 24px font-weight: 100 line-height: 1.5 h1, h2, h3, h4, h5, h6, p, ul, ol margin-top: 0 margin-bottom: 1rem h1, h2, h3, h4, h5, h6 margin-bottom: .5rem line-height: 1.1

Là! La nostra tipografia pigra è completa. Abbiamo perso alcuni elementi tipografici (blockquotes, liste di definizioni, ecc.), Ma sentitevi liberi di aggiungerli al boilerplate mentre li incontrate.

Guai da Viewport più piccoli

Ora, ancora, cosa succede quando contrattiamo la nostra vista? La nostra tipografia sembra terribile. È difficile da leggere e richiederà all'utente di scorrere più volte solo per leggere un paragrafo.

Quindi sistemiamolo aggiungendo alcune domande sui media e cambiando le nostre html selettore di dimensione del font ad ogni punto di interruzione:

html padding: 2rem font-size: 24px font-weight: 100 line-height: 1.5 @media (max-width: 900px) font-size: 20px @media (max-width: 500px) font-size: 14px h1, h2 , h3, h4, h5, h6, p, ul, ol margin-top: 0 margin-bottom: 1rem h1, h2, h3, h4, h5, h6 margin-bottom: .5rem line-height: 1.1

Ecco! 

Eccolo lì, una tipografia reattiva in cinque minuti. Tutti gli elementi tipografici sono dimensionati in relazione al html elemento, quindi avendo un più piccolo html font-size su schermi più piccoli riduciamo tutto in proporzione.

Demo a schermo intero su CodePen.

Ulteriori letture

Se sei particolarmente interessato a veramente tipografia reattiva, e voglio personalizzare questo standard in modo più dettagliato. Consiglio vivamente una scala più moderna per la tipografia Web di Jason Pamental.