Progettazione di siti web
a.a. 2021/22

Fogli di stile: tipografia web

Maria Simi
Marzo, 2022

[Manuale di riferimento del W3C
Niederst, Cap. 12 e Cap. 13]

CSS per la tipografia web

• Specificare l'aspetto del carattere (font)
  
  • font, famiglie di font, famiglie generiche, font alternative
  • dimensioni, stile e varianti
• Gli altri stili per il testo: spaziature, allineamenti ...
• Colori e sfondi
• Lo stile dei link
• Pseudo-classi, pseudo-elementi, contenuti generati
• Usabilità e buone regole tipografiche

Tipografia web

• La tipografia si occupa di come dare stile e forma al testo
• L'obiettivo principale: leggibilità
  
  • l'attenzione al dettaglio comunica professionalità e empatia
• Le migliori pratiche per la tipografia web sono diverse da quelle per la carta stampata
  
  • Tempi di attenzione più brevi
  • Possibilità di "dare una scorsa" (skimmability)
  • accessibilità ai diversi dispositivi e utenti
  • dispositivi con schermi di diverse dimensioni

Tipi (font)

• I caratteri possono essere visualizzati in stili tipografici diversi, o tipi, associando ad essi delle immagini (glifi o gliph)
  Kinesis (tipo) + 109 (codice carattere) =
• Un tipo (font) è un insieme coordinato di glifi. Anche detto font-face.
• Una famiglia di font (font-family) è un insieme coordinato di font. Anche detto typeface.
• Una famiglia generica è una categoria di font-family con caratteristiche simili

Famiglie generiche di font

• Con grazie e senza grazie

  con grazie	serif
  senza grazie	sans-serif

• Proporzionali o a spaziatura fissa

  proporzionali	variable-width
  a spaziatura fissa	monospace

• fantasiose	fantasy
  manoscritte	cursive

Gli attributi di font

• Esistono attributi per aspetti specifici del carattere:
  

  font-family, font-size, font-style, font-weight, font-variant, ...

• font-family per specificare il tipo del carattere (typespace)
  
  • È consigliabile specificare una sequenza di famiglie di font (font stack): rappresentano alternative, a partire dalla preferita.
  • L'ultimo elemento della sequenza è una famiglia generica
  • Il nome ha l'iniziale maiuscola. Se composto da diverse parole, racchiuderlo tra doppio apice

p.aggraziato { 
   font-family: Georgia, Palatino, "Times New Roman", Times, serif; }

p.sgraziato {
   font-family: "Lucida grande", Lucida, Arial, sans-serif; }

Perché le alternative?

• Un tipo può essere o non essere disponibile sulla macchina locale
  
  • Se il glifo non è disponibile, i caratteri non possono essere visualizzati
  • È buona norma dare delle alternative e specificare una alternativa generica come "rete di salvataggio" (fallback)
  • Nessun problema con font “comuni” sul web (web safe fonts)
• Core Web Fonts di Microsoft:
  Georgia, Times New Roman, Arial, Trebuchet MS, Verdana, Courier New, Andale Mono, Comic Sans MS, …
• Combinazioni di font comuni su W3schools
• Da poco è possibile utilizzare font particolari ...

Font particolari: strategie

1. Servizi online:
   
   • Scegli la font e aggiungila alla tua collezione
   • Genera il codice per il link da includere nella head della pagina HTML
   • Nota: la font viene "servita" da Google e quindi non è disponibile in locale, senza rete
2. Font embedding e hosting
   
   • scarica una font in locale e richiama il file di font nel foglio di stile

     @font-face {                             /* dichiarazione */
        font-family: DeliciousRoman;
        src: url(Delicious-Roman.otf) }
     

   • nella specifica del font-family usa il nome definito

     h1 {font-family: DeliciousRoman}        /* uso della font */
     

Font particolari: avvertenze

1. Formati non standard
   
   • Diversi formati: OTF (OpenType), TTF (TrueType), EOT (EmbeddedOpenType), proprietario Microsoft
   • WebOpenFontFormat (WOFF) si candida come formato standard e dovrebbe essere adottato anche da MS Explorer
   • nel transitorio dobbiamo fornire diversi formati
   • Formati di font su W3Schools
2. Diritti d'uso
   
   • le font hanno un valore per le aziende che le producono e hanno licenze d'uso restrittive
   • le font devono avere una "web license"
   • ci sono servizi che offrono font liberamente usabili
     ad esempio fontsquirell.com

L'attributo font-size

• Grandezze qualitative
  • xx-small x-small medium large large x-large xx-large
  • larger smaller
