I font a disposizione sul proprio sistema operativo sono diversi da quelli presenti sui sistemi operativi degli utenti.

Transcript

1 TIPOGRAFIA WEB

2 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.

3 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

4 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";}

5 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;}

6 Scelte Con il CSS3 è stata introdotta la che permette l'utilizzo di un numero infi nito di {font-family: myfirstfont; src: url(sansation_light.woff);} body {font-family: "myfirstfont", Times, Georgia, serif;}

7 Scelte tipografi 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)

8 Scelte tipografi True Type (TTF) Open Type (OTF) Embedded Open Type (EOT) Web Open Font Formmat (WOFF) Scalable Vector Graphic (SVG)

9 Famiglie di font SERIF Caratteri tipografi ci con grazie

10 Famiglie di font SANS-SERIF Caratteri tipografi ci con senza grazie

11 Famiglie di font MONOSPACE Caratteri tipografi ci a larghezza fi ssa

12 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.

13 LEGGIBILITÀ GERARCHIA Evidenziare tipografi camente la gerarchia dei contenuti di una pagina web

14 LEGGIBILITÀ CONTRASTO Stabilire un contrasto deciso tra sfondo e testo

15 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;

16 LEGGIBILITÀ

17 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

18 LEGGIBILITÀ

19 LEGGIBILITÀ CITAZIONI Nel caso in cui vengano utilizzate le virgolette è consigliabile posizionarle all'esterno del paragrafo.

20 LEGGIBILITÀ VEDOVE E ORFANI É opportuno non lasciare parole singole a chiusura di un paragrafo (vedove) né all'apertura (orfani)

21 LEGGIBILITÀ ENFASI É preferibile evitare le combinazioni di varianti per enfatizzare delle parti del testo.

22 LEGGIBILITÀ SCALA TIPOGRAFICA Utilizzare la scala tipografi ca per scegliere le dimensioni dei font.

23 COMBINARE I FONTS 1) Combinare SERIF e SANS-SERIF

24 COMBINARE I FONTS 2) evitare le differenze sottili scegliendo famiglie simili

25 COMBINARE I FONTS 3) assegnare a ciascun font ruoli diversi

26 COMBINARE I FONTS 4) Variare il peso dei fonts per enfatizzare le differenze

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

28 COMBINARE I FONTS 5) Alternare font con forte personalità ad altri neutrali.

29 COMBINARE I FONTS 7) Evitare un contrasto eccessivo

30 COMBINARE I FONTS 8) Utilizzare dai 2 ai 3 font per progetto

31 COMBINARE I FONTS 9) Diversifi care i font lavorando sulle dimensioni

32 EFFETTI GRAFICI FANCY FONTS Inserire qualche elemento tipografi co ad alto contenuto grafi co

33 EFFETTI GRAFICI LETTERPRESS Dare un'effetto tridimensionale al testo come se fosse impresso o a rilievo.

34 EFFETTI GRAFICI TEXTURE E PATTERN Lavorare sullo sfondo (colori e texture) per dar risalto al testo.

35 EFFETTI GRAFICI LINK STYLE Elaborare l'elemento link inserendo immagini o elementi grafi ci