Come usare line-height in CSS

February 6

Come usare line-height in CSS


La proprietà CSS line-height determina la distanza o la spaziatura tra le righe del testo sulla pagina. Nel mondo della stampa, questa proprietà è chiamato di primo piano. Trovare il giusto line-height per la tua pagina web può fare una grande differenza nella leggibilità della pagina. Ecco come.

istruzione

1 La perfetta line-height dipenderà dalla vostra scelta della famiglia di caratteri. Nel mio esempio, sto utilizzando un font sans-serif. Alcuni font sono "alti" di altre. Tahoma sembra buono a 1.5, ma Times Roman non potrebbe. In generale, non si desidera che le linee di essere troppo vicini o troppo lontani. Si desidera spazio sufficiente tra le linee per creare la massima leggibilità, o la comparsa di facilità di lettura. Si vuole uno sguardo aperto e invitante, piuttosto che uno sguardo "densa", che scoraggia la lettura.

2 Line-height può essere applicato a qualsiasi elemento di testo, ma probabilmente è meglio impostare nella regola CSS per il corpo nel foglio di stile. Tutti gli elementi testuali sulla pagina erediterà quel valore line-height, che può essere regolato, se necessario, per le parti specifiche della pagina.

3 Ecco un esempio specifico di una regola CSS utilizzando line-height:
body {
font: 1em / 1.5 Tahoma, Geneva, sans-serif;
}

Per darvi lo stesso non si regola in stenografia CSS, sarebbe:

body {font-size: 1em;
line-height: 1.5;
font-family: Tahoma, Geneva, sans-serif;
}

4 Si noti che non vi è alcuna unità collegata al valore della linea di altezza. Nessuna unità px,% o EM devono essere assegnati al valore line-height.