• Grandezze in unità di misura:
  • 1em è pari all'altezza della font corrente (font 16px, 1em = 16px);
    in tipografia 1em è la larghezza della M, da cui il nome
  • 1ex è pari all’altezza della lettera x minuscola
  • 1px (pixel) è l'unità di visualizzazione a schermo
  • 1pt è pari a 1/72 di pollice (in)
  • 1vw/1vh è pari a 1% dell'ampiezza/altezza dello schermo (viewport)
• Grandezze in percentuale
  
  • 80%, 50% … rispetto alla dimensione del font nel contesto attuale

Misure assolute o relative

• Misure assolute
  
  • punti, pixel, cm, mm ...
  • xxsmall, x-small, small, medium, large, x-large, xx-large
  • Nota: non significa che si vedono nelle stesse dimensioni su tutti gli schermi; la grandezza dei pixel varia con la risoluzione dello schermo
• Misure relative (alla grandezza "attuale")
  
  • valore %, larger, smaller ...
  • specificare 0.8em significa un carattere che è l’80% di quello utilizzato in quel contesto

Pixel, punti, em?

• I punti (pt) e le altre misure di lunghezza (pc, mm, cm, in …) sono per la stampa
• I pixel (px) per lo schermo, con rese diverse a seconda della risoluzione/definizione
• Le misure relative sono migliori per i testi perché scalabili.

  Ricetta di Briggs:

  body {font-size: 76%}  /* 12px se il normale e' 16px */
  p {font-size: 1em}     /* testo normale 12px */
  h1 {font-size: 1.5em}
  

• Le misure in pixel sono più affidabili per menu

font style, weight, variant

• font-style (inclinazione)
  normal italic oblique
• font-weight (spessore)
  bold bolder lighter
  100 ... 400 500 ... 900
• font-variant (maiuscoletto)
  normal Small-Caps

Esempi

Proviamo

Font: forme contratte

• L’attributo font (da solo) consente di specificare una sequenza di proprietà, in quest’ordine:
  
  • font-size (ci deve essere)
  • font-family (ci deve essere, in fondo; può essere uno stack)
  • Zero o più valori davanti per: font-style, font-variant, font-weight
• Esempi:

  h1 { font: 1.75em sans-serif }
  h1 { font: bold 1.75em sans-serif }
  h1 { font: oblique bold 1.75em sans-serif }
  h1 { font: oblique small-caps bold 1.75em sans-serif }
  

Spaziature orizzontali nel testo

• letter-spacing, lo spazio tra le lettere:

  blockquote{letter-spacing: 0.1em} 
        

  Nota: 0.1em si aggiunge allo spazio normale, -0.1em si sottrae

• word-spacing, lo spazio tra le parole:

  h1 {word-spacing: 1em} 
        

• Kerning è la spaziatura tra due lettere specifiche per migliorare la leggibilità
• Tracking è la spaziatura tra le lettere di una frase

kerning

tracking

Spaziature verticali nel testo

• line-height, l'interlinea:
  
  • valori: %, em, px, …
  • Es. se la font è 12px, 150% o 1.5em è equivalente a 18px
• Leading è la spaziatura tra due righe di testo

Controllare gli spazi

• white-space
  
  • normal (le sequenze di spazi e gli “a capo” sono ignorati)
  • pre (le sequenze di spazi e gli “a capo” sono rispettati)
  • nowrap (la linea non viene spezzata anche se troppo lunga)

Allineamento del testo

• text-indent: il rientro della prima riga di un paragrafo
  
  • valori assoluti in px, cm ...
  • valori relativi in %, em
• text-align: per allineare testo orizzontalmente
  
  • valori: center,right, left, justify
• vertical-align: per allineare testo verticalmente
  
  • valori: baseline, sub, super, text-top, text-bottom, top, middle, bottom …

W3schools

Effetti sul testo

• text-transform

  none, capitalize, lowercase, uppercase, inherit
  

  indipendentemente da come lo abbiamo scritto, il testo viene trasformato in maiuscolo (solo la prima lettera), tutto minuscolo, tutto maiuscolo …
• text-decoration

  underline, overline, line-through, blink :-Q, none
  

• text-shadow

  h1 {text-shadow: 0.2em 0.2em} 
  

Generatore di ombre

Codifiche del colore

1. Con il loro nome loro nome in inglese:
   
   • blue, green, orange, yellow, red, magenta …
2. Codifica RGB (Red-Green-Blue) con 6 cifre esadecimali
   
   • #ffff00 corrisponde al giallo
   • #ff0000 corrisponde al rosso
3. Codifica RGB[A] con 3[4] numeri decimali da 0 a 255
   
   • rgb(0, 255, 0)
   • rgb(0, 0, 0)
   • rgba(30, 30, 30, 50)
   • anche misure in percentuale

Tabella dei colori da W3Schools (provate i MIXER)

Colore del testo (di primo piano)

