Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 1
CSS / TIPOGRAFIA WEB
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 2
I CSS hanno dato un notevole impulso alla tipografia web visto che permettono di definire
ogni dettaglio della composizione tipografica (tipo di carattere tipografico, peso,
stile, interlinea, spaziatura tra le lettere ecc.).
GESTIRE I CARATTERI CON I CSS
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 3
» font-family - specifica la famiglia del font » font-size - specifica l’altezza dei caratteri » font-weight - specifica il peso dei caratteri (grassetto) » font-variant - specifica alcune variazioni (come maiuscoletto) » font-style - corsivo » line-hight - altezza della riga di testo » text-align - allineamento del testo » text-indent - indentanzione di caporiga » text-transform - trasforma in testo tutto in maiuscolo o tutto minuscolo » text-decoration - decorazioni come upperline, underline etc.. » letter-spacing - spazio fra i singoli caratteri » word-spacing - spazio fra le singole parole
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 4
La proprietà font-family specifica il tipo di carattere. Si applica a tutti gli elementi ed è ereditata.A ciascun selettore è possibile associare uno o più caratteri da utilizzare. Per specificare un carattere principale per il sito lo si può impostare al body.body { font-family: Verdana, Arial, sans-serif; }Il carattere usato sarà il primo, fra quelli specificati, che risulta essere disponibile nel computer dell’utente. È bene concludere l’elenco con una famiglia generica da usare nel caso in cui gli altri tipi di carattere non siano disponibili. Le famiglie generiche sono:
» serif (ad esempio il Times e il Georgia) » sans-serif (ad esempio il Verdana e l’Helvetica) » monospace (ad esempio il Courier) » cursive (ad esempio Comic Sans o Apple Chancery); » fantasy (ad esempio );
PROPRIETÀ: FONT-FAMILY
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 5
PROPRIETÀ: FONT-FAMILY
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 6
La proprietà font-size specifica la dimensione del carattere. Si applica a tutti gli elementi ed è ereditata.
I valori delle dimensioni del testo possono essere espressi in vari modi.
body { font-size: 16px; }p { font-size: 12px; }h1 { font-size: 2em; }html { font-size: 62.5%; } p { font-size: small; }
I diversi sistemi si possono distinguere a seconda che definiscano le dimensioni in senso assoluto o relativo (viene calcolata in base alla dimensione del testo dell’elemento progenitore).
PROPRIETÀ: FONT-SIZE
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 7
Sono valori assoluti: » le parole chiave xx-small, x-small, small, medium, large, x-large, xx-large; » quelli espressi con unità di misura come pixel (px) o punti (pt). Si consiglia di usare la seconda solo per CSS destinati alla stampa.
Sono valori relativi: » le parole chiave smaller e larger; » quelli espressi in em; » quelli espressi in percentuale.
PROPRIETÀ: FONT-SIZE
PER COMODITA NOI UTILIZZEREMO PRINCIPALMENTE LA DIMENSIONE ESPRESSA IN PX
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 8
La proprietà font-style specifica il corsivo. Può assumere i valori: normal / italic / oblique p.corsivo { font-style: italic; } La proprietà font-weight specifica il peso del carattare (grassetto, ma anche altri pesi disponibili nella famiglia). Può assumere i valori:
» normal / bold / bolder / lighter » 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900 400 = normal, 700 = bold
p.grassetto { font-weight: bold; } La proprietà font-variant specifica il maiuscoletto. Può assumere i valori: normal / small-caps p.maiuscoletto { font-variant: small-caps; }
PROPRIETÀ: FONT-STYLE / FONT-WEIGHT / FONT-VARIANT
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 9
La proprietà line-height serve a specificare l’interlinea tra una riga di testo e la riga successiva. La proprietà si applica a tutti gli elementi ed è ereditata.
p {line-height: 1.5;} body {line-height: 15px;}
I valori che è possibile utilizzare sono:
» normal: il browser separerà le righe con uno spazio ritenuto “ragionevole”; dovrebbe corrispondere a un valore numerico compreso tra 1 e 1.2;
» un valore numerico: tipo 1.2, 1.3, 1.5 l’altezza della riga sarà uguale alla dimensione del font moltiplicata per questo valore;
» un valore numerico con unità di misura: l’altezza della riga sarà uguale alla dimensione specificata;
» percentuale: l’altezza della riga viene calcolata come una percentuale della dimensione del font.
PROPRIETÀ: LINE-HEIGHT
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 10
L’allineamento orizzontale del testo può essere stabilito tramite la proprietà text-align
Valori ammessi: left | right | center | justify
p { text-align: left; }
L’indentazione è stabilita tramite text-indent
Sono ammesse unità di lunghezza o unità percentuali
p { text-indent: 20px; }
PROPRIETÀ: TEXT-ALIGN / TEXT-INDENT
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 11
Tramite la proprietà text-transform è possibile gestire i caratteri maiuscoli e minuscoli indipendentemente da quanto specificato nel codice. Sono ammessi i seguenti valori:
» capitalize: la prima lettera di ogni parola è rappresentata in maiuscolo » uppercase: tutte le lettere di ogni parola sono rappresentate in maiuscolo » lowercase: tutte le lettere di ogni parola sono rappresentate in minuscolo » none: nessuna variazione
h1 { text-transform: uppercase } h2 { text-transform: capitalize }
Eventuali sottolineature o barrature vanno specificate tramite la proprietà text-decoration: le sottolineature sono da usarsi essenzialmente con i link, sopralineature (da evitare), testo barrato (essenzialmente per il tag <del>)
I valori ammessi sono: none | underline | overline | line-through
PROPRIETÀ: TEXT-TRANSFORM / TEXT-DECORATION
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 12
Lo spazio predefinito fra lettere e parole può essere modificato tramite le proprietà letter-spacing e word-spacing
» Sono ammesse tutte le diverse unità di lunghezza, tuttavia sono particolarmente indicate le unità em o px
» Il valore specificato può essere positivo o negativo » Il valore specificato non indica la distanza fra le varie lettere o parole ma va a sommarsi alla distanza predefinita
h1{ letter-spacing: 0.2em; word-spacing:0.5em }
PROPRIETÀ: LETTER-SPACING / WORD-SPACING
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 13
Inizialmente la tipografia sul web era piuttosto limitata, visto che la scelta delle font dipendeva da font installate sul computer dell’utente e per ovviare i problemi di compatibilità tra le diverse piattaforme la scelta doveva ricadere sulle font web-safe abbinate a delle fallback font (Arial, Courier New, Georgia, Helvetica, Times New Roman, Verdana, Trebuchet MS, Lucida Sans).
Quindi per definire la famiglia di caratteri da usare veniva definito un carattere principale e poi una serie di caratteri sostitutivi (fallback). L’utilizzo di caratteri non web-safe era limitato su alcuni titoli e menù che non venivano trattati come testi ma come immagini.
Per esempio:
h1 { font-family: Georgia, Times, serif; }
p { font-family: Verdana, Arial, Helvetica, sans-serif; }
LA TIPOGRAFIA SUL WEB
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 14
Oggi invece la tipografia web ha ricevuto invece un notevole impulso sia grazie ai css che defiscono ogni dettaglio della composizione tipografica (peso, stile, interlinea, spaziatura tra le lettere ecc.) sia grazie alla possibilità di includere i caratteri all’interno del codice.
Con la proprietà @font-face è possibile, infatti, caricare all’interno delle pagine web font non standard salvate all’interno della directory del sito web o di una libreria online; consentendo la visualizzazione del sito in modo corretto su tutti i dispositivi e su tutti i browser, indipendentemente dal fatto che il carattere sia installato sul computer dell’utente.
Una delle librerie online gratuite più diffusa è Google Web Font.
LA TIPOGRAFIA SUL WEB OGGI
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 15
La proprietà @font-face deve essere richiamata all’interno di un foglio css indicando il nome del carattere e l’indirizzo della sorgente del file del carattere tipografico scelto. È importante che siano formati compatibili per il web ed è possibile richiamare diversi formati di font per una maggiore compatibilità cross-browser. Per esempio:
@font-face { font-family: ‘font_name’; src: url(‘font/font_name.ttf’) format(‘truetype’); }
@font-face { font-family: ‘MyWebFont’; src: url(‘font/myfont.woff2’) format(‘woff2’), url(‘font/myfont.woff’) format(‘woff’), url(‘font/myfont.ttf’) format(‘truetype’);}
@FONT-FACE
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 16
@FONT-FACE....TENDENZIALMENTE NON USATELA!La proprietà @font-face ha permesso di dotare siti web di un’ampia varietà di font, tuttavia viene da sè che se sul device utente il font specifico scelto non è presente, il browser, oltre alle pagine html e css, deve scaricare i file necessari per visualizzare i font, comportando un notevole sovraccarico in termini di peso.
Per questo motivo è meglio demandare a librerie esterne il caricamento dei font necessari.
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 17
Per utilizzare le font di Google Fonts sul proprio sito basta andare sul sito fonts.google.com
GOOGLE FONTS
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 18
Sfogliare la libreria e eventualmente modificare le caratteristiche e il peso della font nella visualizzazione.
Individuare il carattere (nel riquadro Roboto) e il peso desiderato (Light 300, Regular 400, Regular 400 italic ecc.)
Cliccare sul pulsante
GOOGLE FONTS
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 19
In basso a destra comparirà la scheda della famiglia di caratteri selezionata con il codice da inserire nel sito per utilizzarla.
Eventualmente è possibile selezionare la scheda CUSTOMIZE per personalizzare ulteriormente la scelta effettuata.
GOOGLE FONTS
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 20
È possibile infatti aggiungere altri pesi della font desiderata per una sua visualizzazione corretta sui vari dispositivi. Si consiglia di selezionare i pesi effettivamente utilizzati per non appesantire troppo il loading del sito.
GOOGLE FONTS
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 21
DEFINIZIONI CSS EREDITATE DA GOOGLE FONTS CSS
DEFINIZIONI CSS SPECIFICHE PER IL NOSTRO SITO
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 22
Una volta selezionati tutti i pesi basterà utilizzare uno dei due metodi suggeriti da google.
A) Richiamare il carattere nell’header del sito
<link href=”https://fonts.googleapis.com/css?family=Roboto:300,300i,700” rel=”stylesheet”>
B) Importare il file come una regola css nell’header del sito
<style> @import url(‘https://fonts.googleapis.com/css?family=Roboto:300,300i,700’); </style>
Per utilizzarlo bisognerà assegnarlo normalmente a una regola css
p { font-family: ‘Roboto’, sans-serif; font-weight: 300; font-style: italic; }
GOOGLE FONTS
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 23
DOMANDE?