[Italiano] - Intervento al CSSday del 16/03/2018
ABSTRACT:
I web font sono utilizzati ormai sulla quasi totalità dei nuovi siti web e non solo. Indubbiamente rappresentano una ghiotta opportunità per la comunicazione. Non sempre però gli utilizzatori sono consapevoli di tutte le conseguenze che ciò comporta: nel bene e nel male. Ragionamenti tecnici e strategici su come sceglierli, come usarli (buone pratiche di typesetting) e come implementarli con attenzione ai nuovi formati (woff2, variable font), alla performance e al progressive enhancement.
La tipografia e i web font nei siti web [#wcvrn18]Giulia Laco
Intervento al WordCamp Verona 2018
ABSTRACT: più del 70 % dei siti web utilizza oggi i web font. Ma non tutti li usano ed implementano al meglio. Viaggio attraverso le meravigliose opportunità e le potenziali insidie legate alla scelta e all’implementazione dei web font.
-Breve storia della tipografia web: dal tag font html ai variable fonts.
-Come scegliere i web font: quanti sceglierne, tipologie di servizi offerte dai fornitori di font, lingue e subsetting, licenze e device.
-Come implementare i web font: dove farli risiedere, quali formati utilizzare, come caricarli (buone pratiche di progressive enhancement).
-Come usare i web font: responsive web typography, equilibrio nel typesetting, le caratteristiche dell’open type.
FONT LOAD: strategie per ottimizzare il caricamento dei font sul proprio sitoMirko Ciesco
In queste slide presentate al Meetup "Turin Web Performance Group" verranno affrontate le principali problematiche riscontrate con l’utilizzo di font esterni (come ad esempio Google Fonts) e verranno esposte le possibili soluzioni per migliorare le prestazioni di caricamento.
Per maggiori info: www.mirkociesco.it
[IT] CMS Proprietari creati da teaminterni: le best practices da seguire!Federico Sasso
"Non reinventare la ruota", ti dicono. Eppure a volte con i CMS è proprio quello che capita.
Guida alla sopravvivenza per il professionista SEO.
Web Marketing Festival 2015, Rimini 19-20 Giugno 2015
Guide per WordPress: come scrivere, editare e pubblicare articoliSalvatore Capolupo
Alcune indicazioni basilari per usare WordPress senza impazzire: niente fronzoli tecnici, solo sana pratica per capire come pubblicare i tuoi articoli in pochi passi. Valido per qualsiasi sito in WP! Approfondisci questo tema ---> https://trovalost.it/sezioni/tutorial-wordpress
La tipografia e i web font nei siti web [#wcvrn18]Giulia Laco
Intervento al WordCamp Verona 2018
ABSTRACT: più del 70 % dei siti web utilizza oggi i web font. Ma non tutti li usano ed implementano al meglio. Viaggio attraverso le meravigliose opportunità e le potenziali insidie legate alla scelta e all’implementazione dei web font.
-Breve storia della tipografia web: dal tag font html ai variable fonts.
-Come scegliere i web font: quanti sceglierne, tipologie di servizi offerte dai fornitori di font, lingue e subsetting, licenze e device.
-Come implementare i web font: dove farli risiedere, quali formati utilizzare, come caricarli (buone pratiche di progressive enhancement).
-Come usare i web font: responsive web typography, equilibrio nel typesetting, le caratteristiche dell’open type.
FONT LOAD: strategie per ottimizzare il caricamento dei font sul proprio sitoMirko Ciesco
In queste slide presentate al Meetup "Turin Web Performance Group" verranno affrontate le principali problematiche riscontrate con l’utilizzo di font esterni (come ad esempio Google Fonts) e verranno esposte le possibili soluzioni per migliorare le prestazioni di caricamento.
Per maggiori info: www.mirkociesco.it
[IT] CMS Proprietari creati da teaminterni: le best practices da seguire!Federico Sasso
"Non reinventare la ruota", ti dicono. Eppure a volte con i CMS è proprio quello che capita.
Guida alla sopravvivenza per il professionista SEO.
Web Marketing Festival 2015, Rimini 19-20 Giugno 2015
Guide per WordPress: come scrivere, editare e pubblicare articoliSalvatore Capolupo
Alcune indicazioni basilari per usare WordPress senza impazzire: niente fronzoli tecnici, solo sana pratica per capire come pubblicare i tuoi articoli in pochi passi. Valido per qualsiasi sito in WP! Approfondisci questo tema ---> https://trovalost.it/sezioni/tutorial-wordpress
Dicono che il web design sia al 95% tipografia, e questo è senz’altro ancor più vero oggi rispetto a quanto non fosse dieci anni fa. In questo talk vorrei fare un po’ di luce sull’argomento, illustrando le regole base per una tipografia efficace, e quali sono gli strumenti per poterle mettere in pratica al meglio sviluppando un tema WordPress.
"Alla ricerca della formula magica". Presentazione usata per il ciclo di webinar su traduzione e adattamento di siti web per AITI Emilia Romagna, novembre-dicembre 2016.
Lezione WordPress Università degli Studi di Milano: Installazione e Gestionealessandro gasparotto
Slide della lezione di WordPress fatta presso l'Università degli Studi di Milano. Nelle slide viene presentato WordPress, le potenzialità, l'installazione in locale e remoto e l'intera gestione del sistema. La guida è stata sviluppata e destinata ad utenti alla prime armi con questo potente strumento.
Come realizzare siti mobile - Buginar 29 Maggio 2011Rocco Passaro
Venerdì 29 Maggio 2011 , si è svolto il buginar online, dove abbiamo parlato su come realizzare un sito internet che si visualizza in maniera corretta su dispositivi Mobile.
Per maggiori info vai su www.ebug.it
Soluzioni Open Source per lo sviluppo di ogni tipologia di sito web. Il ca…bsdlover
Talk di Paolo Gatti al Linux Day 2012 dal titolo "Soluzione Open Source per lo sviluppo di ogni tipologia di sito web. Il caso pratico di Web&Dintorni"
Come strutturare un design semplice ed efficace per WordPressSiteGround.com
Guarda il webinar qui: https://youtu.be/WpxuDepDDbg
Come si può fare a dare un aspetto chiaro e professionale al proprio sito WordPress senza avere competenze specifiche di design?
WordPress è ormai il CMS più utilizzato al mondo per la realizzazione e gestione di blog, siti web ed eCommerce: è quindi importante conoscerlo e rimanere aggiornati su tutte le novità che offre.
Con Laura Lonighi, web designer e brand stylist freelance, vediamo:
- L’importanza di una buona Visual Identity per il proprio progetto web
- I 3 livelli di design attraverso i quali realizzare un’interfaccia web
- Come può venirci in aiuto WordPress per realizzare in maniera più semplice il design del nostro sito
- Alcuni strumenti utili per lavorare meglio
Ormai tutti i browser mettono a disposizione strumenti per l'interfacciamento tramite plugin scritti sempre più spesso usando le classiche tecnologie web, quali Javascript e HTML.
In questa sessione verrà effettuata una prima presentazione della struttura di un plugin per Google Chrome e le funzionalità a cui è possibile accedere attraverso questo; verranno poi analizzate alcune funzioni specifiche fornite dalle API, infine vedremo la procedura di pubblicazione dell'applicazione
Perché è ancora importante parlaredi tipografia e caratteri?
La tipografia, ieri. Dal movable typesetting al digital typesetting.
La tipografia, domani Open Type 1.8 e le Font Variations.
Seminario di ACSG tenuto da Stefano Torregrossa
MAR 13 MARZO 2018, 19:00 – 20:30 CET
Presso: Auditorium Pavoni presso Istituto Pavoniano Artigianelli
L'importanza dei Core Web Vitals per l'ecommerce - Ivano Di Biasi.pptxEcommerce HUB
Un aspetto che per l’e-commerce vale più di qualsiasi strategia dei prezzi, UX o processo di acquisto.
Come risolvere i problemi con i Core Web Vitals ed un caso studio che mostra come Google escluda quasi totalmente dalle ricerche importanti i siti web non ottimizzati.
3° appuntamento col Corso di Wordpress: temi & plugin. Ecco i 20.000 plugin sotto WP. Ad ogni esigenza si può associare un po’ di plugin. Ecco come sceglierli.
- cosa si può ottenere cambiando tema
- cosa si può ottenre installando un plugin
- categorie di temi: numero colonne e specifici
- installare un tema (o più temi): le demo non sono mai demo
- bootstrap
- elenco plug-in consigliati
- … plugin per usi specifici
ABSTRACT - A tre anni e mezzo dalla loro concezione, i font variabili sembrano essere un formato utilizzabile e proficuo per il web design. Excursus su quello che un font variabile può fare per la tipografia del tuo sito web, per una ulteriore progettazione responsive, per la velocità di caricamento, per le animazioni. E uno sguardo su come sta evolvendo il mercato.
YouTube: https://www.youtube.com/watch?v=EzYfJ-w-4TY
Dicono che il web design sia al 95% tipografia, e questo è senz’altro ancor più vero oggi rispetto a quanto non fosse dieci anni fa. In questo talk vorrei fare un po’ di luce sull’argomento, illustrando le regole base per una tipografia efficace, e quali sono gli strumenti per poterle mettere in pratica al meglio sviluppando un tema WordPress.
"Alla ricerca della formula magica". Presentazione usata per il ciclo di webinar su traduzione e adattamento di siti web per AITI Emilia Romagna, novembre-dicembre 2016.
Lezione WordPress Università degli Studi di Milano: Installazione e Gestionealessandro gasparotto
Slide della lezione di WordPress fatta presso l'Università degli Studi di Milano. Nelle slide viene presentato WordPress, le potenzialità, l'installazione in locale e remoto e l'intera gestione del sistema. La guida è stata sviluppata e destinata ad utenti alla prime armi con questo potente strumento.
Come realizzare siti mobile - Buginar 29 Maggio 2011Rocco Passaro
Venerdì 29 Maggio 2011 , si è svolto il buginar online, dove abbiamo parlato su come realizzare un sito internet che si visualizza in maniera corretta su dispositivi Mobile.
Per maggiori info vai su www.ebug.it
Soluzioni Open Source per lo sviluppo di ogni tipologia di sito web. Il ca…bsdlover
Talk di Paolo Gatti al Linux Day 2012 dal titolo "Soluzione Open Source per lo sviluppo di ogni tipologia di sito web. Il caso pratico di Web&Dintorni"
Come strutturare un design semplice ed efficace per WordPressSiteGround.com
Guarda il webinar qui: https://youtu.be/WpxuDepDDbg
Come si può fare a dare un aspetto chiaro e professionale al proprio sito WordPress senza avere competenze specifiche di design?
WordPress è ormai il CMS più utilizzato al mondo per la realizzazione e gestione di blog, siti web ed eCommerce: è quindi importante conoscerlo e rimanere aggiornati su tutte le novità che offre.
Con Laura Lonighi, web designer e brand stylist freelance, vediamo:
- L’importanza di una buona Visual Identity per il proprio progetto web
- I 3 livelli di design attraverso i quali realizzare un’interfaccia web
- Come può venirci in aiuto WordPress per realizzare in maniera più semplice il design del nostro sito
- Alcuni strumenti utili per lavorare meglio
Ormai tutti i browser mettono a disposizione strumenti per l'interfacciamento tramite plugin scritti sempre più spesso usando le classiche tecnologie web, quali Javascript e HTML.
In questa sessione verrà effettuata una prima presentazione della struttura di un plugin per Google Chrome e le funzionalità a cui è possibile accedere attraverso questo; verranno poi analizzate alcune funzioni specifiche fornite dalle API, infine vedremo la procedura di pubblicazione dell'applicazione
Perché è ancora importante parlaredi tipografia e caratteri?
La tipografia, ieri. Dal movable typesetting al digital typesetting.
La tipografia, domani Open Type 1.8 e le Font Variations.
Seminario di ACSG tenuto da Stefano Torregrossa
MAR 13 MARZO 2018, 19:00 – 20:30 CET
Presso: Auditorium Pavoni presso Istituto Pavoniano Artigianelli
L'importanza dei Core Web Vitals per l'ecommerce - Ivano Di Biasi.pptxEcommerce HUB
Un aspetto che per l’e-commerce vale più di qualsiasi strategia dei prezzi, UX o processo di acquisto.
Come risolvere i problemi con i Core Web Vitals ed un caso studio che mostra come Google escluda quasi totalmente dalle ricerche importanti i siti web non ottimizzati.
3° appuntamento col Corso di Wordpress: temi & plugin. Ecco i 20.000 plugin sotto WP. Ad ogni esigenza si può associare un po’ di plugin. Ecco come sceglierli.
- cosa si può ottenere cambiando tema
- cosa si può ottenre installando un plugin
- categorie di temi: numero colonne e specifici
- installare un tema (o più temi): le demo non sono mai demo
- bootstrap
- elenco plug-in consigliati
- … plugin per usi specifici
ABSTRACT - A tre anni e mezzo dalla loro concezione, i font variabili sembrano essere un formato utilizzabile e proficuo per il web design. Excursus su quello che un font variabile può fare per la tipografia del tuo sito web, per una ulteriore progettazione responsive, per la velocità di caricamento, per le animazioni. E uno sguardo su come sta evolvendo il mercato.
YouTube: https://www.youtube.com/watch?v=EzYfJ-w-4TY
3. Mi presento
Sono una web designer/developer,
che ha iniziato con (…ehm)
l’HTML 2.0, quindi in epoca pre-CSS.
Da qualche anno mi occupo molto di:
Web Typography
Font optimisation
Typography strategy
@webmatter_it
Giulia Laco
4. I web font sono utilizzati ormai
sulla quasi totalità dei nuovi siti
web e non solo.
WEB FONT MANIA
SITI
WEB
Pagine
AMP
APP
Annunci in
HTML5
E-MAIL
in HTML
E-BOOK
6. Quanti siti li usano?
Fonte: http://httparchive.org/interesting.php?a=All&l=Feb%2015%202018#fonts 15 feb 2018
70% sì
30% no
7. Ma non è sempre stato così…
http://www.evolutionoftheweb.com/
C’è stata un’epoca in cui i web designer non
potevano sapere con che font gli utenti avrebbero
visualizzato il proprio sito.
FONT AGNOSTICISMO
8. Breve storia della tipografia web
Il web designer
è font agnostico
FONT SUL CLIENT
Si ha finalmente il
controllo sul font
(salvo problemi di caricamento)
FONT SUL SERVER
La resa dipende dal
sistema operativo
FONT SUL CLIENT
21. Text rendering engines
Direct Write Core Text
Microsoft Apple
Allinea i caratteri alla griglia,
col risultato che:
- i pesi regolari sembrano più sottili e
- i grassetti sembrano ancora più pesanti
Predilige la CHIAREZZA a
scapito dell’accuratezza di
riproduzione del font
Preserva maggiormente il
DISEGNO dei caratteri,
il risultato è più “sfocato”
WEB FONT: PREMESSA
GDI
Free Type
Linux Android Chrome OS
22. Text rendering engines
Desktop
SUBPIXEL
ANTIALIASING
macOS Linux Windows
iOS Android Windows mobile
* I dispositivi mobili non usano il subpixel anti-aliasing per via della rotazione degli schermi
SUBPIXEL
ANTIALIASING
SUBPIXEL
ANTIALIASING
+
HINTING
GREYSCALE
ANTIALIASING
GREYSCALE
ANTIALIASING
GREYSCALE
ANTIALIASING
+
HINTING
WEB FONT: PREMESSA
28. Font-smoothing
WEB FONT: COME IMPLEMENTARLI
Zach Leatherman https://www.zachleat.com/web/font-smooth/
Meglio lasciar fare ai browser
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
Se desidero un testo con carattere più sottile,
cercherò un font più sottile!
30. Quanti font per pagina?
Fonte: http://httparchive.org/interesting.php?a=All&l=Feb%2015%202018#reqFont15 feb 2018
WEB FONT: COME SCEGLIERLI
31. Quanti font per sito?
WEB FONT: QUANTI SCEGLIERNE
DISPLAYBODY TEXT
font pairing oppure stessa font-family
CITAZIONI/
TRAFILETTI/
RICHIAMI/
RIASSUNTI/
NAVIGAZIONE/
PULSANTI/
CALL TO
ACTION
META INFO
Bold + Bold Italic
oppure
Regular + Italic
Regular
Italic
Bold
Bold Italic
Da valutare
caso a caso
41. Modalità di vendita dei font
WEB FONT: COME SCEGLIERLI
Ha chiuso il 01/07/2015
Librerie in abbonamentoLibrerie gratuite Font in abbonamento Singoli font
Varie fonderie
(anche custom font)
Solo desktop
Dal 2015 desktop, dal 2018 web
(formula innovativa)
Ha chiuso il 31/12/2016
NEW
Dal 2016
Dal 2018
(nuova formula: font in
progress)
Sorta di leasing
44. HOSTING (CSS @font-face)
WEB FONT: COME IMPLEMENTARLI
SELF-HOSTED SERVICE-HOSTED
I web font risiedono
sul server del sito
I web font risiedono sul
server esterno del fornitore
47. Formati di font
TTFSVG OTF WOFF WOFF2
-30% WOFF
I più contemporanei
WEB FONT: COME IMPLEMENTARLI
EOT
48. Sintassi @font-face
WEB FONT: COME IMPLEMENTARLI
@font-face {
font-family: FontName;
src: url(fontname.eot?#iefix) format("embeddedopentype"),
url(fontname.woff2) format("woff2"),
url(fontname.woff) format("woff"),
url(fontname.otf) format("opentype"),
url(fontname.svg#fontname) format("svg");
}
La storica sintassi bulletproof di Fontspring
È datata e fa scaricare il formato EOT a IE9-11 anche se non necessario,
visto che supportano il più compresso WOFF
49. @font-face {
font-family: FontName;
src: url(fontname.woff2) format("woff2"),
url(fontname.woff) format("woff”),
url(fontname.otf) format("opentype");
}
Sintassi @font-face
WEB FONT: COME IMPLEMENTARLI
Nuova proposta (supporta Android 4.4 e precedenti)
O anche solo
@font-face {
font-family: FontName;
src: url(fontname.woff2) format("woff2"),
url(fontname.woff) format("woff”);
}
50. Sintassi @font-face
WEB FONT: COME IMPLEMENTARLI
Per dare precedenza ai font locali (ma non è una buona idea)
@font-face {
font-family: FontName;
src: local("FontName"),
url(fontname.woff2) format("woff2"),
url(fontname.woff) format("woff”);
}
51. Sintassi @font-face
WEB FONT: COME IMPLEMENTARLI
E cosa succede con i Variable Fonts?
@font-face {
font-family: ‘Amstervar’;
src: url(Amstervar_VF.woff2) format(‘woff-variations’);
src: url(Amstervar_REGULAR.woff2) format(‘woff2’);
font-weight: 400;
}
53. Variable Fonts
Si tratta di un formato di font
che consente ad un unico file
di interpretare più stili possibili.
OpenType Font Variations
Typeface VF
Typeface Roman
Typeface Bold
Typeface Italic
Typeface Bold Italic
…
(+ Typeface Italic VF)
54. Variable Fonts
Il disegnatore del font crea degli assi a cui applicare le variazioni.
L’utilizzatore del font può modulare a piacere i vari assi oppure
scegliere fra le istanze suggerite dal disegnatore.
Gli assi
https://www.axis-praxis.org/specimens/decovar
58. Font stack nel CSS
WEB FONT: COME IMPLEMENTARLI
Si vedono se
il primo font
non si carica
(o prima che si
carichi)
font-family: “Proxima Nova”, Arial, Helvetica, sans serif;
fallback font default system
font
custom font
61. Fattori che influiscono sulla velocità
WEB FONT: COME IMPLEMENTARLI
A B C
NUMERO
DI FONT
(famiglie e pesi)
NUMERO
DI GLIFI
(gamma Unicode)
Subsetting: lingue,
Open Type
WEB FONT
LOADING
caricamento
asincrono, preload,
…
62. Limitare il
numero di font
Limitare il numero di FAMIGLIE
Limitare il numero di PESI /STILI PER FAMIGLIA
(o usare un variable font)
A
68. Il testo di questa
pagina è reso con il…
Differenze
WEB FONT: COME IMPLEMENTARLI
Il testo di questa
pagina è reso con il…
Il testo di questa
pagina è reso con il…
Il testo di questa
pagina è reso con il…
richiesta al server web-font loading web-font loaded
FOUT
FOIT
69. La storia del FOUT e del FOIT
Zach Lethearman: https://www.zachleat.com/web/fout-foit-history/
73. FOUT crossbrowser
WEB FONT: COME IMPLEMENTARLI
Web Font Loader
Web Font Observer
https://github.com/typekit/webfontloader
https://github.com/bramstein/fontfaceobserver
Web Font API
@font-face {
font-family: Nome Font;
src: url(nomefont.woff);
…
font-display: auto | block | swap | fallback | optional;
}
Proprietà CSS font-display
74. Classe CSS
WEB FONT: COME IMPLEMENTARLI
@font-face {
font-family: My Family;
font-weight: 400;
src: url(myfamily.woff2) format(“woff2”),
url(myfamily.woff) format(“woff”);
}
body {
font-family: sans-serif;
}
.fonts-loaded body {
font-family: My Family, sans-serif;
}
La classe viene assegnata solo dopo l’avvenuto caricamento del font
75. Preload
WEB FONT: COME IMPLEMENTARLI
<head>
<link rel=“preload” href=“font.woff” as=“font”>
</head>
Combatte il lazy loading, lo sviluppatore, sapendo quali font
servono, può indicarlo al browser
77. Faux bold – Faux italic
WEB FONT: COME IMPLEMENTARLI
Dipende da come scrivo il CSS
o da come lo scrivono i sistemi di terze parti
http://www.fonts.com/support/faq/family-
grouping
@font-face {
font-family: Nomefont, serif;
src: url(nomefont-regular.woff) format("woff");
font-weight: normal;
}
h1 {
font-family: Nomefont, serif;
font-weight: bold;
}
79. Icon fonts
WEB FONT: COME IMPLEMENTARLI
https://vimeo.com/118908533Zach Leatherman, Better @font-face with Font Load Events
WEB FONT
FOUT
ICON FONT
FOIT
WEB FONT
ICON FONT
Usare un caricamento FOIT e non FOUT.
Molti consigliano però di usare SVG per le icone.
93. Questione morale
Se abbiamo chiesto ai nostri utenti di
utilizzare tempo e banda per scaricare
i web font, allora dobbiamo usarli
come si deve, al meglio di quanto
possono offrirci.