TIPOGRAFIAWEB

I font a disposizione sul proprio sistema operativo

sono diversi da quelli presenti sui sistemi operativi

degli utenti.

Al momento di scegliere un font è fondamentale

assicurarsi che l’utente possa disporne.

SCELTE TIPOGRAFICHE

Scelte tipografi che

Tecniche di inserimento di un font in

un progetto web:

Scelta di un font web safe

Utilizzo della la tecnica font-stack

Utilizzo della regola @font-face

Scelte tipografi chefont web safe

FONT WEB SAFE

I font web safe sono un ristretto gruppo di font

presenti su tutti i sistemi operativi

Arial, Courier New, Times New Roman, Comic

Sans, Impact, Georgia, Trebuchet, Webdings,

Verdana

body {font-family: "Times New Roman";}

Scelte tipografi chefont-stack

FONT-STACK

Nel caso in cui non si scelga un font web safe è

possibile indicare una lista di font alternativi.

body {font-family: "Times New Roman",

Times, Georgia, serif;}

Scelte tipografi che@font-face

@FONT-FACE

Con il CSS3 è stata introdotta la regola @font-face, che

permette l'utilizzo di un numero infi nito di fonts

@font-face {font-family: myFirstFont;

src: url(sansation_light.woff);}

body {font-family: "myFirstFont", Times,

Georgia, serif;}

Scelte tipografi che@font-face

Tecniche di utilizzo della regola font-face

usare un font residente sul nostro computer,

inserendo il fi le del font con diverse estensioni nel

server web del sito che stiamo realizzando

usare un servizio esterno con web font pronti

all’uso da richiamare nei fogli di stile, come Google

Web Fonts (gratuito) o Typekit (a pagamento)

Scelte tipografi che@font-face

Formati @font-face:

True Type (TTF)

Open Type (OTF)

Embedded Open Type (EOT)

Web Open Font Formmat (WOFF)

Scalable Vector Graphic (SVG)

Famiglie di font

SERIF

Caratteri tipografi ci con “grazie”

Famiglie di font

SANS-SERIF

Caratteri tipografi ci con “senza grazie”

Famiglie di font

MONOSPACE

Caratteri tipografi ci a larghezza fi ssa

Tipografi a e responsive design

La dimensione dello schermo unita alla distanza

dell’utente da esso, incidono sulla leggibilità e

quindi sull'usabilità di un testo.

GERARCHIA

Evidenziare tipografi camente la gerarchia dei

contenuti di una pagina web

LEGGIBILITÀ

CONTRASTO

Stabilire un contrasto deciso tra sfondo e testo

LEGGIBILITÀ

INTERLINEA

Spazio compreso tra la base (baseline) di due righe di

testo. L'interlinea misura generalmente dai 2 i 5 px

più del font

Font-size: 12px; � Line height: 16px;

LEGGIBILITÀ

LEGGIBILITÀ

LUNGHEZZA DELLA LINEA

Un paragrafo eccessivamente lungo compromette

fortemente la leggibilità.

Nel web la lunghezza ideale è di 65 caratteri. Si

consiglia di mantenerla tra 40 e 80 caratteri.

Robert Bringhurst individua la lunghezza ideale con la

seguente formula: Line lenght = font-size x 10

LEGGIBILITÀ

LEGGIBILITÀ

CITAZIONI

Nel caso in cui vengano

utilizzate le virgolette è

consigliabile posizionarle

all'esterno del paragrafo.

LEGGIBILITÀ

VEDOVE E ORFANI

É opportuno non

lasciare parole singole

a chiusura di un

paragrafo (vedove) né

all'apertura (orfani)

LEGGIBILITÀ

ENFASI

É preferibile evitare le

combinazioni di

varianti per

enfatizzare delle parti

del testo.

LEGGIBILITÀ

SCALA TIPOGRAFICA

Utilizzare la scala tipografi ca per scegliere le

dimensioni dei font.

LEGGIBILITÀ

1) Combinare SERIF e SANS-SERIF

COMBINARE I FONTS

2) evitare le differenze sottili scegliendo famiglie simili

COMBINARE I FONTS

3) assegnare a ciascun font ruoli diversi

COMBINARE I FONTS

4) Variare il peso dei fonts per enfatizzare le differenze

COMBINARE I FONTS

4) assecondare la personalità dei font, e non combinare font con personalità opposte senza un motivo.

COMBINARE I FONTS

5) Alternare font con “forte personalità” ad altri neutrali.

COMBINARE I FONTS

7) Evitare un contrasto eccessivo

COMBINARE I FONTS

8) Utilizzare dai 2 ai 3 font per progetto

COMBINARE I FONTS

9) Diversifi care i font lavorando sulle dimensioni

COMBINARE I FONTS

FANCY FONTS

Inserire qualche

elemento tipografi co

ad alto contenuto

grafi co

EFFETTI GRAFICI

LETTERPRESS

Dare un'effetto tridimensionale al testo come se

fosse impresso o a rilievo.

EFFETTI GRAFICI

TEXTURE E PATTERN

Lavorare sullo sfondo (colori e texture) per dar risalto

al testo.

EFFETTI GRAFICI

LINK STYLE

Elaborare l'elemento link inserendo immagini o

elementi grafi ci

EFFETTI GRAFICI