TIPOGRAFIA WEB
SCELTE TIPOGRAFICHE 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 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 che font 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 che font-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.
LEGGIBILITÀ 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.
COMBINARE I FONTS 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
EFFETTI GRAFICI 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