Tipografia--- o, messo semplicemente, facendo testo guardare bene---è uno dei più importanti aspetti del web design, ma è anche uno dei più trascurati. Rendendo i contenuti chiari e leggibili non solo aiuta il vostro disegno, inconsciamente rende il contenuto sul tuo sito più piacevole e manterrà i lettori per tornare più. Non è difficile, sia: se sai che le regole e gli elementi da aggiungere ai fogli di stile delle tue pagine web, si può notevolmente migliorare l'aspetto del testo in cinque minuti.

Istruzioni

1

Decidere quali tipi di carattere si desidera utilizzare prima di toccare il codice del sito Web. Il web ha un numero limitato di famiglie di caratteri che possono riconoscere tutti i browser; per un elenco di font web-safe, vedere risorse di seguito. È anche utile capire la differenza tra i font serif e sans-serif. I font serif, ad esempio Times New Roman, aspetto tradizionale carta da giornale o rivista font---lettere hanno poco code sui bordi. I caratteri sans serif, ad esempio Arial, non lo fanno e guardare blockier. Combinando un serif e un font sans serif---ad esempio, utilizzando un serif font per i titoli del tuo sito e un sans serif per i corpi di articolo---di solito produce un esteticamente piacevole stile tipografico.

2

Aggiungere font pile al foglio di stile del tuo sito Web (in genere un file CSS). Stack di carattere sono elenchi di font che fungono da istruzioni per i browser web. Se computer del browser riconosce il primo font, utilizzarlo; in caso contrario, utilizzare il secondo tipo di carattere e così via. Per dichiarare un insieme universale di caratteri nella sezione < body > di pagine HTML, la sintassi sarà simile a questo:
corpo () {
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
}
Il foglio di stile per prima cosa dice al browser di utilizzare Lucida Sans Unicode. Se non riconosce quel tipo di carattere---ad esempio, Mac non hanno installato di default---si muove su per il tipo di carattere simile Lucida Grande (che riconoscono i Mac). Se per qualche motivo che non riconosce uno di quelli, come su alcune configurazioni di Linux, USA predefinito del computer sans serif carattere.

3

Dichiarare gli elementi line-height e font-size per il vostro testo pure. Sulla maggior parte dei browser, l'altezza della riga predefinito è troppo stretto. D'altra parte, si potrebbe pensare che la dimensione del carattere predefinita è troppo grande. Ma assicuratevi di non impostarlo su qualcosa di meno di 11 pixel. Non gli occhi di tutti sono buoni come il tuo, e alcune persone preferiscono appoggiarsi indietro quando leggono.

4


Modificare il colore predefinito dei tipi di carattere. Se si utilizza uno sfondo scuro, ti consigliamo di rendere il vostro font più leggero, ma non basta lasciare il vostro font nero. Contrasto elevato può essere un efficace stile quando fatto correttamente, ma di solito troverete che il testo è più facile da leggere quando è una tonalità di grigio al contrario di completamente nero o bianco.
Il seguente è un insieme di regole di stile è possibile inserire sul tuo foglio di stile che utilizzano tutti questi elementi insieme:
corpo () {
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
font-size: 12px;
linea-altezza: 1.8em;
colore: #555555;
}
H1 {
font-family: Georgia, serif;
}
Sulla sinistra della foto, si vede che cosa assomiglierebbe un articolo senza alcuna formattazione. Sulla destra, si può vedere quello che sembra lo stesso testo con le regole di stile di cui sopra.