• Due stili che vanno specificati insieme:
  
  • color: il colore del testo
  • background-color: il colore dello sfondo
• Il colore del testo

  {color: #0000FF} 
  {color: #00F} 
  {color: rgb(0, 0, 255)} 
  {color: rgb(0%, 0%, 100%)}
  

  Sempre lo stesso colore ...
• color è una proprietà che viene ereditata, basta specificarla per body

Sfondi

• background-color: un colore o ‘transparent’

  body {background-color: #FFEFDB}
  

• background-image: un’immagine specificata da un URL

  body {background-image: url('image/logo.gif')}
  

• Gli sfondi non si ereditano ma sono normalmente trasparenti
• Ripetizione delle immagini sullo sfondo (tiling)
  
  • Proprietà: background-repeat
  • Valori: repeat, repeat-x, repeat-y, no-repeat

SFONDI

Tiling

Sfondi: posizionamento

• Modalità di posizionamento immagini sullo sfondo
  
  • Proprietà: background-attachment
  • Valori: scroll, fixed
• Posizionamento:
  
  • Proprietà: background-position
  • Valori: left top right bottom center usati in coppie, es. "left top"
  • Valori in % e pixel: distanza da sinistra e dall'alto

  #header {
  	background-image: url('logo.gif');	
  	background-position: 20px 10px;
  }
  

W3schools

Sfondi: dimensioni

• Dimensioni delle immagini sullo sfondo
  
  • Proprietà: background-size
  • Valori: dimensioni in px, % ...
• background-size: cover
  l'immagine viene ingrandita a coprire tutto lo sfondo eventualmente tagliando l'immagine in una delle due dimensioni
• background-size: contain
  l'immagine viene ingrandita il più possibile ma non tagliata

W3schools

Stile dei link

• Come cambiare stile a un link
  

  a:link {color: red}
  a:visited {color: blue}
  a:hover {color: fuchsia; text-decoration: none}
  a:active {color: maroon}
  

• Ordine LVHA (LoVe, HA)
  

  :link		link non ancora visitato
  :visited        link visitato
  :hover		quando si va sopra con il mouse
  :active 	quando si tiene premuto il bottone del mouse
  

• Questi selettori sono specializzazioni di a
  
  • non sono proprio classi come le altre ...
  • sono piuttosto delle pseudo-classi

Selettori mediante pseudo-classi

• Selettori che si applicano ad elementi in un particolare stato; sono classi “fantasma” che non sono indicate nel file HTML ma sono riconosciute dal browser
• CSS2.1 e poi CSS3 introducono altre pseudo-classi

Pseudo-elementi

• Vengono selezionate parti di testo che non sono nemmeno annotati come elementi nell’HTML
  
  • ::first-line
    seleziona la prima riga di un elemento
    Es. p::first-line {letter-spacing: 6px}
    aggiunge degli spazi tra le lettere della prima riga di un paragrafo.
    
  • ::first-letter
    seleziona la prima lettera di un elemento
    Es. p::first-letter {font-size: 300%}
    ingrandisce le prime lettere dei paragrafi
    
  • Sono ammessi solo stili appropriati per i testi

Contenuti generati

• Per inserire contenuto “con stile” prima e dopo un elemento (senza inserirlo nel file HTML)
  • ::before inserisce contenuto prima di un elemento

    Es. blockquote::before {content: "\'" ; font-size: 24px}
    

  • ::after inserisce contenuto alla fine di un elemento

    Es. blockquote::after {content: "\'" ; font-size: 24px}
    

• I caratteri speciali si inseriscono attraverso il loro codice esadecimale Unicode:

  blockquote:before {content: "\201C" ; font-size: 24px}
  blockquote:after {content: "\201D" ; font-size: 24px}
  

• È corretto perché questi contenuti fanno in qualche modo parte dello stile, non sono contenuti veri

Usabilità e regole tipografiche

• Aspetti di usabilità
  
  • No a righe di testo troppo lunghe (45-75 caratteri)
    
  • Contrasto adeguato tra testo e sfondo
  • Caratteri non troppo piccoli
• Regole di buona tipografia
  
  • Evitare troppi font diversi
  • Letter-spacing nelle sigle
  • Il testo "a bandiera" (allineato solo a sinistra) è preferibile al testo giustificato; la distribuzione degli spazi e la divisione in sillabe non sono ottimali.
  • Per saperne di più: Web typography, Richard Rutter (rivisitazione per il web del classico The elements of typographic style di R. Bringhurst)

Conclusioni

• Con quanto abbiamo visto possiamo cimentarci nel fare pagine di testo con un bell’aspetto dal punto di vista tipografico.
• Uno dei prossimi esercizi sarà su questo
• Nella lezione successiva ci occuperemo di come creare layout di pagina.