Archivi tag: font

CSS3 Base – 3.4 – Peso dei caratteri

In questa lezione vi spiego come rendere più spessi i caratteri.

font-weight

La proprietà font-weight serve per impostare uno spessore al testo, per renderlo più marcato rispetto al resto del testo della pagina.

Uso di font-weight
Uso di font-weight

Questa proprietà accetta i seguenti valori:

  • normal – testo normale, non inspessito;
  • bold – testo in grassetto;
  • bolder – testo più spesso rispetto al normale (valore relativo);
  • lighter – testo meno spesso rispetto al normale (valore relativo).
Esempio
Esempio

In alternativa ai valori testuali, è possibile usare dei valori numerici da 100 a 900, che specificano lo spessore del testo:

  • 100
  • 200
  • 900

Il valore 400 corrisponde a normal, mentre 700 a bold.

Nota: spesso non si nota la differenza tra alcuni valori numerici in quanto la maggior parte dei font supportano soltanto la versione normale (400) o grassetto (700).

Video

CSS3 Base – 3.2 – Dimensione del testo

In questa lezione vi parlo di come si modifica la dimensione del testo.

font-size

La proprietà font-size modifica la dimensione del testo a cui viene applicata la regola.

Uso di font-size
Uso di font-size

La proprietà accetta:

  • valori assoluti, ovvero valori con unità di misura fisse;
  • valori relativi, ovvero valori che dipendono da altri fattori.

Valori in pixel

Assegnando un valore assoluto, ad esempio il pixel, il carattere diventerà alto esattamente di quanto avete specificato:

font-size: 22px;

I pixel, indicati con px, sono intesi come valori assoluti, nel senso che sono indipendenti dalla larghezza della pagina o dalla dimensione di altri elementi (anche se i pixel possono essere più o meno grandi a seconda dello schermo su cui vengono visualizzati).

La dimensione predefinita del testo di una pagina web (testo del paragrafo) è di 16 pixel.

Dimensioni in pixel
Dimensioni in pixel

Valori relativi

E’ possibile impostare la grandezza del testo usando valori relativi, come ad esempio em e percentuali.

Impostando la dimensione del testo in percentuale (%), lo si obbliga ad avere una grandezza relativa a quella del testo per l’elemento che lo contiene.

font-size: 200%;

Per fare un esempio, se un paragrafo si trova dentro ad un div (un contenitore di elementi), scrivendo il seguente stile:

Uso delle percentuali
Uso delle percentuali

il testo del paragrafo dentro al div sarà grande 64 pixel, ovvero il doppio della dimensione del testo nel suo contenitore (32 pixel).

Quindi il testo con grandezza indicata in valori relativi è variabile al variare della dimensione del testo del contenitore che lo contiene.

L’unità di misura em indica la grandezza predefinita del font, che di norma abbiamo detto essere di 16 pixel.

Quindi:

1em = 16px

Come per la percentuale, è una unità di misura relativa, in quanto se noi andiamo a cambiare la dimensione standard del testo, gli em variano di conseguenza.

L’uso di em è raccomandato dal W3C.

Reset delle dimensioni

Per esigenze di leggibilità, magari dettate dalla visualizzazione del sito su dispositivi diversi, possiamo impostare un criterio per determinare una dimensione standard per la pagina web e farla usare come riferimento per tutti gli elementi testuali contenuti in essa.

Per cambiare la dimensione del testo standard, ovvero per effettuare un reset delle dimensioni dei caratteri, possiamo usare diversi modi.

Un sistema largamente utilizzato è quello di re-impostare la dimensione standard del font della pagina (del body, cioè il contenitore di livello principale) a 100%, quindi si imposta la dimensione di tutti gli altri elementi di testo utilizzati nella pagina con valori relativi (in em):

Reset dimensioni
Reset dimensioni

Se vogliamo rendere il testo più grande, ci basterà variare il valore di font-size per il body (ad esempio portandolo a 120% o 80%) e tutte le altre dimensioni varieranno di conseguenza.

Video

CSS3 Base – 3.1 – Tipo di carattere

In questa lezione vi spiego:

  • come modificare il tipo di font per i testi della vostra pagina;
  • quali tipi di caratteri potete utilizzare.

Famiglie di caratteri

Quando create una pagina web usando solo codice HTML e la visualizzate su un browser, quest’ultimo decide che tipo di carattere usare per i testi.

Normalmente questa scelta viene fatta in base alle impostazioni predefinite dal browser: nella maggior parte dei casi viene scelto il carattere Times New Roman.

E’ possibile cambiare il tipo di carattere, o font, tramite i CSS.

Esistono diverse “famiglie” di caratteri, ovvero gruppi di font che hanno caratteristiche comuni.

Le 3 principali famiglie sono:

  • caratteri serif:
    • Times New Roman
    • Georgia
  • caratteri sans-serif:
    • Arial
    • Verdana
  • caratteri monospace:
    • Courier New
    • Lucida Console

I caratteri di tipo serif sono quelli che hanno le grazie sulle lettere, ovvero quelle estremità affusolate e curve, come in questo caso:

Lettera A con grazie
Lettera A con grazie

I caratteri sans-serif non presentano le grazie, quindi hanno spigoli netti:

Caratteri senza grazie
Caratteri senza grazie

Infine, i caratteri monospace hanno lettere con la stessa larghezza (anche gli spazi):

Caratteri monospace
Caratteri monospace

font-family

Il tipo di font può essere modificato utilizzando la proprietà font-family:

Uso di font-family
Uso di font-family

Questa proprietà accetta sia il tipo di carattere, sia la famiglia di appartenenza.

Ad esempio:

font-family: verdana;

Indica che il tipo di carattere scelto è il Verdana, mentre:

font-family: sans-serif;

indica che possiamo usare qualsiasi carattere senza grazie (il browser ne sceglierà uno).

Notare che se il nome del carattere è composto da più di una parola, andrà scritto tra doppi apici:

font-family: "Times New Roman";

Nell’immagine di esempio vedete che font-family ha diversi valori:

font-family: verdana, arial, helvetica, sans-serif;

Può succedere che il sistema operativo su cui viene visto il sito non abbia tutti i caratteri necessari (pensate ad uno smartphone), così è buona norma dare una scelta più ampia di caratteri tra cui scegliere. Il browser sceglierà uno di questi font partendo da sinistra verso destra, in base alla disponibilità di font del sistema:

  1. prima cercherà il font Verdana;
  2. se non c’è cercherà il font Arial;
  3. se non lo trova andrà bene Helvetica;
  4. se non trova nemmeno questo, sceglierà un font qualsiasi, purché di tipo sans-serif.

Video