Il web design ha sempre preso in prestito principi e definizioni dal mondo della grafica e del design di stampa. Ciò è particolarmente vero quando si parla di tipografia Web e del modo in cui si ottengono le forme delle lettere sulle nostre pagine Web. Questi paralleli non sono sempre da 1 a 1 traduzioni, ma puoi certamente vedere dove una disciplina ha influenzato l'altra. Ciò è particolarmente evidente se si considera la relazione tra il termine tipografia tradizionale "leading" e la proprietà CSS conosciuta come "line-height".
Lo scopo del guidare
Quando le persone utilizzavano manualmente lettere in metallo o in legno per creare la tipografia di una pagina stampata, sottili pezzi di piombo venivano posti tra le righe orizzontali del testo per creare spaziature tra quelle linee. Se volessi uno spazio più grande, inseriresti più pezzi di piombo. In questo modo è stato coniato il termine "leader". Se hai cercato il termine "guida" in un libro sul design tipografico e sui principi, avrebbe letto qualcosa sull'effetto di "la distanza tra le linee di base di righe successive di tipo".
Leader nel Web Design
Nel progetto digitale, il termine "leader" è ancora usato per riferirsi alla spaziatura tra le righe di testo. Molti programmi usano questo termine esatto, anche se ovviamente il piombo effettivo non viene usato in quei programmi. Questo è un grande esempio di nuove forme di design che prendono in prestito idee da quelle tradizionali, anche se l'esatta implementazione di quel principio è cambiata.
Quando si parla di web design, non esiste una proprietà CSS per "leading". Invece, la proprietà CSS che gestirà questa visualizzazione visiva del testo si chiama line-height. Se vuoi che il tuo testo abbia uno spazio aggiuntivo tra le righe orizzontali del testo, dovresti usare questa proprietà. Ad esempio, supponiamo di voler aumentare l'altezza della linea per tutti i paragrafi all'interno di main p { altezza della linea: 1,5;}
Questo ora sarebbe 1,5 volte l'altezza normale della linea, in base alla dimensione predefinita del carattere della pagina (che è normalmente 16px). Come spiegato sopra, l'altezza della linea è appropriata per utilizzare lo spazio delle righe di testo in paragrafi o in altri blocchi di testo. Se c'è troppo poco spazio tra le righe, il testo può diventare confuso e difficile da leggere per gli spettatori sul tuo sito. Allo stesso modo, se le linee sono distanziate troppo distanti sulla pagina, il normale flusso di lettura verrà interrotto e per questo motivo i lettori avranno problemi con il testo. Questo è il motivo per cui si desidera trovare la quantità appropriata di spaziatura dell'altezza della linea da utilizzare. Puoi anche testare il tuo design con utenti reali per ottenere il loro feedback sulla leggibilità della pagina. Non confondere l'altezza della linea con la spaziatura o i margini che useresti per aggiungere spazi bianchi alla struttura della tua pagina, compresi sotto l'intestazione oi paragrafi. Tale spaziatura non sta conducendo, e quindi non è gestita dall'altezza della linea. Se si desidera aggiungere spazio sotto determinati elementi di testo, si useranno margini o riempimento. Tornando all'esempio CSS precedente che abbiamo utilizzato, potremmo aggiungere questo: main p { altezza della linea: 1,5; margin-bottom: 24px;}
Questo avrebbe ancora l'altezza di 1,5 linee tra le righe di testo per i paragrafi della nostra pagina (quelli all'interno di main p { altezza della linea: 1,5; imbottitura-fondo: 24px;} In quasi tutti i casi, questo mostrerebbe lo stesso del CSS precedente. Supponiamo che tu voglia aggiungere spaziatura sotto gli elementi della lista che erano all'interno di una lista con una classe di "servizi-menu", dovresti usare i margini o il riempimento per farlo, NON l'altezza della linea. Quindi questo sarebbe appropriato. .services-menu li {< imbottitura-fondo: 30px;} In questo caso si utilizzerà l'altezza della riga solo se si desidera impostare la spaziatura del testo all'interno degli elementi di elenco stessi, supponendo che abbiano lunghe serie di testo che potrebbero essere eseguite su più righe per ciascun punto elenco. Quando usare l'altezza della linea
Quando non usare l'altezza della linea
