View
5
Download
0
Category
Preview:
Citation preview
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
Recommended