CSS / TIPOGRAFIA WEB€¦ · alla tipografia web visto che permettono di definire ogni dettaglio...

LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 1

CSS / TIPOGRAFIA WEB


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


» 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


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


PROPRIETÀ: FONT-FAMILY


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


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


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


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


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


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


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


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


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


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


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


Per utilizzare le font di Google Fonts sul proprio sito basta andare sul sito fonts.google.com

GOOGLE FONTS


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


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


È 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


DEFINIZIONI CSS EREDITATE DA GOOGLE FONTS CSS

DEFINIZIONI CSS SPECIFICHE PER IL NOSTRO SITO


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


DOMANDE?

CSS / TIPOGRAFIA WEB€¦ · alla tipografia web visto che permettono di definire ogni dettaglio...

Documents

Transcript of CSS / TIPOGRAFIA WEB€¦ · alla tipografia web visto che permettono di definire ogni dettaglio...