Scegliere bene il font da usare, il colore, la grandezza è come fare metà del lavoro di un sito.
Scegliere un font troppo piccolo, dal colore troppo forte o al contrario troppo debole può essere controproducente poichè affaticherebbe il lettore fino a portarlo a decidere di non visitare più il nostro sito.
Quindi cercate sempre di fare delle scelte oculate e sensate e non solo dettate da estri creativi del momento che, per quanto accattivanti, potrebbero rivelarsi poco utili.
 

Può sembrare cosa da poco ma già la scelta del font da usare può rivelare la tipologia di sito che andremo a definire.
I font universalmente riconosciuti sono i seguenti:
Arial, Helvetica, sans-serif,Times New Roman, Times, serif,Courier New, Courier, mono,Georgia, Verdana, Geneva.

Quasi sempre non si indica un solo font sul CSS ma si indica una famiglia di font, formata da font simili fra di loro.
Questo per venire incontro a diverse interpretazioni dei vari browser.
Le famiglie comunemente utilizzate sono le seguenti:

• Arial, Helvetica, sans-serif
• Times New Roman, Times, serif
• Courier New, Courier, mono
• Verdana, Arial, Helvetica, sans-serif
• Georgia, Times New Roman, Times, serif

Per dichiarare nel CSS la famiglia di font che abbiamo scelto bisogna scrivere:

Es.: font-family: “Georgia, Times New Roman, Times, serif”;

N.B. Sconsigliatissimo usare dei font che avete scaricato sul vostro pc e che non sono tra questi sopra elencati.
Il perchè? Prima di tutto se solo voi avete scaricato quel font sarete voi gli unici a vederlo correttamente nel sito, chiuque visiterà il vostro sito vedrà un font predefinito le cui caratteristiche di forma e dimensione potrebbe rivelarsi disastroso per il vostro layout.
Se anche siete tanto premurosi da indicare nel sito che font avete usato e mettete a disposizione il link per scaricarlo ed installarlo farete comunque fatica per niente.
Praticamente nessuno si prenderà la briga di scaricarsi un font solo per vedere correttamente il vostro sito, molto più facilmente, se con il font predefinito il sito è mezzo disastrato, il nostro visitatore passerà ad un altro sito facendovi perdere un visitatore.

Questa voce regola la grandezza del font utilizzato.
Si esprime in pixel e la dicitura esatta da mettere nel CSS è:

Es.: font-size: 10px;

Occhio che 10px per il font verdana sono diversi dai 10px assegnati ad un Georgia .. quindi fate qualche prova finchè non raggiungete una grandezza ben leggibile.

Assegnare un colore ad un testo è molto semplice, la dicitura da usare sarà:

Es.: color: #000000;

Il colore si può dichiarare tramite i suoi valori RGB (alias combinazioni alfa-numeriche precedute dal cancelletto) o, trattandosi di colori di base, si può decidere di scrivere il nome del colore (senza cancelletto davanti):

Es.: color: black;

Anche qua scegliete bene i colori del testo in rapporto al colore dello sfondo su cui poggia il testo.
Contrasti troppo forti o troppo deboli stancano ed affaticano gli occhi.

Regola la corposità del testo, i valori che possiamo utilizzare sono:

• normal
• bolder
• bold
• lighter

Es.: font-weight: bold;

Definisce l’allineamento del testo:

• left (da sinistra)
• right (da destra)
• center(centrato)
• justify (gustificato)

Es.: text-align: left;

Lo dice il nome stesso … definisce una decorazione che vogliamo dare al testo.
Solitamente è usata spesso per i link.
Possiamo scegliere fra:

• none (nessuna decorazione)
• underline (linea sottostante al testo)
• overline(linea sovrastante al testo)
• line-through (linea che attraversa orizzontalmente il testo)
• blink (lampeggiante, funzione che non è supportata da molti browser)

Es.: text-decoration: underline;

Ci permette di decidere di far comparire il testo in una data maniera senza preoccuparci di scriverla correttamente.
Per esempio se vogliamo che il testo sia visualizzato tutto con le iniziali maiuscole, una volta dichiarata questa proprietà, potremo anche permetterci di scrivere tutto minuscolo, ci penserà il CSS a rendere tutto il testo con le iniziali maiuscole.
Proprietà:

• none (nessun transform)
• capitalize (tutte le iniziali sono maiuscole)
• uppercase(tutto il testo diventa maiuscolo)
• lowercase (tutto il testo diventa minuscolo)

Es.: text-transform: uppercase;

Permette di scegliere lo spazio che va a formarsi fra una lettera e l’altra.
Si dichiara solitamente in pixel o em.

Es.: letter-spacing: 2px;

Permette di scegliere lo spazio che va a formarsi fra una parola e l’altra.
Si dichiara solitamente in pixel o em.

Es.: word-spacing: 10px;

« Back to Tutorials - L’abc del CSS